/*
Sony Style Header links navigation and Global message
AUTHOR: Jonathan Cheung
===================================================================================================================================================================
// !  * Header links module.
		This module stores the functions used to make the header link dropdown work.

// ===================================================================================================================================================================
*/
var HeaderUtils = {
	init:function(){
		// Fixing MQC 1487 where global  text overlaps when the page is loading.
		if($('ssGlobalPromoList') && $('ssGlobalPromoList').hasClassName("hidden")){
		$('ssGlobalPromoList').removeClassName("hidden");
		}
		if ($('ssGlobalPromoSection')){
			$('ssGlobalPromoSection').style.display = 'block';
		}
		/* The header link functions */
	 	$$('.topHeaderSection .hasDropContent a').each(function(element){

			//Add the click function to the menu header links
			Event.observe(element, "click", function(e){
				var element = Event.element(e).parentNode; 	//stores the div element
				var theList = element.next(); 				//stores the div/UL list element where the menu links are contained


				/*  turn off all header links first */
				$$('.topHeaderDropdownContent').each(function(e){
					e.removeClassName("hasDropContent");
				})

				// We turn off all the buttons
				$$('.hasDropContent').each(function(e){
					e.removeClassName("onState");
				})

				// Then we turn on the list we want
				theList.toggleClassName("hasDropContent");
				// Then we turn on the borders around the button
				element.addClassName("hasDropContent");
				element.addClassName("onState");

				//Event.stop will stop the browser from going through the href='#' which results in a jump of the page
				Event.stop(e);
			});


			// ========================================================================================================
			// ! Next we setup the mouseout event to hide the menu content when user roll their mouses off the boxes.
			// ========================================================================================================
	 		var theContainer = $(element.parentNode.parentNode);
	 		var theLinkDiv = $(element.parentNode)
	 		var theListDiv = $(element.parentNode.next())


	 		// If the container exists we add the mouseout event.
		 		Event.observe(theContainer, "mouseout", function(e){


		 			//First check to see if the mouse is outside of the div
					if(Position.within(theLinkDiv, Event.pointerX(e), Event.pointerY(e))  == false
						&& Position.within(theListDiv, Event.pointerX(e), Event.pointerY(e)) == false){

						//Now we remove the onstate on the container content.
						Element.select(theContainer, " .topHeaderDropdownContent").each(function(element){
								element.removeClassName("hasDropContent");
						});
						Element.select(theContainer, " .hasDropContent").each(function(element){
								element.removeClassName("onState");
						});
					}

		 		});

	 	});
 	},


// ===================
// ! Other Functions
// ===================

// ==================================================================================
// ! Checks to see if a certain dom element is within the provided X, Y coordinates
// ==================================================================================

 	within: function(element, x, y) {
    if (this.includeScrollOffsets)
      return this.withinIncludingScrolloffsets(element, x, y);
    this.xcomp = x;
    this.ycomp = y;
    this.offset = Element.cumulativeOffset(element);

    return (y >= this.offset[1] &&
            y <=  this.offset[1] + element.offsetHeight &&
            x >= this.offset[0] &&
            x <=  this.offset[0] + element.offsetWidth);
  },


 // ==================================
// ! Start Functions for Global ticket
// ===================================
	//static variables
	globalMessagesArray: new Array(),
	globalMessageActive: 0, //Num from 0 to total num - 1
	globalMessageTimer: null,
	globalMessageTimerInterval: 5000,
	globalMessageIntroTimeout: 3000,
	globalMessageAnimationOffset: 20,
	introTimeOut: null,
	toggleButton: null,

// ==================================
// ! Initializes the Global Message
// ==================================
	initGlobalMessage: function (){
		//If we cannot find a promo, we will end here now!
		if ($$('#ssGlobalPromoList li').length ==0)	return;

		$$('#ssGlobalPromoList li').each(function(element){
			this.globalMessagesArray.push(element)
			element.hide()
			//Effect.SlideUp(element, {duration:0});
		}.bind(this));
		// When mouse over promo, we do this

		Event.observe($('ssGlobalPromoList'), 'mouseover', function(e){
			window.clearInterval(this.globalMessageTimer);
			if (this.introTimeOut) window.clearTimeout(this.introTimeOut)
		}.bind(this))

		Event.observe($('ssGlobalPromoList'), 'mouseout', function(e){
			this.globalMessageTimer = window.setInterval(this.globalTimerFunction.bind(this), this.globalMessageTimerInterval);
		}.bind(this))


		this.toggleButton = $$("#ssGlobalPromoToggle a")[0];

		//Setup those track events
		Event.observe(this.toggleButton, "click", function(e){
			this.toggleButtonClicked("clicked");
		}.bind(this))

		this.showCurrent();
		this.globalMessageTimer = window.setInterval(this.globalTimerFunction.bind(this), this.globalMessageTimerInterval)

		//We hide this in the introduction
		// JC: Aug 3, 2009 - We need to comment the following line per Dan's request to keep the promo open.
		//this.introTimeOut = window.setTimeout(this.toggleButtonClicked.bind(this), this.globalMessageIntroTimeout)
	},

// ======================================================================================================================
// ! Function to show the whole offer container. If it is clicked by mouse event, we pass in "clicked" as the parameter
// ======================================================================================================================
	toggleButtonClicked: function(clicked){

		//Make sure an offer is shown
		window.clearInterval(this.globalMessageTimer);
		this.globalMessageTimer = window.setInterval(this.globalTimerFunction.bind(this), this.globalMessageTimerInterval);
		this.showCurrent();

		var element = this.toggleButton;
		element.parentNode.toggleClassName("onState");
		//Hide the list
		if (clicked != "clicked"){
			//This would be the intro animation
			new Effect.Move(element.parentNode.next(), {x:this.globalMessageAnimationOffset, duraion: 0.2});
			new Effect.Fade(element.parentNode.next(), {duration: 0.2});
		}else{
			if (element.parentNode.next().style.display == "none"){
				new Effect.Appear(element.parentNode.next(), {duration: 0.2});
				new Effect.Move(element.parentNode.next(), {x:-this.globalMessageAnimationOffset, duration: 0.2});
			}else{
				new Effect.Fade(element.parentNode.next(), {duration: 0.2});
				new Effect.Move(element.parentNode.next(), {x:this.globalMessageAnimationOffset, duration: 0.2});
			}
		}
	},
// =================================================================================================
// ! Advances the global message to the next one. If it is the last one, it goes back to the first
// =================================================================================================
	globalMessageAdvance: function (){
		this.globalMessageActive++;
		if (this.globalMessagesArray.length <= this.globalMessageActive)
			this.globalMessageActive = 0;
	},
// ===========================================================
// ! Function is called when the timer /setInterval executes
// ===========================================================
	globalTimerFunction:function(){
		//Hide banner
		Effect.Fade(this.globalMessagesArray[this.globalMessageActive],
						{	duration: 1,
							afterFinish:	function(){
												//Advance banner
												this.globalMessageAdvance();
												//Show banner
												this.show(this.globalMessagesArray[this.globalMessageActive]);
							}.bind(this)})

	},
// ===================================
// ! Function to set display = block
// ===================================

	show: function(element){
		//element.setStyle({display:"inline-block"});
		Effect.Appear(element,{duration:1})
	},

// ==================================
// ! Function to show current Offer
// ==================================
	showCurrent: function(){
		Effect.Appear(this.globalMessagesArray[this.globalMessageActive], {duration:0});
	},

// ==================================
// ! Function to initialize the login rollover functionality
// ==================================
	loginInit: function(){
			Event.observe($('headerLoginMesssageTab'), 'mouseover', function(evt){
				$$('.toggleLoginSection').each(function(e){
					e.toggleClassName('hidden')
				})
			})
			Event.observe($('headerLoginMesssageTab'), 'mouseout', function(evt){
				$$('.toggleLoginSection').each(function(e){
					e.toggleClassName('hidden')
				})
			})
	},

	// Reset header dropdowns
	resetDropdowns: function(){
		/*  turn off all header links first */
		$$('.topHeaderDropdownContent').each(function(e){
			e.removeClassName("hasDropContent");
		})

		// We turn off all the buttons
		$$('.hasDropContent').each(function(e){
			e.removeClassName("onState");
		})
	}

}