//*********************//


//*** BACKGROUND LOGO PICTURE CHANGE THING... ***//
var buttons_shown = false;
var hide_buttons_timeout;

function showHideChangeButtons(show){
	if(show){
		clearTimeout(hide_buttons_timeout);
		doShowHideChangeButtons(show);
	}else{
		hide_buttons_timeout = setTimeout("doShowHideChangeButtons(false)",2000);
	}
}

function doShowHideChangeButtons(show){
	var timer = 0;
	if(show){
		if(!buttons_shown){
			//NOTE: Buttons opacity is set to 15% in CSS stylesheet
			for(i=0;i<=15;i++){
				setTimeout("changeOpacity('change_left'," + i + ")",timer*20);
				setTimeout("changeOpacity('change_right'," + i + ")",timer*20);
				timer++;
			}	
			buttons_shown = true;
		}
	}else{
		if(buttons_shown){
			for(i=15;i>=0;i--){
				setTimeout("changeOpacity('change_left'," + i + ")",timer*20);
				setTimeout("changeOpacity('change_right'," + i + ")",timer*20);
				timer++;
			}			
			buttons_shown = false;
		}
	}
}

var current_background_logo = 0;
var array_background_logos = Array();
var start_flag;var stop_flag; //the flags are used to stop people from clicking multiple times and messing up the picture changes (fade would flicker etc.)

function logoChange(step){
	if(slideshowID!=0) stopSlideshow();
	if(start_flag) stop_flag = true;
	doLogoChange(step);
    setTimeout("clearFlags()",1200); 
}
function doLogoChange(step){
	var speed = 20; 	//sets the speed of the fading
	var low = 0; 	//0 = fade completely out
	var high = 100; 	//60 = semi-transparent
	var i = 0;
	var timer = 0;
    
    start_flag = true;
    
    //pre-loading next image
    var img = new Image();
    img.src = 'http://www.retropeak.com/images/backgrounds/'+array_background_logos[(current_background_logo+step)];
    
    //FADE OUT
    for(i=high; i>=low;){
        if(stop_flag&&start_flag){break;}
        //ready_to_change_background = false;
        setTimeout("changeOpacity('header_background'," + i + "," + step +")",(timer * speed));
        timer++;
        i = i-2;
    }
    //FADE IN
    for(i=1; i<=high;){
        if(stop_flag&&start_flag){break;}
        setTimeout("changeOpacity('header_background'," + i + ")",(timer * speed));
        timer++;
        i = i+2;
    }
}
function clearFlags(){stop_flag = false; start_flag = false;}

function changeOpacity(layer,opacity,step){
	step = (typeof step == "undefined") ? 0 : step; //if the step variable is undefined, assign 0 as default value
    var object = document.getElementById(layer).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    if(opacity==0 && step!=0){
        changeBackgroundLogo(step);
    }
}

function changeBackgroundLogo(step){
    //CHANGE PICTURE
    var object = document.getElementById("header_background").style;
    if(step>0){
        current_background_logo = current_background_logo+step;
        if(current_background_logo>max_logo_index) current_background_logo = 0;
        object.backgroundImage = "url('http://www.retropeak.com/images/backgrounds/"+array_background_logos[current_background_logo]+"')";
    }else if(step<0){
        current_background_logo = current_background_logo+step;
        if(current_background_logo<0) current_background_logo = max_logo_index;
        object.backgroundImage = "url('http://www.retropeak.com/images/backgrounds/"+array_background_logos[current_background_logo]+"')";
    }
}        

var slideshowID = 0;
var slideshowOn = true;
function startSlideshow(){	
	if(!slideshowOn) slideshowID = setInterval("doLogoChange(1)",8000);
	slideshowOn = true;
}

function stopSlideshow(){	
	clearInterval(slideshowID);
	start_flag=false;stop_flag=false;
	slideshowOn = false;
}

//*********************//

//***************************************************************************************************************
//***** OTHER SCRIPTS *******************************************************************************************
//***************************************************************************************************************

// ### OVERLAY SCRIPTS ### //

//script that fades a overlay in or out (used to control the user's focus)

var overlay_displayed = false;			//tells other functions if the transparent layer is displayed or not
var overlay_content_displayed = false;  //tells other functions if something is displayed on top of the transparent layer or not

function toggleOverlay(show_or_hide) {	
	var speed = 5; 	//sets the speed of the fading
	var low = 0; 	//0 = fade completely out
	var high = 60; 	//60 = semi-transparent
	var i = 0;
	var timer = 0;



	//resize the overlay div to accomodate for changed windows size etc.
    var overlay = document.getElementById("overlay").style;
	var docHeight; var docWidth;
	if (typeof document.height != 'undefined') {
		docHeight = document.height;
		docWidth = document.width;
	}else if (document.compatMode && document.compatMode != 'BackCompat') {
		docHeight = document.documentElement.scrollHeight;
		docWidth = document.documentElement.scrollWidth;
	}
	else if (document.body && typeof document.body.scrollHeight !='undefined') {
		docHeight = document.body.scrollHeight;
		docWidth = document.body.scrollWidth;
	}
	//set minimum height
	if(docHeight<600) docHeight = 600;
	
    overlay.height = docHeight+"px";
    overlay.width = docWidth+"px";
				
	if(show_or_hide == 1) {
		//the overlay is hidden as default, so start by showing it (although transparent), if the purpose is to fade in
		toggleLayer('overlay',1);
		for(i=low; i<=high;){
			setTimeout("toogleOverlayChangeOpacity(" + i + ")",(timer * speed));
			timer++;
			i = i+2;
		}
		overlay_displayed = true;
	}else {
		for(i=high; i>=low;){
			setTimeout("toogleOverlayChangeOpacity(" + i + ")",(timer * speed));
			timer++;
			i = i-2;
		}
		//if fading out, then end by hiding the overlay so it doesn't block for other divs
		setTimeout("toggleLayer('overlay',2)",(timer*speed));
		overlay_displayed = false;
	} 
}	

//function is used in the toggleOverlay function above
function toogleOverlayChangeOpacity(opacity) {    
    var object = document.getElementById("overlay").style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 	


// This function toggles the display property of the div id
// function_var:   0=toggle layer on/off (default)   1=show layer   2=hide layer
// overlay_function: false=don't toggle transparent layer (default)   true=toggle transparent layer
function toggleLayer(layer_id,function_var,overlay_function){
	function_var = (typeof function_var == "undefined") ? 0 : function_var; //if the function_var is undefined, assign 0 as default value
	overlay_function = (typeof overlay_function == "undefined") ? false : overlay_function; //if the overlay_function variable is undefined, assign false as default value
	
	var obj; var displayed_a_layer = false;
	
	if (document.getElementById){
		obj = document.getElementById(layer_id).style;
	}else if (document.all){
		obj = document.all[layer_id].style;
	}else if (document.layers){
		obj = document.layers[layer_id].style;
	}
	if (obj){
		if(function_var==0){ //toggle on/off
			if(obj.display){
				obj.display = "";
				displayed_a_layer = false;
			}else{
				obj.display = "block";
				displayed_a_layer = true;
			}
		}else if(function_var==1){ //show layer
			obj.display = "block";
			displayed_a_layer = true;
		}else if(function_var==2){ //hide layer
			obj.display = "";
			displayed_a_layer = false;
		}


		if(displayed_a_layer){
			if(overlay_function){ //if set to true, the overlay should be toggled (on/off) 
				toggleOverlay(1);
				overlay_content_displayed = true;
			 }
			return 1;
		}else{
			if(overlay_function){ //if set to true, the overlay should be toggled (on/off) 
				toggleOverlay(0);
				overlay_content_displayed = false;
			 }
			return 0;
		}
	}
}