//fade functions - Sets grey and white faded backgrounds, sets overlays and mimics AJAX by writing xhtml to the content. Includes all overlays such as video details and login and change of content in sub-genre pages

var Fade = {
	
	activated: false,
	overlayOpen: false,
	
	//opacity variables
	endOpacity: 0.8,
	startOpacity: 0.0,
	opacityIncrement: 0.1,
	opacityFullyHidden: 0.0,
	
	//timeout handles
	boxTimeoutHandle: null,
	overlayContent2TimeoutHandle: null,
	
	//DOM accessors
	getSpinnerElement: 					function() { return document.getElementById('spinner'); },
	getModalBackground:					function() { return document.getElementById('modalBackground'); },
	getOverlayContentElement: 			function() { return document.getElementById('overlayContent'); },
	getOverlayContent2Element:			function() { return document.getElementById('overlayContent2'); },
	getAazoneDetailOverlayElement: 		function() { return document.getElementById('aazone.detailoverlay'); },
	getAazoneOverlayElement: 			function() { return document.getElementById('aazone.overlay'); },
	getAazoneOverlayContent2Content:	function() { return document.getElementById('aazone.content'); },
	
	/**
	 * getInnerSpinnerElement method
	 * 
	 * returns the div.loadingSpinner inside spinner
	 * 
	 * @return HTMLElement
	 */
	getInnerSpinnerElement: function() {
		var spinner = this.getSpinnerElement();
		var divs = spinner.getElementsByTagName('div');
		for (var x = 0; x < divs.length; x++) {
			if (divs[x].className.match('loadingSpinner')) {
				return divs[x];
			}
		}
	},
	
	/**
	 * setOpacity method
	 * 
	 * sets the opacity of the passed in element to the specified value
	 * 
	 * @param HTMLElement element
	 * @param int opacity
	 */
	setOpacity: function(element, opacity) {
		opacity = Math.round(opacity * 10) / 10;
    	element.style.opacity = opacity;
    	element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
		element.setAttribute('cli-opacity', opacity);
	},
	
	/**
	 * getCanvasDimensions method
	 * 
	 * returns the width and height of the viewport
	 * 
	 * @return Object
	 */
	getCanvasDimensions: function() {
		
		var winWidth;
		var winHeight;
	
		if (typeof window.innerWidth != 'undefined') {
        	if(!navigator.vendor) {
            	winWidth = window.clientWidth;
            	winHeight = window.clientHeight;
           		if (!winWidth) {
					winWidth = window.innerWidth;
					winHeight = window.innerHeight;
				}
	    	} else {
		        winWidth = window.innerWidth;
		        winHeight = window.innerHeight;
	    	}

		} else {
        	var docEl = document.documentElement;

	    	if (docEl && typeof docEl.clientWidth != 'undefined' && docEl.clientWidth != 0) {
		    	winWidth = docEl.clientWidth;
		    	winHeight = docEl.clientHeight;
	    	} else {
  		    	if (document.body && typeof document.body.clientWidth != 'undefined') {
					winWidth = document.body.clientWidth;
		       		winHeight = document.body.clientHeight;
		    	}
	    	}
    	}
		
		return { 'width' : winWidth, 'height' : winHeight };
	},
	
	/**
	 * getPageXOffset method
	 * 
	 * returns the X scroll position
	 * 
	 * @return integer
	 */
	getPageXOffset: function() {
		if (typeof(window.pageXOffset) == 'number') return pageXOffset;
    	if (document.documentElement && document.documentElement.scrollLeft) return document.documentElement.scrollLeft;
    	if (document.body && document.body.scrollLeft) return document.body.scrollLeft;
    	return 0;
	},

	/**
	 * getPageYOffset method
	 * 
	 * returns the Y scroll position
	 * 
	 * @return integer
	 */
	getPageYOffset: function() {
		if (typeof(window.pageYOffset) == 'number') return pageYOffset;
    	if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
    	if (document.body && document.body.scrollTop) return document.body.scrollTop;
    	return 0;
	},
	
	/**
	 * showWaiting method
	 * 
	 * displays the loading spinner
	 */
	showWaiting: function() {
		
		var spinner = this.getSpinnerElement();

		if (spinner) {
			
			var overlay = document.getElementById('cli-spinner-fade');
			if (this.overlayOpen) {
				//set top position of overlay to 0
				overlay.style.top = '0';
			} else {
				//clear top position
				overlay.style.top = '';
			}
			
			if (window.ie6) {
				
				overlay.style.height = document.body.clientHeight + 'px';
				
				//setup of the pseudo-fixed positioning for IE6
				var innerSpinner = this.getInnerSpinnerElement();
				innerSpinner.oTop = (document.documentElement.clientHeight / 2);
				innerSpinner.style.top = (innerSpinner.oTop + document.documentElement.scrollTop) + 'px';
			}
						
			spinner.style.zIndex  = 800;
	    	spinner.className = 'showSpinner';
			
			this.hideSelectBoxesInIE6();
			if (window.ff2onmac) this.hideFlashVideoPlayersInFFoxMac();
		}
		
		//initial call should attach scroll
		if (!this.activated && window.ie6) {
			window.onscroll = this.onScroll;
			this.activated = true;
		}
		
	},
	
	/**
	 * hideWaiting
	 * 
	 * removes the loading spinner
	 */
	hideWaiting: function() {
		var spinner = this.getSpinnerElement();
		if (spinner != null) spinner.className = "";
		if (!this.overlayOpen) {
			this.showSelectBoxesInIE6();
			if (window.ff2onmac) this.showFlashVideoPlayersInFFoxMac();
		}
	},
	
	// box fade in/out methods
	
	boxFadeIn: function() {
		
		window.clearTimeout(this.boxTimeoutHandle);
    
		var elementToFade = this.getModalBackground();
    	if (elementToFade == null) return;
		
		this.hideSelectBoxesInIE6();

    	if (window.ie6) elementToFade.style.height = document.body.clientHeight + 'px';

		elementToFade.style.display = 'block';
		this.overlayOpen = true;

		if (elementToFade.getAttribute("cli-opacity") != null) {
			this.boxFadeInFunc(parseFloat(elementToFade.getAttribute("cli-opacity")), elementToFade);
		} else {
			this.boxFadeInFunc(this.startOpacity, elementToFade);
		}
	},
	
	boxFadeInFunc: function(opacity, elementToFade) {
		
		if (elementToFade == null) return;
		
		if (opacity < this.endOpacity) {
			//still fading, increase opacity and repeat
			opacity += this.opacityIncrement;
			this.setOpacity(elementToFade, opacity);
			function r() { Fade.boxFadeInFunc(opacity, elementToFade); }
			this.boxTimeoutHandle = window.setTimeout(r, 20);
		} else {
			//display and position box
			var overlay = this.getAazoneDetailOverlayElement();
			overlay.style.display = 'block';
			overlay.style.zIndex = '4';
		}

	},
	
	boxFadeOut: function() {
		window.clearTimeout(this.boxTimeoutHandle);
		this.showSelectBoxesInIE6();
    	this.getAazoneDetailOverlayElement().style.display = 'none';
		this.overlayOpen = false;
    	this.boxFadeOutFunc(0.6, this.getModalBackground());
	},
	
	boxFadeOutFunc: function(opacity, elementToFade) {
		
		if (elementToFade == null) return;
		
		if (opacity > this.opacityFullyHidden) {
			//continue to fade out
			opacity -= this.opacityIncrement;
			this.setOpacity(elementToFade, opacity);
			function r() { Fade.boxFadeOutFunc(opacity, elementToFade); }
			this.boxTimeoutHandle = window.setTimeout(r, 50);
		} else {
			//hide element and call complete
			elementToFade.style.display = 'none';
			if (window.pageBoxFadeOutComplete != null) window.pageBoxFadeOutComplete();
		}
	},
	
	/**
	 * showPackInfo function
	 * 
	 * @param string bundle - name of the bundle to open the overlay for - id of the overlay should be overlay_{bundle}
	 */
	showPackInfo: function(bundle) {
		
		var modalBackground = this.getModalBackground();
		
		if (!this.packOverlay) {
			this.packOverlay = document.createElement('div');
			this.packOverlay.className = 'modalObjects';
			this.packOverlay.style.background = '#000000';
			this.setOpacity(this.packOverlay, 0.8);
			modalBackground.parentNode.insertBefore(this.packOverlay, modalBackground);
		}
		this.packOverlay.style.display = 'block';
		var bundleOverlay = document.getElementById('overlay_' + bundle);
		modalBackground.parentNode.insertBefore(bundleOverlay, modalBackground);
		bundleOverlay.style.display = 'block';
	},
	
	/**
	 * hidePackInfo function
	 * 
	 * @param string bundle - as showPackInfo
	 */
	hidePackInfo: function(bundle) {
		this.packOverlay.style.display = 'none';
		document.getElementById('overlay_' + bundle).style.display = 'none';
	},
	
	/**
	 * setOverlay method
	 * 
	 * sets the content of the overlay
	 * 
	 * @param string content
	 */
	setOverlay: function(content) {
		var overlay = this.getAazoneOverlayElement();
		overlay.innerHTML = content;
		
		if (window.ie6) {
			overlay.oTop = 70;
			overlay.style.top = overlay.oTop + document.documentElement.scrollTop;
		}

    	this.hideWaiting();
    	this.overlayContent2FadeIn();
	},
	
	/**
	 * setContent method
	 * 
	 * provides sub-genre changes
	 * 
	 * @param string content
	 */
	setContent: function(content) {
		
		var overlay = this.getAazoneOverlayElement();
		overlay.style.display = 'none';

		//fade out box and overlay2
		this.boxFadeOut();
		this.overlayContent2FadeOut();
		
		//remove the spinner
		this.hideWaiting();
		
		//populate the content area
		this.getAazoneOverlayContent2Content().innerHTML = content;
		//scroll back to the top
		window.scrollTo(0,0);
	},
	
	/**
	 * setDetailOverlay method
	 * 
	 * hides loading display and displays video details
	 * 
	 * @param string content
	 */
	setDetailOverlay: function(content) {
		
		this.overlayContent2FadeOut();
		
		var overlay = this.getAazoneDetailOverlayElement();
		
		if (window.ie6) {
			overlay.oTop = 70;
			overlay.style.top = overlay.oTop + document.documentElement.scrollTop;
		}
		
		overlay.style.display = 'none';
		overlay.innerHTML = content;
		
		this.hideWaiting();
		this.boxFadeIn();
	},
	
	//fading for overlay content 2
	
	overlayContent2FadeOut: function() {
		window.clearTimeout(this.overlayContent2TimeoutHandle);
    	this.showSelectBoxesInIE6();
		this.overlayOpen = false;
    	this.getAazoneOverlayElement().style.display = 'none';
    	this.overlayContent2FadeOutFunc(0.6, this.getOverlayContent2Element());
	},
	
	overlayContent2FadeOutFunc: function(opacity, elementToFade) {
	
		if (elementToFade == null) return;
		
		if (opacity > this.opacityFullyHidden) {
			//continue to fade out
			opacity -= this.opacityIncrement;
			this.setOpacity(elementToFade, opacity);
			function r() { Fade.overlayContent2FadeOutFunc(opacity, elementToFade); }
			this.overlayContent2TimeoutHandle = window.setTimeout(r, 50);
		} else {
			//hide the box
			elementToFade.style.display = 'none';
		}

	},
	
	overlayContent2FadeIn: function() {
		
		window.clearTimeout(this.overlayContent2TimoutHandle);
    	this.hideSelectBoxesInIE6();

    	var overlayContent2 = this.getOverlayContent2Element();
		overlayContent2.style.display = "block";
		this.overlayOpen = true;
    	
		//we need to override the hidden selects if they are in the overlay content
    	this.showOverlaySelectBoxesInIE6(this.getAazoneOverlayElement());

		if (overlayContent2.getAttribute("cli-opacity") != null) {
			this.overlayContent2FadeInFunc(parseFloat(overlayContent2.getAttribute("cli-opacity")), overlayContent2);
		} else {
			this.overlayContent2FadeInFunc(this.startOpacity, overlayContent2);
		}
	},
	
	overlayContent2FadeInFunc: function(opacity, elementToFade) {
		
		if (elementToFade == null) return;
		
		if (opacity < this.endOpacity) {
			//continue to fade in
			opacity += this.opacityIncrement;
			this.setOpacity(elementToFade, opacity);
			
			function r() { Fade.overlayContent2FadeInFunc(opacity, elementToFade); }
	    	this.overlayContent2TimoutHandle = setTimeout(r, 1); 
		
		} else {
			
			var overlay = this.getAazoneOverlayElement();
			overlay.style.display = 'block';
			overlay.style.zIndex = 6;
			
			//sets the focus of the cursor in the overlay to the form name login and the id of the element must be called focuselement
			if (document.getElementById('focuselement')) {
		    	document.getElementById('focuselement').focus();
			}
		}
		
	},
	
	/**
	 * functions to show and hide select boxes in IE to stop them appearing over the overlay
	 */
	showOverlaySelectBoxesInIE6: function(overlay) {
		//show the select boxes for the overlay div passed in as a parameter
    	if (!window.XMLHttpRequest) {
	    	var selects = overlay.getElementsByTagName('select');
			for (i = 0; i < selects.length; i++) {
				selects[i].style.display = '';
			}
	    }
	},
	
	hideSelectBoxesInIE6: function() {
	
		if (!window.XMLHttpRequest) {
			var selects = document.getElementsByTagName('select');
		    for (i=0; i < selects.length; i++) {
		        selects[i].style.display = 'none';
		    }
		}
	},
	
	showSelectBoxesInIE6: function() {
		
		if (!window.XMLHttpRequest) {
			var selects = document.getElementsByTagName('select');
		    for (i=0; i < selects.length; i++) {
		        selects[i].style.display = '';
		    }
		}
	},

	hideFlashVideoPlayersInFFoxMac: function() {
		try {
			var videoplayers = document.getElementsByTagName('div');
			for (i = 0; i < videoplayers.length; i++) {
				if (videoplayers[i].className.indexOf('pspFlashVideoPlayer') >= 0) {
					videoplayers[i].style.visibility = 'hidden';
				}
			}
		} 
		catch (e) {
			CliDebug( "CliPspFade.js.vm hideFlashVideoPlayersInFFoxMac script error: " + e.message );
		}
	},

	showFlashVideoPlayersInFFoxMac: function() {
		try {
			var videoplayers = document.getElementsByTagName('div');
			for (i = 0; i < videoplayers.length; i++) {
				if (videoplayers[i].className.indexOf('pspFlashVideoPlayer') >= 0) {
					videoplayers[i].style.visibility = 'visible';
				}
			}
		} 
		catch (e) {
			CliDebug( "CliPspFade.js.vm showFlashVideoPlayersInFFoxMac script error: " + e.message );
		}
	},

	
	/**
	 * onScroll method
	 * 
	 * called when the window scrolls to updated the 'fixed' positions for IE6
	 */
	onScroll: function() {
		
		var spinner = Fade.getSpinnerElement();
		if (spinner) var innerSpinner = Fade.getInnerSpinnerElement();
		var overlay = Fade.getAazoneDetailOverlayElement();
		var overlay2 = Fade.getAazoneOverlayElement();
		
		var scrollTop = document.documentElement.scrollTop;
		
		if (spinner && innerSpinner && innerSpinner.oTop) {
			//oTop will only be set if in IE6
			innerSpinner.style.top = (innerSpinner.oTop + scrollTop) + 'px';
		}
		
		if (overlay && overlay.oTop) {
			overlay.style.top = (overlay.oTop + scrollTop) + 'px';
		}
		
		if (overlay2 && overlay2.oTop) {
			overlay2.style.top = (overlay2.oTop + scrollTop) + 'px';
		}
		
	}
	
}

/**
 * The following methods are the originals. Their use should be replaced with the relevant Fade method but they are being
 * left here as they are likely to be used in various places in the system.
 */

// @deprecated use Fade.getPageXOffset
function fadeGetPageXOffset() {
    return Fade.getPageXOffset();
}

// @deprecated use Fade.getPageYOffset
function fadeGetPageYOffset() {
    return Fade.getPageYOffset();
}

//@deprecated use Fade.showWaiting
function show_waiting() {
    Fade.showWaiting();
}

//@deprecated use Fade.hideWaiting
function hide_waiting() {
    Fade.hideWaiting();
}

//@deprecated use Fade.setDetailOverlay
function set_detail_overlay(xhtml) {
	Fade.setDetailOverlay(xhtml);
}

//@deprecated use Fade.boxFadeIn
function fadeBox_Fadein() {
    Fade.boxFadeIn();
}

//@deprecated use Fade.boxFadeOut
function fadeout_box() {
    Fade.boxFadeOut();
}

//@deprecated use Fade.setOverlay
function set_overlay( contentXml ) {
    Fade.setOverlay(contentXml);
}

//@deprecated use Fade.setContent
function set_content(xhtml) {
    Fade.setContent(xhtml);
}

//@deprecated use Fade.overlayContent2FadeOut
function fadeout_overlaycontent2() {
    Fade.overlayContent2FadeOut();
}

//@deprecated use Fade.overlayContent2FadeIn
function fadeOverlayContent2_Fadein() {
    Fade.overlayContent2FadeIn();
}

//@deprecated use Fade.setOpacity
function fadeSetElementOpacity(element, opacity) {
	Fade.setOpacity(element, opacity);
}

//@deprecated use Fade.showOverlaySelectBoxesInIE6
function fadeShowOverlaySelectBoxesInIE6(overlay) {
    Fade.showOverlaySelectBoxesInIE6(overlay);
}

//@deprecated use Fade.hideSelectBoxesInIE6
function fadeHideSelectBoxesInIE6() {
	Fade.hideSelectBoxesInIE6();
}

//@deprecated use Fade.showSelectBoxesInIE6
function fadeShowSelectBoxesInIE6() {
    Fade.showSelectBoxesInIE6();
}