// **************************************************************
// **
// **     	vars
// **
// **************************************************************

var img_fader_duration = 3000;			// the fading duration
var img_fader_slide_steps = 20;			// steps of the slide fading process
var img_fader_interactive_steps = 5;	// steps of the interavtive fading process

var img_fader_imgs = new Array(); 		// array with the image objects
var img_fader_current_num = 0;			// curent image number

var img_fader_parent = null;			// the parent container of the images
var img_fader_coords = null;			// the coords of the parent container of the images

var img_fader_div = null;				// a wite backgrounded div object to cover the static image during the fade process
var img_fader_fade_object = null;		// the fading image	
var img_fader_static_object = null;		// the static image	

var img_fader_menu_parent = null;		// the mneu parent element
var img_fader_menu_title = '';			// the title of the menu

var img_fader_next_timeout = null;		// timeout object for the next image to losd
var img_fader_fade_timeout = null;		// timeout object for the fader steps
var img_fader_slide = true;				// rather the falder slides or not
var img_fader_steps = null;				// steps of the slide fading process 

// **************************************************************
// **
// **     	initiate the image fader
// **     	resets all vars and parameters
// **
// **************************************************************

function init_image_fader(num,debug){
	
	// define the global vars of the image fader
	// *********************************************

	// get the start image element
	var start_image_elm = false;
	if(!(start_image_elm = getObj('image_'+num)) && debug){
		alert('init_image_fader(): start image element not found!');
	}
	
	// get the menu parent element
	if(!(img_fader_menu_parent = getObj('view_btns')) && debug){
		alert('init_image_fader(): menu parent element not found!');
	}
	
	// define the parent of the images if not set
	if(!img_fader_parent){
		img_fader_parent = start_image_elm.parentNode;
	}

	// store the coords of the parent element if not set
	if(!img_fader_coords){
		img_fader_coords = dw_getObjOffset(img_fader_parent);
	}
	
	// reset the menu parent
	img_fader_menu_parent.innerHTML = ' ';
	
	// reset the image fader
	// *********************************************
	
	// reset the fader vars
	img_fader_imgs = [];
	img_fader_current_num = 0;
	img_fader_steps = img_fader_slide_steps;
	img_fader_reset();
	
	// define the images and its data 
	// *********************************************

	// get image info holder element
	var image_info_holder_elm = false;
	if(!(image_info_holder_elm = getObj('color_img_value_'+num)) && debug){
		alert('init_image_fader(): image info holder element not found!');
	}

	// try to get the image information 
	var image_info_elments = image_info_holder_elm.getElementsByTagName('span');
	
	// if there is more than one image 
	if(image_info_elments.length > 1){
		
		// build the image array
		for(var i=0 ; i<image_info_elments.length ; i++){
			var img = new Image();
			img.src = image_info_elments[i].innerHTML;
			img_fader_imgs.push(img);
		}
	}

	// if there is more than one image
	if(img_fader_imgs.length > 1){
		
		// build the menu
		img_fader_build_menu();
		
		// macke the first image clikable
		img_fader_parent.onclick = function(){ 
			img_fader_steps = img_fader_interactive_steps;
			img_fader_insert_next(); 
		};
		
		
		// create a div element to contain the fading images an cover the static image if not exists
		// *********************************************
	
		// if no div element exists
		if(!img_fader_div){
	
			// define the fade div element
			img_fader_div = document.createElement('div');
	
			img_fader_div.style.position = 'absolute';
			img_fader_div.style.top = img_fader_coords.top+'px';
			img_fader_div.style.left = img_fader_coords.left+'px';
			img_fader_div.style.height = img_fader_coords.height+'px';
			img_fader_div.style.width = img_fader_coords.width+'px';
	
			img_fader_div.style.opacity = 0;
			img_fader_div.style.MozOpacity = 0;
			img_fader_div.style.KhtmlOpacity = 0;
			img_fader_div.style.filter = "alpha(opacity=0)";
			
			img_fader_div.style.backgroundColor = '#FFFFFF';
			//img_fader_div.style.border = '1px solid #CCFFFF';
		}
	
		// initiate the next image insert
		// *********************************************
		
		if(img_fader_slide){
			//img_fader_next_timeout = window.setTimeout('img_fader_insert_next()',img_fader_duration);
			img_fader_stop();
		}
	}
}

// **************************************************************
// **
// **     	inserts the next image 
// **     	fires the fade in
// **
// **************************************************************

function img_fader_insert_next(num){

	// define next image num
	// *********************************************

	// take the received num as value
	if(num != undefined){
		img_fader_current_num = num;
		
	// take the next possible value
	}else{
		img_fader_current_num++;
		if(img_fader_current_num > img_fader_imgs.length-1){
			img_fader_current_num = 0;
		}
	}
	
	// update the menu
	// *********************************************
	
	img_fader_build_menu();
	
	
	// create the next image
	// *********************************************
	
	// set image height & width
	var image_height = img_fader_imgs[img_fader_current_num].height;
	var image_width = img_fader_imgs[img_fader_current_num].width;
	
	// check size for max height
	if(image_height > img_fader_coords.height){
		var factor = img_fader_imgs[img_fader_current_num].width/img_fader_imgs[img_fader_current_num].height;
		image_height = img_fader_coords.height;
		image_width = factor*image_height;
	}
	
	// calculate image position
	var image_top = img_fader_coords.height - image_height;
	var image_left = (img_fader_coords.width - image_width)/2;
	
	var img_fader_img = img_fader_imgs[img_fader_current_num];
	img_fader_img.style.paddingTop = image_top+'px';
	img_fader_img.style.height = image_height+'px';
	img_fader_img.style.width = image_width+'px';
	//img_fader_img.style.border = '1px solid #CC0000';
	
	// clone the div element
	img_fader_fade_object = img_fader_div.cloneNode(true);

	// insert the image into the container div
	img_fader_fade_object.appendChild(img_fader_img);
	
	// insert the withe div to the parent
	img_fader_parent.appendChild(img_fader_fade_object);
	
	
	// start fading in
	// *********************************************

	// fire the fade in
	img_fader_fade_in(100,img_fader_steps);
}

// **************************************************************
// **
// **     	fades in the next image
// **     	changes the objects on fade complete
// **     	initiates the next image insert
// **
// **************************************************************

function img_fader_fade_in(opac,steps){ 
	
	// clear the timeouts
	if(img_fader_next_timeout){
		window.clearTimeout(img_fader_next_timeout);
	}
	if(img_fader_fade_timeout){
		window.clearTimeout(img_fader_fade_timeout);
	}
	
	// get the current opacity
	if(img_fader_fade_object.style.opacity != undefined){
		var clipOpacity = parseFloat(img_fader_fade_object.style.opacity)*100;
	}else if(img_fader_fade_object.style.MozOpacity != undefined){
		var clipOpacity = parseFloat(img_fader_fade_object.style.MozOpacity)*100;
	}else if(img_fader_fade_object.style.KhtmlOpacity != undefined){
		var clipOpacity = parseFloat(img_fader_fade_object.style.KhtmlOpacity)*100;
	}else if(img_fader_fade_object.filters.Alpha.Opacity != undefined){
		var clipOpacity = parseFloat(img_fader_fade_object.filters.Alpha.Opacity);
	}

	// as long the fade is not completed
	if(clipOpacity < opac){
		var step = 100/steps;
		var newOpac = clipOpacity+step;
		
		img_fader_fade_object.style.opacity = (newOpac / 100);
		img_fader_fade_object.style.MozOpacity = (newOpac / 100);
		img_fader_fade_object.style.KhtmlOpacity = (newOpac / 100);
		img_fader_fade_object.style.filter = "alpha(opacity="+ newOpac +")"
		
		// go on to the next step
		img_fader_fade_timeout = window.setTimeout("img_fader_fade_in("+opac+","+steps+")",40);

	// if the fade has been completed
	}else{
		
		// reset the steps
		img_fader_steps = img_fader_slide_steps;
		
		// remove the static image element if already used
		if(img_fader_static_object){
			img_fader_parent.removeChild(img_fader_static_object);
		}
		
		// make the fading element the static element
		img_fader_static_object = img_fader_fade_object;
		img_fader_static_object.style.opacity = 1;
		img_fader_static_object.style.MozOpacity = 1;
		img_fader_static_object.style.KhtmlOpacity = 1;
		img_fader_static_object.style.filter = "alpha(opacity=100)";
		
		// go on to the nect image if requested
		if(img_fader_slide){
			img_fader_next_timeout = window.setTimeout('img_fader_insert_next()',img_fader_duration); 
		}
	}
}

// **************************************************************
// **
// **     	stop the slide show
// **
// **************************************************************

function img_fader_stop(){
	
	// set slide var
	img_fader_slide = false;
	
	// clear the next timeout
	if(img_fader_next_timeout){
		window.clearTimeout(img_fader_next_timeout);
	}
	
	// update menu
	img_fader_build_menu();
}

// **************************************************************
// **
// **     	build menu
// **
// **************************************************************

function img_fader_build_menu(){
	
	// build menu
	var img_fader_menu_btns = new Array();
	for(var i=0 ; i<img_fader_imgs.length ; i++){
		if(i == img_fader_current_num){
			img_fader_menu_btns.push('<b>'+(i+1)+'</b>');
		}else{
			img_fader_menu_btns.push('<a href="javascript:img_fader_steps=img_fader_interactive_steps; img_fader_insert_next('+i+');">'+(i+1)+'</a>');
		}		
	}
	img_fader_menu_parent.innerHTML = img_fader_menu_title+' &nbsp; ';
	img_fader_menu_parent.innerHTML += img_fader_menu_btns.join(' | ')+' &nbsp; ';
	
	// set slide stop btn
	if(img_fader_slide){
		img_fader_menu_parent.innerHTML += '<a href="javascript:img_fader_stop();">STOP</a>';
	}else{
		img_fader_menu_parent.innerHTML += '<a href="javascript:img_fader_slide=true; img_fader_insert_next();">PLAY</a>';
	}
}

// **************************************************************
// **
// **     	resets the image fader 
// **
// **************************************************************

function img_fader_reset(){

	// clear the timeouts
	if(img_fader_next_timeout){
		window.clearTimeout(img_fader_next_timeout);
	}
	if(img_fader_fade_timeout){
		window.clearTimeout(img_fader_fade_timeout);
	}

	// hide the falder elements if used
	if(img_fader_fade_object){
		img_fader_fade_object.style.opacity = 0;
		img_fader_fade_object.style.MozOpacity = 0;
		img_fader_fade_object.style.KhtmlOpacity = 0;
		img_fader_fade_object.style.filter = "alpha(opacity=0)";
	}
	if(img_fader_static_object){
		img_fader_static_object.style.opacity = 0;
		img_fader_static_object.style.MozOpacity = 0;
		img_fader_static_object.style.KhtmlOpacity = 0;
		img_fader_static_object.style.filter = "alpha(opacity=0)";
	}
	
	// rmove the click event listsner from the parent
	if(img_fader_parent){
		img_fader_parent.onclick = null;
	}
	
	// try to remove all fader nodes of the parent
	if(
		img_fader_parent && 
		img_fader_parent.hasChildNodes()
	){
		var fader_nodes = img_fader_parent.getElementsByTagName('div');
		for(var i=0 ; i<fader_nodes.length ; i++){
			img_fader_parent.removeChild(fader_nodes[i]);
		}
	}
	
	// reset the fader elements
	img_fader_fade_object = null;
	img_fader_static_object = null;
}

// **************************************************************
// **
// **     	onresize
// **
// **************************************************************

function img_fader_on_resize(){
	
	// restore the coords of the parent element if not set
	if(img_fader_parent){
		img_fader_coords = dw_getObjOffset(img_fader_parent);
	}
	
	// restore the position of the wite div
	if(img_fader_div){
		img_fader_div.style.top = img_fader_coords.top+'px';
		img_fader_div.style.left = img_fader_coords.left+'px';
	}
	
	// restore the position of the fade element
	if(img_fader_fade_object){
		img_fader_fade_object.style.top = img_fader_coords.top+'px';
		img_fader_fade_object.style.left = img_fader_coords.left+'px';
	}
	
	// restore the position of the static element
	if(img_fader_static_object){
		img_fader_static_object.style.top = img_fader_coords.top+'px';
		img_fader_static_object.style.left = img_fader_coords.left+'px';
	}

}

// **************************************************************
// **
// **     	gets the coorts of an object
// **
// **************************************************************

function dw_getObjOffset(obj){
	var coords = {left: 0, top: 0, width: 0, height: 0 };

	if(obj.clientWidth){
		coords.width = obj.clientWidth;
		coords.height = obj.clientHeight;
	}else if(obj.offsetWidth){
		coords.width = obj.offsetWidth;
		coords.height = obj.offsetHeight;
	}

	if(obj.offsetParent){
	
		while(1){
			coords.left += obj.offsetLeft;
			coords.top += obj.offsetTop;
			
			if(!obj.offsetParent){
				break;
			}
			obj = obj.offsetParent;
		}
	}else if(obj.y){

		coords.left += obj.x;
		coords.top += obj.y;
	}

	return coords;
}