/**
 * Dropdown
 * 
 * This class contains methods associated
 * with the C# class "Dropdown"
 * 
 * @author Patrick Timm, patrick@isharp.dk
 * @version 2009.07.31
 */
function Dropdown(pID)
{
	$('body').parent().unbind('click')
	$('body').parent().bind('click',
		function(e)
		{
			DropdownCloseAll()
		}
	);
			
	this.elmID = pID
	this.elmTopLeft = null
	this.elmTopStretch = null
	this.elmTopRight = null
	this.elmBodyContainer = null
	
	this.isActive = false
	this.isReady = false
	
	this.topDefaultCss = {}
}
 
Dropdown.prototype = function()
{
	/**
	 * Static variable that holds a "link" (HTMLObject) representing
	 * a previously opened Dropdown
	 */
	var previouslyOpened = null
	
	/**
	 * Static variable that holds a "link" (HTMLObject) representing
	 * a previously opened Dropdown that is now in slideUp mode
	 */
	var beingAnimated = null
	
	/**
	 * Static variable that is used to prevent a click event on an
	 * element in a Dropdown from bubbling up to body.click which would
	 * then close the Dropdown
	 */
	var dropdownClicked = false
	
	
	
	
	/**
	 * HTMLSelect onChange callback method.
	 *
	 * @param string The new value to set
	 * @param function A function pointer
	 * @return void
	 */
	function OnChange(newValue, callback)
	{
		callback(newValue)
		this.Toggle()
	}
	
	
	
	
	/**
	 * Dropdown element onClick callback method.
	 *
	 * @param string The value of the item
	 * @param function A function pointer
	 * @return void
	 */
	function OnClickItem(newValue, callback)
	{
		callback(newValue)
		this.Toggle()
	}




	/**
	 * Event handler for the onMouseOver on the "top" elements.
	 *
	 * @param bool Is the mouse over the row?
	 * @return void
	 */	
	function TopHover(isOver)
	{
		// initialise the top elements
		if (this.elmTopLeft == null)
			this.InitElements()
			
		// the hover state
		if (isOver)
		{
			$(this.elmTopLeft).css('background-position', '0px -32px')
			$(this.elmTopStretch).css('background-position', '0px -32px')
			$(this.elmTopRight).css('background-position', '0px -32px')
			$(this.elmTopStretch).css('color', '#fff')
			return
		}
		
		// the normal state
		if (!this.isActive)
		{
			$(this.elmTopLeft).css('background-position', '0px 0px')
			$(this.elmTopStretch).css('background-position', '0px 0px')
			$(this.elmTopRight).css('background-position', '0px 0px')
			$(this.elmTopStretch).css('color', this.topDefaultCss.color)
		}
	}
	
	
	
	
	/**
	 * Toggle the status (open / closed) of the dropdown. This method
	 * also initiates the animation of the dropdown and makes sure
	 * that the color state of the top row is returned to normal.
	 *
	 * @return void
	 */
	function Toggle()
	{
		// set status
		this.isActive = !this.isActive
		
		// make sure the dropdown is ready
		if (!this.isReady)
			this.InitData()
		
		var elm = $(this.elmBodyContainer)
		
		if (Dropdown.previouslyOpened != undefined && Dropdown.previouslyOpened != this)
			Dropdown.previouslyOpened.Toggle()

		// open or close
		if (elm.is(':hidden'))
		{
			// make sure dropdown will be on top of everything else (including other dropdowns)
			$(this.elmContainer).css('z-index', '666')
			Dropdown.previouslyOpened = this
			elm.slideDown(300)
			
			// prevent body.click from running toggle
			Dropdown.dropdownClicked = true
		}
		else
		{
			// move elm to beingAnimated (this fixes queing problems with previouslyOpened) and hide it behind other dropdowns
			Dropdown.beingAnimated = Dropdown.previouslyOpened
			$(Dropdown.beingAnimated.elmContainer).css('z-index','665')
			Dropdown.previouslyOpened = null
			
			// we need to put the z-index etc. in a callback, since the slideUp
			// function just initiates the animation and returns... this means
			// that the z-index would be called before the element was properly hidden
			elm.slideUp(230,
				function()
				{
					// set z-index to something "normal"
					$(Dropdown.beingAnimated.elmContainer).css('z-index','10')
					
					// let the rest of the system know that the dropdown is now closed
					Dropdown.beingAnimated = null
				}
			)
		}
			
		// reset color of top
		this.TopHover(this.isActive)
	}
	
	
	
	
	/**
	 * Initialises the elements of the dropdown. This basically means that pointers
	 * to the elements that make up the dropdown are set using
	 * document.getElementById(...)
	 *
	 * @return void
	 */
	function InitElements()
	{
		// top elements
		this.elmTopLeft = document.getElementById(this.elmID + '_ddTopLeft')
		this.elmTopStretch = document.getElementById(this.elmID + '_ddTopStretch')
		this.elmTopRight = document.getElementById(this.elmID + '_ddTopRight')
		
		this.topDefaultCss.color = $(this.elmTopStretch).css('color')
		
		// body elements
		this.elmContainer = document.getElementById(this.elmID + '_ddContainer')
		this.elmBodyContainer = document.getElementById(this.elmID + '_ddBodyContainer')
		this.elmBody = document.getElementById(this.elmID + '_ddBody')
	}
	
	
	
	
	/**
	 * Prepare the body of the dropdown. Attach the proper classes etc.
	 *
	 * @return void
	 */	
	function InitData()
	{
		var thecon = $(this.elmBodyContainer)
		thecon.css('visibility', 'hidden')
		thecon.show()
		
		// initialise scrollpane
		// overriding showArrows for pane3
		// $(this.elmBody).jScrollPane({scrollbarWidth:14, scrollbarMargin:10, showArrows:true, dragMinHeight:1});

		// hide dropdown content
		thecon.hide()
		thecon.css('visibility', 'visible')
		
		// make sure the Dropdown is not closed by body.click
		// when the user clicks on the Dropdown itself
		// *****************************************************************
		$(this.elmBody).bind('click',
				function()
				{
					Dropdown.dropdownClicked = true
				}
			)

		$('.jScrollPaneContainer').bind('click',
				function()
				{
					Dropdown.dropdownClicked = true
				}
			)
		// *****************************************************************

		
		
		// initialise dropdown
		$('#'+this.elmBody.id+' td').each(
			function(i)
			{
				// normal item
				if ($(this).attr('class') == '')
				{
					$(this).addClass('ddItem')
				}
			}
		)
	
		// drag top/bottom are not visible in other browsers than IE
		// if they do not have content... hence add a whitespace and destroy it's
		// influence on the height
		$('.jScrollPaneDragTop').addClass('.killText').html(' ')
		$('.jScrollPaneDragBottom').addClass('.killText').html(' ')
		
		this.isReady = true
	}
	
	
	
	
	return {
		OnChange:OnChange,
		OnClickItem:OnClickItem,
		TopHover:TopHover,
		InitElements:InitElements,
		InitData:InitData,
		Toggle:Toggle
	}
}();




/**
 * Body.onClick event handler that closes any open
 * Dropdown
 */
function DropdownCloseAll()
{
	// no need to do anything if nothing is open
	if (Dropdown.previouslyOpened != undefined)
	{
		if (!Dropdown.dropdownClicked)
			Dropdown.previouslyOpened.Toggle()
	}
	
	// reset the flag
	Dropdown.dropdownClicked = false
}