Event.observe(window, "load", OnDocumentLoad);

function OnDocumentLoad ( evObj )
{
	new NavigationSlideOutExtender();
	
	var scrollables = $$(".scrollContainer");
	for ( var i = 0; i < scrollables.length; ++i )
	{
		new ScrollableContent(scrollables[i]);
	}
}

var NavigationSlideOutExtender = Class.create();
NavigationSlideOutExtender.prototype = 
{
	initialize : function ()
	{
		this.activeSubNavList = null;
		this.hideTimeout = null;
		
		this.NavElementOver = this.OnNavElementOver.bindAsEventListener(this);
		this.NavElementOut = this.OnNavElementOut.bindAsEventListener(this);
		this.SubNavListOver = this.OnSubNavListOver.bindAsEventListener(this);
		this.SubNavListOut = this.OnSubNavListOut.bindAsEventListener(this);
		this.DocumentClick = this.OnDocumentClick.bindAsEventListener(this);
		
		
		
		var nav2nds = Element.getElementsBySelector($("Navigation"), "li ul li a");
		for ( var i = 0; i < nav2nds.length; ++i )
		{
			var subNavList = $(nav2nds[i]).up("li").down("ul");
			if ( subNavList )
			{
				subNavList.setStyle({display: "none"});
		
				Event.observe(nav2nds[i], "mouseover", this.NavElementOver);
				Event.observe(nav2nds[i], "mouseout", this.NavElementOut);
				Event.observe(subNavList, "mouseover", this.SubNavListOver);
				Event.observe(subNavList, "mouseout", this.SubNavListOut);
			}
		}
	},
	
	OnNavElementOver : function (evObj)
	{
		if ( this.activeSubNavList )
			this.activeSubNavList.setStyle({display: "none"});
		
		this.activeSubNavList = Event.element(evObj).up("li").down("ul");
		
		if ( this.activeSubNavList )
			this.activeSubNavList.setStyle({display: "block"});
	},
	
	OnNavElementOut : function (evObj)
	{
		this.HideWithTimeout ();
		Event.observe(document, "click", this.DocumentClick);
	},
	
	OnSubNavListOver : function (evObj)
	{
		if ( this.hideTimeout )
			this.hideTimeout.stop();

		Event.stopObserving(document, "click", this.DocumentClick);
	},
	
	OnSubNavListOut : function (evObj)
	{
		this.HideWithTimeout ();
		Event.observe(document, "click", this.DocumentClick);
	},
	
	OnDocumentClick : function (evObj)
	{
		if ( this.hideTimeout )
			this.hideTimeout.stop();

		this.Hide();
	},
	
	HideWithTimeout : function ()
	{
		if ( this.hideTimeout )
			this.hideTimeout.stop();
			
		this.hideTimeout = new PeriodicalExecuter
		(
			function(evObj)
			{  
				this.Hide();
				evObj.stop(); 
			}.bind(this)
		, 1);
	},
	
	Hide : function ()
	{
		if ( this.activeSubNavList )
			this.activeSubNavList.setStyle({display: "none"});
			
		Event.stopObserving(document, "click", this.DocumentClick);
	}
}

var ScrollableContent = Class.create();
ScrollableContent.prototype = 
{
	initialize : function (scrollContainer)
	{
		this.Slide = this.OnSlide.bindAsEventListener(this);
		this.UpClicked = this.OnUpClicked.bindAsEventListener(this);
		this.DownClicked = this.OnDownClicked.bindAsEventListener(this);
		this.MouseUp = this.OnMouseUp.bindAsEventListener(this);
		
		this.scrollRepeater = null;
		 
		this.scrollContainer = scrollContainer;
		this.scrollContent = scrollContainer.down(".scrollContent");
		this.scrollbar = this.scrollContainer.down(".scrollbar");
		this.up = this.scrollbar.down(".up");
		this.down = this.scrollbar.down(".down");
		this.track = this.scrollbar.down(".track");
		this.bar = this.track.down(".bar");
		
		var trackHeight = this.scrollContainer.getHeight() - this.down.getHeight() - this.up.getHeight() - Math.floor(this.bar.getHeight()/2);
		
		this.scrollbar.setStyle({height: this.scrollContainer.getHeight() + "px"});
		this.track.setStyle({height: trackHeight + "px"});
				
		this.maxScrollFactor = 1-(this.scrollContainer.getHeight()/this.scrollContent.getHeight());
    this.sliderObj = new Control.Slider(this.bar, this.track, 
    	{
    		axis: "vertical",
    		range: $R(0, this.maxScrollFactor),
	      onSlide: this.Slide,
	      onChange: this.Slide
	    });
	    
    Event.observe(this.up, "mousedown", this.UpClicked);
    Event.observe(this.down, "mousedown", this.DownClicked);
    
    if ( this.scrollContainer.getHeight() >= this.scrollContent.getHeight() )
    {
    	this.scrollbar.setStyle({display: "none"});
    	this.scrollContent.setStyle({paddingRight: "0px"});
    }
	},
	
	OnSlide : function (evObj)
	{
		if ( evObj && evObj > 0 && evObj <= this.maxScrollFactor)
			this.scrollContent.setStyle({top: (-this.scrollContent.getHeight()*evObj) + "px"});
	},
	
	OnDownClicked : function (evObj)
	{
		this.sliderObj.setValueBy(0.03);
		this.scrollRepeater = new PeriodicalExecuter(
			function (peObj)
			{
				this.sliderObj.setValueBy(0.01);
			}.bind(this), 0.05);
		Event.observe(this.down, "mouseup", this.MouseUp);
		Event.observe(this.down, "mouseout", this.MouseUp);
	},
	
	OnUpClicked : function (evObj)
	{
		this.sliderObj.setValueBy(-0.03);
		this.scrollRepeater = new PeriodicalExecuter(
			function (peObj)
			{
				this.sliderObj.setValueBy(-0.01);
			}.bind(this), 0.05);
		Event.observe(this.up, "mouseup", this.MouseUp);
		Event.observe(this.up, "mouseout", this.MouseUp);
	},
	
	OnMouseUp : function (evObj)
	{
		Event.stopObserving(this.up, "mouseup", this.MouseUp);
		Event.stopObserving(this.up, "mouseup", this.MouseUp);
		Event.stopObserving(this.down, "mouseout", this.MouseUp);
		Event.stopObserving(this.down, "mouseout", this.MouseUp);
		
		if ( this.scrollRepeater )
			this.scrollRepeater.stop();
			
		this.scrollRepeater = null;
	}
}