/*
Copyright (c) 2009, www.redips.net  All rights reserved.
Code licensed under the BSD License: http://www.redips.net/license/

http://www.redips.net/javascript/dialog-box/
version 1.0.1
Aug 27, 2009.
*/


// global variables
var shade;             // shade div (object reference)
var dialog_box;        // dialog box (object reference)
var dialog_width  = 0; // initialize dialog height
var dialog_height = 0; // initialize dialog height
var opHigh = 60;       // highest opacity level
var opLow  = 0;        // lowest opacity level (should be the same as initial opacity in the CSS)
var fadeSpeed = 18;		 // 18ms pause - fade speed
var function_call;		 // function called after button is pressed 


// initialize
window.onload = function(){
	// create dialog box
	dialog_box = document.createElement('div');
	dialog_box.setAttribute('id', 'dialog');
	// create shade div
	shade = document.createElement('div');
	shade.setAttribute('id', 'shade');
	// append dialog box and shade to the page body
	var body = document.getElementsByTagName('body')[0];
	body.appendChild(shade);
	body.appendChild(dialog_box);
	// define onscroll & onresize event handler
	window.onscroll = dialog_position;
	window.onresize = dialog_position;
}


// show dialog box
function showDialog(width, height, text, button1, button2){
	// define input2 (optional) button and set button1 default value
	var input2 = '';
	if (button1 == undefined) button1 = '.';
	// set dialog width, height and calculate central position
	dialog_width  = width;
	dialog_height = height;
	dialog_position();
	// if text ends with jpg, jpeg, gif or png, then prepare img tag
	var img = /(.jpg|.jpeg|.gif|.png)$/i;
	if (img.test(text))	text = '<IMG src="'+text+'" height="'+(height-40)+'"/>';

	var mov = /(.wmv|.mp4|.mp3|.mpg)$/i;
	if (mov.test(text))	text = '<embed bgcolor="white" src="/assets/mov/'+text+'" width="420" height="300"></embed>';
	
	
	var mov = /(.flv)$/i;
	if (mov.test(text))	text = '<embed src="/player.swf" width="420" height="300" autostart="true" allowscriptaccess="always" allowfullscreen="true" flashvars="height=240&width=320&autostart=true&file=/assets/mov/'+text+'"/>';


	// prepare button1
	button1 = button1.split('|');
	input1  = '<INPUT type="button" id="closeit" onclick="hideDialog(\''+button1[1]+
						'\');" value="'+button1[0]+'">'
	// prepare optional button2 
	if (button2 != undefined){
		button2 = button2.split('|');
		input2  = '<INPUT type="button" onclick="hideDialog(\''+button2[1]+
							'\');" value="'+button2[0]+'">'
	}
	// set HTML for dialog box - use table to vertical align content inside
	// dialog box (this should work in all browsers)
	dialog_box.innerHTML = '<TABLE><TR><TD valign="center" height="'+height+ 
												 '" width="'+width+'">'+text+'<P>'+input1+input2+'</P>'+
												 '</TD></TR></TABLE>';
	// show shade and dialog box
	shade.style.display = dialog_box.style.display = 'block';
	// hide dropdown menus, iframes & flash
	set_visibility('hidden');
	// show shaded div slowly
	fade(opLow, 10);
}


// hide dialog box and shade
function hideDialog(fnc){
	// set function call
	function_call = fnc;
	// start fade out
	fade(opHigh, -20);
	// hide dialog box
	dialog_box.style.display = 'none';
	// show dropdown menu, iframe & flash
	set_visibility('visible');
	
}


// function sets dialog position to the center and maximize shade div
function dialog_position(){
	// define local variables
	var window_width, window_height, scrollX, scrollY;
	// Non-IE (Netscape compliant)
  if (typeof(window.innerWidth) == 'number'){
		window_width  = window.innerWidth;
		window_height = window.innerHeight;
		scrollX = window.pageXOffset;
		scrollY = window.pageYOffset;
  }
  // IE 6 standards compliant mode
  else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
    window_width  = document.documentElement.clientWidth;
    window_height = document.documentElement.clientHeight;
		scrollX = document.documentElement.scrollLeft;
		scrollY = document.documentElement.scrollTop;
		// IE hack because #shade{width:100%;height:100%;} will not work for IE if body{height:100%} isn't set also ?!
		shade.style.width   = window_width  + 'px';
		shade.style.height  = window_height + 'px';
  }
  // DOM compliant
  else if (document.body && (document.body.clientWidth || document.body.clientHeight)){
    window_width  = document.body.clientWidth;
    window_height = document.body.clientHeight;
		scrollX = document.body.scrollLeft;
		scrollY = document.body.scrollTop;
  }
	// place dialog box to the center
	dialog_box.style.left = (scrollX + ((window_width  - dialog_width)  / 2)) + 'px';
	dialog_box.style.top  = (scrollY + ((window_height - dialog_height) / 2)) + 'px';
	// set shade offset
	shade.style.top  = scrollY + 'px';
	shade.style.left = scrollX + 'px';
}


// show/hide dropdown menu, iframe and flash objects (work-around for dropdown menu problem in IE6)
function set_visibility(p) {
	// define tag array
	var obj = new Array();
	obj[0] = document.getElementsByTagName('select');
	obj[1] = document.getElementsByTagName('iframe');
	obj[2] = document.getElementsByTagName('object');
	// loop through fetched elements
	for (var x=0; x<obj.length; x++)
		for (var y=0; y<obj[x].length; y++) obj[x][y].style.visibility = p;
}


// shade fade in / fade out
function fade(opacity, step){
	shade.style.opacity = opacity / 100;                // set opacity for FF
	shade.style.filter  = 'alpha(opacity='+opacity+')'; // set opacity for IE
	opacity += step;                                    // update opacity level
	// recursive call if opacity is between 'low' and 'high' values
	if (opLow <= opacity && opacity <= opHigh)
		setTimeout(function(){fade(opacity,step)}, fadeSpeed); // 18ms pause - fade speed
	// hide shade div when fade out ends and make function call 
	else if (opLow > opacity){
		shade.style.display = 'none';
		if (function_call != 'undefined') eval(function_call);
	}
}


//
// onclick button handlers
//


// onclick button1 
function button1(){
	alert('Called button1()');
}

// onclick button22
function button2(){
	alert('Called button2()');
}