//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 FadeEndOpacity = 0.8; // the end opacity of the white faded background
var FadeStartOpacity = 0.0;
var FadeOpacityIncrement = 0.100;

var FadeOpacityFullyHidden = 0.0;

// setTimeout handle used by fadein/out of 'box'. allow fade out to cancel fade in etc.
var fadeBoxTimeoutHandle = 0;

// setTimeout handle used by fadein/out of 'overlayContent2'. allow fade out to cancel fade in etc.
var fadeOverlayContent2TimoutHandle = 0;

//--------------------------------------------------------------------------------
// The following functions obtain named elements from the page
//
function fadeGetSpinnerElement() { return document.getElementById( 'spinner2' ); }
function fadeGetBoxElement() { return document.getElementById( 'box' ); }
function fadeGetOverlayContentElement() { return document.getElementById( 'overlayContent' ); }
function fadeGetAazoneDetailOverlayElement() { return document.getElementById( 'aazone.detailoverlay' ); }
function fadeGetAazoneOverlayElement() { return document.getElementById( 'aazone.overlay' ); }
function fadeGetAazoneTandCsOverlayElement() { return document.getElementById( 'tandcsoverlay' ); }
function fadeGetOverlayContent2Element() { return document.getElementById( 'overlayContent2' ); }
//--------------------------------------------------------------------------------

//--------------------------------------------------------------------------------
//
var _fadeCanvasWidth;
var _fadeCanvasHeight;
function fadeGetCanvasWidthAndHeight()
{
	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
	    {
            var docBody = document.body;
            
  		    if( docBody && typeof docBody.clientWidth != 'undefined' )
		    {
		       winWidth = docBody.clientWidth
		       winHeight = docBody.clientHeight
		    }
	    }
    }
    
    _fadeCanvasHeight   = winHeight;
    _fadeCanvasWidth    = winWidth;
}

//--------------------------------------------------------------------------------
//
function fadeGetPageXOffset()
{
    if( typeof( window.pageYOffset ) == 'number' )
	    return pageXOffset;

    var doc = document;
    var docEl = doc.documentElement;
    if( docEl && docEl.scrollLeft )
	    return docEl.scrollLeft;

    var docBody = doc.body;
    if( docBody && docBody.scrollLeft )
	    return docBody.scrollLeft;

    return 0;
}

//--------------------------------------------------------------------------------
//
function fadeGetPageYOffset()
{
    if( typeof( window.pageYOffset ) == 'number' )
        return pageYOffset;
    
    var doc = document;
    var docEl = doc.documentElement;
    if( docEl && docEl.scrollTop )
	    return docEl.scrollTop;
    
    var docBody = doc.body;
    if( docBody && docBody.scrollTop )
	    return docBody.scrollTop;
    
    return 0;
}



//API spinner
function show_waiting()
{
    var spinner = fadeGetSpinnerElement();
    
    // only do this if there is a spinner element
    if( spinner != null )
    {
    	var toppos = fadeGetPageYOffset();
    	lefpos = fadeGetPageXOffset();
    	
	    fadeGetCanvasWidthAndHeight();
	    var winWidth    = _fadeCanvasWidth;
	    var winHeight   = _fadeCanvasHeight;

	    var ctop = ( toppos + ( winHeight / 100 ) * 45 );
	    var clef = ( winWidth / 2 );

    	spinner.style.position  = "absolute";
	    spinner.style.zIndex    = 10005;
	    spinner.style.top       = ctop + "px";
	    spinner.style.left      = clef + "px";
	    spinner.style.display   = "block";
    }
}

//--------------------------------------------------------------------------------
// partner function to show_waiting.  stops the spinner updating
//
function hide_waiting()
{
    var spinner = fadeGetSpinnerElement();
    if( spinner != null )
    {
        spinner.style.display="none";
    }
}


//API hides spinner and shows video details with white faded background
function set_detail_overlay( xhtml )
{
	fadeout_overlaycontent2();
	
    var aazoneDetailOverlay = fadeGetAazoneDetailOverlayElement();
	aazoneDetailOverlay.style.display = "none";
	aazoneDetailOverlay.innerHTML = xhtml;
	hide_waiting();
    fadeBox_Fadein();
}

function fadeBox_Fadein() // @in_progress
{
    clearTimeout( fadeBoxTimeoutHandle );
    
    var elementToFade = fadeGetBoxElement();
    if( elementToFade == null )
        return;

    elementToFade.style.height = (elementToFade.className.match(/registrationFadeoutBox/)) ? $('#scontainer').innerHeight() + "px" : fadeGetOverlayContentElement().offsetHeight + "px";
	elementToFade.style.display = "inline";		

	if(elementToFade.getAttribute("cli-opacity") != null){
		fadeBox_Fadein_Func( parseFloat(elementToFade.getAttribute("cli-opacity")), elementToFade );
	} else {
		fadeBox_Fadein_Func( FadeStartOpacity, elementToFade );
	}
}

function fadeBox_Fadein_Func( opacity, elementToFade )
{
    if( elementToFade == null )
        return;

    if( opacity < FadeEndOpacity )
	{   
		opacity = opacity + FadeOpacityIncrement;
		fadeSetElementOpacity( elementToFade, opacity );
		
		function r(){ fadeBox_Fadein_Func( opacity, elementToFade ); }
		fadeBoxTimeoutHandle = setTimeout( r , 20 ); 
	}
	else
	{
		var ctop = fadeWtf1();

        var aazoneDetailOverlay = fadeGetAazoneDetailOverlayElement();
		aazoneDetailOverlay.style.position = "absolute";
		aazoneDetailOverlay.style.top        = ctop + "px";
		aazoneDetailOverlay.style.left       = 0 + "px";
		aazoneDetailOverlay.style.display    = "block";
		aazoneDetailOverlay.style.zIndex     = "4";
		aazoneDetailOverlay.style.margin     = "auto";

		// calculate bottom offset for detail overlay
		var aazoneDetailOverlayCalculatedHeight = $(aazoneDetailOverlay).outerHeight() + $(aazoneDetailOverlay).offset().top;  
		
		// calculate bottom offset for scontainer
		var scontainerCalculatedHeight = $('#scontainer').outerHeight() + $('#scontainer').offset().top;
		
		// if scontainer calculated Height <  detail overlay calculated height, adjust height of scontainer + 50 (for padding/margin).
		// adding an element at the end of scontainer to manage the height, which is removed when fadeout is triggered.
		var padding=50;
		if(scontainerCalculatedHeight <= aazoneDetailOverlayCalculatedHeight + padding)
		{
			$('#scontainer').append("<div id='videoDetailsSpacerDiv' style='height:"+((aazoneDetailOverlayCalculatedHeight - scontainerCalculatedHeight)+padding)+"px;'/>");
		}
	}
}

//Hides video details and calls fadeout_box__func which removes faded white overlay
function fadeout_box()// @in_progress
{
    clearTimeout( fadeBoxTimeoutHandle );
    fadeGetAazoneDetailOverlayElement().style.display = "none";
    	
    //we need to override the hidden selects if they are in the overlay content
    fadeShowOverlaySelectBoxesInIE6(fadeGetOverlayContentElement());
	
	$("#videoDetailsSpacerDiv").remove();
	
    fadeout_box__func( 0.6, fadeGetBoxElement() );
}


//fades out white overlay 
function fadeout_box__func( opacity, elementToFade )
{
    if( elementToFade == null )
	    return;
    
	if( opacity > FadeOpacityFullyHidden )
	{   
		opacity = opacity - FadeOpacityIncrement;
		fadeSetElementOpacity( elementToFade, opacity );

        function r(){ fadeout_box__func( opacity, elementToFade ); }
		fadeBoxTimeoutHandle = setTimeout( r, 50 ) ; 
	}
	else
	{
		elementToFade.style.display = "none";
		
		try
		{
		    if( window.pageBoxFadeOutComplete != null )
		        window.pageBoxFadeOutComplete();
		}
		catch( e ) {}
	}
}




/// Overlay class ////////////////////////////////////////////////

/**
 * Overlay class constructor
 * 
 * @param {Object} options - 
 * 							{String} content_xml - xml that will be inserted as content (DEFAULT: '')
 * 							{Mixed} insert_blocker_into - el or id of el to insert blocker into (DEFAULT: body el)
 * 							{Mixed} insert_el_into - el or id of el to insert content el into (DEFAULT: same as blocker insert)
 * 							{Mixed} obscure - el or id of el that is to be obscured (DEFAULT: same as blocker insert)
 * 							{String} blocker_class - css class for the blocker (DEFAULT: '')
 * 							{Function} before_show - callback function executed before every show (DEFAULT: empty function)
 * 							{Function} after_show - callback function executed after every show (DEFAULT: empty function)
 * 							{Function} before_hide - callback function executed before every hide (DEFAULT: empty function)
 * 							{Function} after_hide - callback function executed after every hide (DEFAULT: empty function)
 * 							{Integer} duratio_in - duration of fade in in milliseconds (DEFAULT: 2000)
 * 							{Integer} duration_out - duration of fade out in milliseconds (DEFAULT: 2000)
 * 							{Integer} content_duration - duration of fade of content in milliseconds (DEFAULT: 500)
 * 							{Integer} blocker_opacity - opacity of shown blocker (DEFAULT: whatever is set in css - if nothing is set in css then 1)
 * 							{Boolean} center - whether should be centered in the screen (DEFAULT: false)
 */

var Overlay = function(options){
	// set / overwrie default properties based on passed options...
	this.options = options || {};
	this.id = 'Overlay_' + Math.round( new Date().valueOf() * Math.random()  );
	this.content_xml = this.options.content_xml || '';
	this.insert_blocker_into =  $(this.options.insert_blocker_into) || $('body');
	this.insert_el_into =  $(this.options.insert_el_into) || this.insert_blocker_into;
	this.obscure = $(this.options.obscure) || this.insert_blocker_into;
	this.blocker_class = this.options.blocker_class || {};
	this.beforeShow = this.options.before_show || function(){};
	this.afterShow = this.options.after_show || function(){};
	this.beforeHide = this.options.before_hide || function(){};
	this.afterHide = this.options.after_hide || function(){};
	this.duration_in = this.options.duration_in || 2000;
	this.duration_out = this.options.duration_out || 2000;
	this.content_duration = this.options.content_duration || 500;
	this.center = this.options.center || false;
	
	this.createEl();
	this.createBlocker();
	
	// get this after the build as it may have been assigned css opacity via the blocker css class
	this.blocker_opacity =  this.options.blocker_opacity || this.blocker.css('opacity');
}

Overlay.prototype.createEl = function(){
	// just for now only using placeholder divs already present in markup so make content el the actual insert_el_into
	this.el = this.insert_el_into;
	/*this.el = $(document.createElement('div'));
	 this.el.attr('id' , this.id);*/
	this.el.html(this.content_xml);
}

Overlay.prototype.setContent = function(xml) {
	this.content_xml = xml;
	this.el.html(xml);
}

Overlay.prototype.createBlocker = function(){	
	this.blocker = $(document.createElement('div'));
	this.blocker.attr('id' , this.id + '_Blocker');
	this.blocker.addClass(this.blocker_class);
	// must be positioned and displayed block so can get work out offsets for repositioning - set to invisible so doesnt flicker while doing this
	this.blocker.css({
		display: 'block',
		visibility: 'hidden',
		zIndex: 10002,
		position: 'absolute',
		left: '0',
		top: '0',
		width:'100%',
		height:'100%'
	});
	this.el.css({
		display: 'none',
		zIndex: 10003,
		position: 'absolute',
		top: '0px',
		left: '0px'
	});
	
	// insert them
	this.insert_blocker_into.append(this.blocker);
	//this.insert_el_into.prepend(this.el);
	
	// work out / set the size and position of the blocker...
	this.blocker.height( this.obscure.innerHeight() ).width( this.obscure.innerWidth() );
	var obscure_offset = this.obscure.offset();
	var blocker_offset = this.blocker.offset();
	
	// take into account borders making sure a number is returned
	var t = parseFloat( this.obscure.css('borderTopWidth') );
	var l = parseFloat( this.obscure.css('borderLeftWidth') );
	var top_border = ( isNaN(t) ) ? 0 : t;
	var left_border = ( isNaN(l) ) ? 0 : l;
	
	// restore visibilty and display it none now that measurements have taken place, as well as altering positioning
	this.blocker.css({
		display: 'none',
		visibility: 'visible',
		left: ( 0 - (blocker_offset.left - obscure_offset.left - left_border) ) + 'px',
		top:  ( 0 - (blocker_offset.top - obscure_offset.top - top_border) ) + 'px'
	});
}

Overlay.prototype.show = function(extra_before_callback, extra_after_callback, args_obj){
	var self = this;
	var extra_before_callback = extra_before_callback || function(){};
	var extra_after_callback = extra_after_callback || function(){};
	var args_obj = args_obj || {};
	this.blocker.css('display', 'block');
	this.beforeShow(args_obj);
	extra_before_callback.call(self, args_obj);
	this.blocker.stop();
	this.blocker.css('opacity', 0);
	this.blocker.animate({ 
        	opacity: this.blocker_opacity
      	}, 
		this.duration_in, 
		'linear', 
		function(){
			self.showEl();
			self.afterShow(args_obj);
			extra_after_callback.call(self, args_obj);
		}
	);
}

Overlay.prototype.hide = function(extra_before_callback, extra_after_callback, args_obj){
	var self = this;
	var extra_before_callback = extra_before_callback || function(){};
	var extra_after_callback = extra_after_callback || function(){};
	var args_obj = args_obj || {};
	this.beforeHide(args_obj);
	extra_before_callback.call(self, args_obj);
	this.el.fadeOut(this.content_duration);
	this.blocker.animate({ 
        	opacity: 0
      	}, 
		this.duration_out, 
		'linear',
		function(){
			// display it none to allow to click beneath it again
			self.blocker.css('display', 'none');
			self.afterHide( args_obj);
			extra_after_callback.call(self, args_obj);
		}
	);
}

Overlay.prototype.showEl = function(){
	if(this.center) this.centerToScreen();
	this.el.css('display', 'block');
	this.el.fadeIn(this.content_duration);
}

Overlay.prototype.centerToScreen = function(){
	var win_h = $(window).height();
	var win_scroll = $(window).scrollTop();
	var el_h = this.el.height();
	var blocked_y = this.blocker.offset().top;
	this.el.css('top', ( win_scroll + ( (win_h / 2) - (el_h / 2) ) - blocked_y) + 'px' );
}
	
//container for storing overlay instances
var overlays = {};

/// end Overlay class ////////////////////////////////////////////




function set_tandcsoverlay(content_xml){
	hide_waiting();
	// overlay will be accessible as a property of global overlays object via this name
	var name = 'tandcsoverlay';
	// expand the size of the scontainer to avoid overlaps with dialog box
	$('body').addClass('tandcsFormShown');
	
	// callback for executing before every hide to perform extra functionality...
	var tandcs_before_hide = function(args_obj){
		var args_obj = args_obj || {};
		// call function on T&C's overlay
		CliTandCsLoginCheckAcceptance(args_obj);
	}
	
	// if not a child of #scontainer then this is on a page with a full page overlay already - so lets remove background color on this extra overlay
	var tandcs_before_show = function(){
		if (!this.blocker.parents('#scontainer').length) {
			this.content_duration = 1000;
			this.blocker.css('backgroundColor', 'transparent');
		}
	}

	var tandcs_after_show = function() {
		// the following calls a method defined in the T&Cs template
		try {
			window.applyTandCsSIFR();
		} catch(e) {}
	}

	var tandcs_after_hide = function(){
		$('body').removeClass('tandcsFormShown');	// remove extra height adjustment for scontainer
	}

	// make the overlay if doesnt already exist, then show it...
	var options = {
		content_xml: content_xml,
		insert_blocker_into: '#login',
		insert_el_into: '#tandcsoverlay',
		obscure: '#scontainer',
		blocker_class: 'grey_blocker',
		before_show: tandcs_before_show,
		after_show: tandcs_after_show,
		before_hide: tandcs_before_hide,
		after_hide: tandcs_after_hide,
		duration_in: 750,
		duration_out: 1000,
		content_duration: null,
		blocker_opacity: null,
		center: false
	};
	window.overlays[name] = new Overlay( options );	
	window.overlays[name].show();
}




function set_tandcsregoverlay(content_xml){
	hide_waiting();
	// overlay will be accessible as a property of global overlays object via this name
	var name = 'tandcsregoverlay';
	
	
	function show_selects_ie6(){
		if(!window.XMLHttpRequest) $('#overlayContent select').css('visibility', 'visible');
	}
	
	function hide_selects_ie6(){
		if(!window.XMLHttpRequest) $('#overlayContent select').css('visibility', 'hidden');
	}

	var tandcs_after_show = function() {
		// the following calls a method defined in the T&Cs template
		try {
			window.applyTandCsSIFR();
		} catch(e) {}
	}
	
	// make the overlay if doesnt already exist, then show it...
	var options = {
		content_xml: content_xml,
		insert_blocker_into: '#overlayContent',
		insert_el_into: '#tandcsregoverlay',
		obscure: '#scontainer',
		blocker_class: 'grey_blocker',
		before_show: hide_selects_ie6,
		after_show: tandcs_after_show,
		before_hide: show_selects_ie6,
		after_hide: null,
		duration_in: 750,
		duration_out: 1000,
		content_duration: null,
		blocker_opacity: 0.8,
		center: true
	};
	if (window.overlays[name] == undefined) {
		window.overlays[name] = new Overlay( options );
	} else {
		window.overlays[name].setContent(content_xml);
	}
	window.overlays[name].show();
}



function set_vouchersoverlay(content_xml){
	hide_waiting();
	// overlay will be accessible as a property of global overlays object via this name
	var name = 'vouchersoverlay';
	
	
	function show_selects_ie6(){
		if(!window.XMLHttpRequest) $('#overlayContent select').css('visibility', 'visible');
	}
	
	function hide_selects_ie6(){
		if(!window.XMLHttpRequest) $('#overlayContent select').css('visibility', 'hidden');
	}

	// make the overlay if doesnt already exist, then show it...
	var options = {
		content_xml: content_xml,
		insert_blocker_into: '#overlayContent',
		insert_el_into: '#vouchersoverlay',
		obscure: '#scontainer',
		blocker_class: 'white_blocker',
		before_show: hide_selects_ie6,
		before_hide: show_selects_ie6,
		after_hide: null,
		duration_in: 750,
		duration_out: 1000,
		content_duration: null,
		blocker_opacity: 0.8,
		center: true
	};
	if (window.overlays[name] == undefined) {
		window.overlays[name] = new Overlay( options );
	} else {
		window.overlays[name].setContent(content_xml);
	}
	window.overlays[name].show();
}

function set_devicesoverlay(content_xml){
	hide_waiting();
	// overlay will be accessible as a property of global overlays object via this name
	var name = 'devicesoverlay';
	
	
	function show_selects_ie6(){
		if(!window.XMLHttpRequest) $('#overlayContent select').css('visibility', 'visible');
	}
	
	function hide_selects_ie6(){
		if(!window.XMLHttpRequest) $('#overlayContent select').css('visibility', 'hidden');
	}

	// make the overlay if doesnt already exist, then show it...
	var options = {
		content_xml: content_xml,
		insert_blocker_into: '#overlayContent',
		insert_el_into: '#devicesoverlay',
		obscure: '#scontainer',
		blocker_class: 'white_blocker',
		before_show: hide_selects_ie6,
		before_hide: show_selects_ie6,
		after_hide: null,
		duration_in: 750,
		duration_out: 1000,
		content_duration: null,
		blocker_opacity: 0.8,
		center: true
	};
	if (window.overlays[name] == undefined) {
		window.overlays[name] = new Overlay( options );
	} else {
		window.overlays[name].setContent(content_xml);
	}
	window.overlays[name].show();
}


//API sets dark full screen grey fade and overlay
function set_overlay( contentXml )
{
    var aazoneOverlay = fadeGetAazoneOverlayElement();
	//aazoneOverlay.style.display = "none";	
	aazoneOverlay.innerHTML = contentXml;

    hide_waiting();
    fadeOVerlayContent2_Fadein();
}

///Sub-genre change
function set_content(xhtml)
{
	
	
    document.getElementById('aazone.overlay').style.display = "none";

	fadeout_box();
	fadeout_overlaycontent2();
	
	hide_waiting();
	
	
	
	var box = fadeGetBoxElement();
	if( box != null )
	{
		box.style.display = "none";
	}
	
	var d = document.getElementById('aazone.content')
	d.innerHTML = xhtml;
	
	//scroll back to top
	window.scrollTo(0,0);
}

// public
//fades out grey overlay
function fadeout_overlaycontent2()
{
    clearTimeout( fadeOverlayContent2TimoutHandle );
    //show all select boxes then just hide the ones in the main area
	fadeShowSelectBoxesInIE6();
	fadeHideSelectBoxesInIE6();
	fadeShowOverlaySelectBoxesInIE6(fadeGetAazoneDetailOverlayElement());
    fadeGetAazoneOverlayElement().style.display = "none";
    fadeOverlayContent2_Fadeout_Func( 0.6, fadeGetOverlayContent2Element() );
}

function fadeOVerlayContent2_Fadein()
{
    clearTimeout( fadeOverlayContent2TimoutHandle );
    fadeHideSelectBoxesInIE6(true);

	var divh2 = document.getElementById('scontainer').offsetHeight;
	//padding to bottom of page
	divh2 = divh2 + 50;
	
	fadeGetCanvasWidthAndHeight();
    var winWidth    = _fadeCanvasWidth;
    var winHeight   = _fadeCanvasHeight;

    var overlayContent2 = fadeGetOverlayContent2Element();
    
	overlayContent2.style.display = "block";
	overlayContent2.style.zIndex  = 10002;
	
	
	//psudo-fixed position for ie6
	if (window.ie6) {
		overlayContent2.style.position = 'absolute';
		overlayContent2.style.width = winWidth + 'px';
		overlayContent2.style.height = document.body.clientHeight + 'px';
	}
    	/*
	// safari gets auto margin positioning wrong widthwise - fix it here as altering css may cause problems elsewhere
	if(jQuery.browser.safari){
		var el = document.getElementById('aazone.overlay');
		$(el).css('left', (  0 - ($(el).width()/2) ) + 'px' );
	}*/
	
	// APPLY FIX FOR IE AND SAFARI WHEN IN THE floatingLeftMenu PAGES...
	if ( (jQuery.browser.msie && $('body').hasClass('floatingLeftMenu')) || jQuery.browser.safari  ) {
			if($('.rsdropshadow-overlay').length && jQuery.browser.safari){
				var measure = $('.rsdropshadow-overlay');
				var width = parseInt(measure.css('width'));
			}else{
				var measure = $(document.getElementById('aazone.overlay'));
				var width = measure.width();
			}
			var el = document.getElementById('aazone.overlay');
			$(el).css({left: '50%', marginLeft: (0 - width/2) + 'px'});
	}
	
    //we need to override the hidden selects if they are in the overlay content
    fadeShowOverlaySelectBoxesInIE6(fadeGetAazoneOverlayElement());

	if(overlayContent2.getAttribute("cli-opacity") != null){
		fadeOverlayContent2_Fadein_func( parseFloat(overlayContent2.getAttribute("cli-opacity")), overlayContent2 );
	} else {
		fadeOverlayContent2_Fadein_func( FadeStartOpacity, overlayContent2 );
	}

}

// clears overlay and fades out background
function fadeOverlayContent2_Fadeout_Func( opacity, elementToFade )
{
    if( elementToFade == null )
        return;
    
	if( opacity > FadeOpacityFullyHidden )
	{   
	    opacity = opacity - FadeOpacityIncrement;
	    fadeSetElementOpacity( elementToFade, opacity );

        function r(){  fadeOverlayContent2_Fadeout_Func( opacity, elementToFade ); }
	    fadeOverlayContent2TimoutHandle = setTimeout( r, 50 ); 
	}
	else
	{
	    elementToFade.style.display = "none";
	}
}

function fadeOverlayContent2_Fadein_func( opacityValue, elementToFade )
{
    if( elementToFade == null )
        return;
        
	if( opacityValue < FadeEndOpacity )
	{   
	    opacityValue = opacityValue + FadeOpacityIncrement;
	    fadeSetElementOpacity( elementToFade, opacityValue );
	    
        function r(){ fadeOverlayContent2_Fadein_func( opacityValue, elementToFade ); }
	    fadeOverlayContent2TimoutHandle = setTimeout( r, 1 ); 
	}
	else
	{
        var ctop = fadeWtf2();

	    var overlay = fadeGetAazoneOverlayElement();
        overlay.style.position = "absolute";
		overlay.style.top = ctop + "px";
		overlay.style.display = "block";

	    ///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();
		}
	}
}



// updates global 'toppos'
function fadeWtf1()
{
    var toppos;
    
    // determines how far down the page is scrolled
	if( typeof( window.pageYOffset ) == 'number' )
	{
		toppos=pageYOffset ;
	}
	else if(document.documentElement)
	{
		toppos=document.documentElement.scrollTop;
	}
	else if(document.body)
	{
		if(document.body.scrollTop>0)
		{
			toppos=document.body.scrollTop;
		}
		else
		{
			toppos=document.body.scrollTop+70;
		}
	}
	else
	{
		toppos=0
	}
	// End determines how far down the page is scrolled
	
	var ctop;
	
	if(toppos<50)
	{
		ctop=toppos+35;
	}
	else if(toppos>50 && toppos < 100)
	{
		ctop=toppos;
	}
	else
	{
		ctop=toppos-70;
	}
	
	return ctop;
}

function fadeWtf2()
{
    var toppos;
    
    if( typeof( window.pageYOffset ) == 'number' )
    {
        if(pageYOffset>0)
        {
            toppos=pageYOffset + ((pageYOffset/100)*5)
        }
        else
        {
            toppos=pageYOffset +70;
        }
    }
    else if(document.documentElement)
    {
        if(document.documentElement.scrollTop>0)
        {
            toppos=document.documentElement.scrollTop;
        }
        else
        {
            toppos=document.documentElement.scrollTop+70;
        }
    }
    else if(document.body)
    {
        if(document.body.scrollTop>0)
        {
            toppos=document.body.scrollTop;
        }
        else
        {
            toppos=document.body.scrollTop+70;
        }
    }
    else
    {
        toppos=100
    }
    
	var ctop = toppos + 50;
	return ctop;
}


//function included to un-hide a select box which is in the overlay section - could be integrated into fadeShowSelectBoxesInIE6, but it's too close to release to test this
function fadeShowOverlaySelectBoxesInIE6(overlay)
{
    //show the select boxes for the overlay div passed in as a parameter
    if(!window.XMLHttpRequest)
	{
	    selbox=overlay.getElementsByTagName('select');
	    for(sb=0;sb<selbox.length;sb++)
	    {
	        selbox[sb].style.visibility="visible";
	    }
	}
}

//@param boolean all - whether to hide all select boxes rather than just the ones in main content
function fadeHideSelectBoxesInIE6(all)
{
	var container = (all) ? document : document.getElementById('maincontent');
	
	// Hides select boxes in IE6
	if(!window.XMLHttpRequest)
	{
		selbox=container.getElementsByTagName('select');
	    for(sb=0;sb<selbox.length;sb++)
	    {
	        selbox[sb].style.visibility="hidden";
	    }
	}
}

function fadeShowSelectBoxesInIE6()
{
    if(!window.XMLHttpRequest)
    {
        selbox=document.getElementsByTagName('select');
        for(sb=0;sb<selbox.length;sb++)
        {
            selbox[sb].style.visibility="visible";
        }
    }
}

//--------------------------------------------------------------------------------
// set opacity of an element in cross browser way
//
function fadeSetElementOpacity( element, opacity )
{
	opacity = Math.round(opacity*10)/10;
    element.style.opacity = opacity;
    element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
	element.setAttribute("cli-opacity", opacity);
}