﻿/// <reference path="jquery-1.4.1-vsdoc.js" />
/*	last changed 03/22/2010

	Usage.
	
	1. Html Code:
		
		<table class="toggle-panel" cellpadding="0" cellspacing="0">
		<tr>
			<td class="panel-left" bgcolor="#c3d5fd">
				...
			</td>
			<td class="panel-splitter">&nbsp;</td>
			<td class="panel-right">
				...
			</td>
		</tr>
		</table>
		
	2. JS Code
			
		function OnBeforeToggle(s, e)	// not required
		{
			if (e.hidden)
			{
				xgvGrid.SetWidth(s.GetToggledWidth());	// fix grid width
			}
		}
		
		function OnToggleComplete(s, e)	// not required
		{
			if (e.hidden)
			{
				xgvGrid.SetWidth(s.GetCurrentWidth());	// fix grid width
			}
		}
		
		var togglePanel = new TogglePanelWorker(OnBeforeToggle, OnToggleComplete);
		
	OR
		
		var togglePanel = new TogglePanelWorker(null, null, dxControl);		// works with DevEx controls only
				
*/

function TogglePanelWorker(beforeCallback, afterCallback, dxControl, pageID) {    
    this.Init = function () {
        this.IsInitialising = true;
        jQuery("td.panel-left, td.panel-right").css({ textAlign: 'left' });

        jQuery("td.panel-left")
			.children()
			.wrapAll("<div class='left-panel-container'></div>");
        jQuery(".toggle-button")
			.attr('href', 'javascript:;')
			.click(jQuery.proxy(this, 'Toggle'));

        this.rWidth = jQuery(".toggle-panel td.panel-right").width();

        jQuery(".toggle-panel td.panel-right")
			.css({ overflow: 'hidden' });
        jQuery(".toggle-button img")
			.attr('src', baseUrl + this.IsToggled() ? 'Images/panelClosed.gif' : 'Images/panelOpen.gif');

        try {
            jQuery("div.right-panel-container").css({ width: jQuery(".toggle-panel td.panel-right").width() + 'px' });
        }
        catch (e) { }
        this.cookieID = 'is_rvsq_panel_open';
        if (typeof (pageID) != 'undefined') this.cookieID = pageID;
        this.CheckForCookie();

    }

	this.Toggle = function() 
	{
		if (this.IsToggled()) {
			this.Show(true);
		}
		else {
			this.Hide(true);
		}
	}
	
	this.Show = function(animate)
	{
		var animate = animate || false;
		jQuery.globalcookie(this.cookieID, "true");
		this.OnBefore();
		
		if (animate)
		{
			jQuery("div.left-panel-container").show()
				.animate({ width: '200px' }, 1000, jQuery.proxy(this, 'OnShown'))
				.parent().show().next().show();
		}
		else
		{
			jQuery("div.left-panel-container").show()
				.css({ width: '200px' })
				.parent().show().next().show(); 
			
			this.OnShown();
		}
	}
	
	this.Hide = function(animate)
	{
		var animate = animate || false;
		jQuery.globalcookie(this.cookieID, "false");
		jQuery("table.toggle-panel")
			.height(jQuery("table.toggle-panel").height());

		this.OnBefore();
		
		if (animate)
		{
			jQuery("div.left-panel-container")
				.animate({ width: '0px' }, 1000, jQuery.proxy(this, 'OnHidden'));
		}
		else
		{
			jQuery("div.left-panel-container")
				.css({ width: '0px' }); 
				
			this.OnHidden();
		}
	}
	
	this.CheckForCookie = function ()
	{
		if (jQuery.globalcookie(this.cookieID) == null)
			jQuery.globalcookie(this.cookieID, "true");
			
		if (jQuery.globalcookie(this.cookieID) == "true") {
			this.Show(false);			
        }
        else {
			this.Hide(false);
        }
	}
	
	this.SetCookieIsOpened = function(state, override)
	{
		if (override)
			jQuery.globalcookie(this.cookieID, state);
		else if (jQuery.globalcookie(this.cookieID) == null) 
			jQuery.globalcookie(this.cookieID, state);
	}
	
	this.OnShown = function()
	{
		jQuery(".toggle-button img").attr('src', baseUrl + 'Images/panelOpen.gif');
		try {
			jQuery("div.right-panel-container").css({ width: jQuery(".toggle-panel td.panel-right").width() - 205 + 'px' });
			jQuery("div.right-panel-container").css({ width: jQuery(".toggle-panel td.panel-right").width() + 'px' });
		}
		catch (e){}
		
		this.OnAfter();
	}
	
	this.OnHidden = function()
	{
		jQuery("div.left-panel-container").hide().parent().hide().next().hide();
		jQuery(".toggle-button img").attr('src', baseUrl + 'Images/panelClosed.gif');
		try {
			jQuery("div.right-panel-container").css({ width: jQuery(".toggle-panel td.panel-right").width() + 'px' });
		}
		catch (e){}
		this.OnAfter();
	}

	this.OnAfter = function() {
	    if (typeof (afterCallback) == 'function') {
	        afterCallback(this, { hidden: this.IsToggled() });
	    }

	    if (typeof (dxControl) == 'object') {
	        //if (this.IsToggled()) {
	        //try { dxControl.SetWidth(this.GetCurrentWidth()); } catch (e) { }
                if (this.IsInitialising == false) {
                    try { dxControl.Refresh() } catch (e) { }
                }
	        //}
	    }	
		
	    
	    if (typeof (OnAfterToggle) == "function") {
	        setTimeout(function() {
	            OnAfterToggle();
	        }, 200);
	    }
        this.IsInitialising = false;
	}
	
	this.OnBefore = function()
	{
		if (typeof(beforeCallback) == 'function') {
			beforeCallback(this, { hidden: this.IsToggled() });
		}

		if (typeof (dxControl) == 'object') {
		    //if (this.IsToggled()) {
		        //try { dxControl.SetWidth(this.GetToggledWidth()); } catch (e) { }
		        //try { dxControl.Refresh() } catch (e) { }
		    //}
		}	
	}
	
	this.GetCurrentWidth = function()
	{
		return jQuery("td.panel-right").width();
	}
	
	this.GetToggledWidth = function()
	{
		return this.rWidth;
	}
	
	this.IsToggled = function()
	{
		return jQuery("div.left-panel-container").css('display') == 'none';
	}
	
	jQuery(jQuery.proxy(this, 'Init'));
}


