//
// Author: J. Odeyer
// Date: 2012/3/08
// Last modif date: 
// version: 1.0.0
//
// This script add javascript functions to have collapsable/extendable sections.
// 
// Dependencies:
// This class relies on jQuery core library and jQuery UI css - it is based on the accordion jQuery UI widget for the css class name
// It extends jQuery object with a collapsablesection plugin function
//
// How to?:
// Use by default a hml markup template as below
// <div>
// 	<h3><a href="#">section header</a></h3>
//	<div>section content</div>
// </div>



;(function($) {

    $.collapsablesection = {
        defaults: {
            _isExpanded: true
			, isCollapsable: true
			, showCollapseIcon: true
            , collapsedIconClass: 'ui-icon-triangle-1-e'
            , expandedIconClass: 'ui-icon-triangle-1-s'
            , helperSelector: '>h3:first'
			, persistJsObject: false
			, persistJsObject_hiddenFieldSelector: '>input[type="hidden"]:first'
        }
    };

    $.fn.extend({
        collapsablesection: function(settings) {
            if (typeof settings == "string") {
				return this.each(function() {
					switch (settings) {
						case "collapse":
							//call the collapse function()
							collapse(this);
							break;
						case "expand":
							//call the expand function()
							expand(this);
							break;
						case "isExpanded":
							//call the expand function()
							return isExpanded(this);
							break;
						default:
							return alert('this method is not supported');
					}
				});
            }
            //merge default settings with settings passed and defined
            settings = $.extend(true, {}, $.collapsablesection.defaults, settings);
			
            return this.each(function() {
				//make a copy of the settings object
				var objsettings = eval("(" + JSON.stringify(settings)+ ")");
				
				if(objsettings.persistJsObject 
				&& objsettings.persistJsObject_hiddenFieldSelector != null 
				&& objsettings.persistJsObject_hiddenFieldSelector.length > 0) {
					//gets the hidden field used to persist object settings
					var currentState_hiddenField = $(this).find(objsettings.persistJsObject_hiddenFieldSelector).first();
						
					if(currentState_hiddenField.length > 0 && currentState_hiddenField.val().length > 0) {
						objsettings = $.extend(true, {}, objsettings, eval("(" + currentState_hiddenField.val() + ")"));
					}
				}
				
                //associate settings data to the DOM element
                $.data(this, 'collapsablesection', objsettings);
				
				//set element variable with this auto-reference
				var element = this;
				
				//add css class to the the main element
				$(this)
				.addClass('ui-accordion')
				.addClass('ui-widget')
				.addClass('ui-helper-reset')
				.addClass('ui-accordion-icons')
				;
				
				//gets the helper (title bar) (h3 DOM element)
				var helper = $(this).find(objsettings.helperSelector);
				
				//add css class / events to the helper, div container
				helper
				.addClass('ui-accordion-header')
				.addClass('ui-helper-reset')
				.addClass('ui-state-default')
				.addClass('ui-state-active')
				.addClass('ui-corner-all')
				.hover(
					function() {
						$(this).addClass('ui-state-hover');
					},
					function() {
						$(this).removeClass('ui-state-hover');
					}
				)
				.click(function() {
					var currentSettings = $(element).data('collapsablesection');
					if(currentSettings.isCollapsable) {
						//collapse if _isExpanded setting property = true, otherwise expand it
						collapseExpand(element, !currentSettings._isExpanded);
					}
				})
				.next()
				.addClass('ui-accordion-content')
				.addClass('ui-helper-reset')
				.addClass('ui-widget-content')
				.addClass('ui-corner-bottom')
				;
				
				//add collapsable / expandable icon
				if(objsettings.showCollapseIcon) {
					helper
					.prepend(
						$('<span></span>')
						.addClass('ui-icon')
						.addClass(objsettings.expandedIconClass)
					)
					;
				}
				
				//collapse or expand the element depending on the value of _isExpanded
				collapseExpand(element, objsettings._isExpanded);
            });
        }
    });

	//retrieve settings of the DOM element
    function settings(element) {
        return $.data(element, 'collapsablesection');
    }
	
	function saveCurrentState(element) {
		//retrieve the current settings for that DOM element
        var currentSettings = settings(element);
		
		if(currentSettings.persistJsObject 
			&& currentSettings.persistJsObject_hiddenFieldSelector != null 
			&& currentSettings.persistJsObject_hiddenFieldSelector.length > 0) 
		{
			//serialize the schedulerInfo object to a JSON string
			var jsonString = JSON.stringify(currentSettings);
			
			//update hidden field with this value
			$(element)
			.find(settings.persistJsObject_hiddenFieldSelector)
			.val(jsonString)
			;
		}
	}

	//collaspse/expand DOM element depending on the value of expand (true: expand, false: collapse)
    function collapseExpand(element, expand) {
		//retrieve the current settings for that DOM element
        var currentSettings = settings(element);
		
		//determines the css class
        var collapsedExplandedIconClass = currentSettings.collapsedIconClass;
        if (expand) {
            collapsedExplandedIconClass = currentSettings.expandedIconClass;
        }
        
		//gets the helper (title bar) (h3 DOM element)
		var helper = 
			$(element)
			.find(currentSettings.helperSelector)
			.first()
			;
		
		//change expanded/collpased icon		
		if(currentSettings.showCollapseIcon) {
			helper
			.find('>span.ui-icon:first')
			.removeClass(currentSettings.collapsedIconClass + ' ' + currentSettings.expandedIconClass)
			.addClass(collapsedExplandedIconClass)
			;
		}
		
		//collapse/expand the div element
        if (expand) {
			//change corner css class
			helper
			.removeClass('ui-corner-all')
			.addClass('ui-corner-top')
			;
			//show content div element
            helper
			.next()
			.show()
			;
        } else {
			//hide content div element
            helper
			.next()
			.hide()
			;
			//change corner css class
			helper
			.removeClass('ui-corner-top')
			.addClass('ui-corner-all')
			;
        }
		
		//update _isExpanded setting property
		currentSettings._isExpanded = expand;
		
		//update the element's data object
		$(element).data('collapsablesection', currentSettings)
		
		//save current state
		saveCurrentState(element);
    }

	//collapse DOM element
    function collapse(element) {
        return collapseExpand(element, false);
    }

	//expand DOM element
    function expand(element) {
        return collapseExpand(element, true);
    }
	
	//get value of _isExpanded
    function isExpanded(element) {
        //retrieve the current settings for that DOM element
        var currentSettings = settings(element);
		
		//return _isExpanded setting property 
		return currentSettings._isExpanded;
    }
})(jQuery);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();