/**
 * @author Alex Lapinski
 * @date 8-13-2008
 */

/*************************************************
 *	Page JavaScript Object (Page Variables)		 *
 *************************************************/
var TrendsMapChartPageProperties = new Class({

	initialize: function(){
		this.selectedDemoIndex = 0;
		this.pageFirstLanding = true;
		this.isDemoOpen = true;
		this.isPoliciesOpen = true;
	},
	Implements: Events,
	
	setSelectedDemoIndex: function(value){
		this.selectedDemoIndex = value;
	},
	
	setPageFirstLanding: function(value) {
		this.pageFirstLanding = value;
	},
	
	setIsDemoOpen: function(value) {
		this.isDemoOpen = value;
	},
	
	setIsPoliciesOpen: function(value) {
		this.isPoliciesOpen = value;
	},

	getSelectedDemoIndex: function() {
		return this.selectedDemoIndex;
	},
	
	getPageFirstLanding: function() {
		return this.pageFirstLanding;
	},
	
	getIsDemoOpen: function() {
		return this.isDemoOpen;
	},
	getIsPoliciesOpen: function() {
		return this.isPoliciesOpen;
	},
	
	startDemoTransiton: function() {
		this.fireEvent("startDemoTransition");
	},
	startPoliciesTransiton: function() {
		this.fireEvent("startPoliciesTransition");
	}
});


/*************************************************
 *	Page-Wide Constants							 *
 *************************************************/
var page = new TrendsMapChartPageProperties();

var DemoEffectOptions = {
	UseAccordianOpacity: false,
	InnerWrapSlideDuration: 350 };
	
var DEMO_OUTER_CNTNR_SELECTOR = ".demographics";
var DEMO_INNER_CNTNR_SELECTOR = ".demographics-inner";
var DEMO_INNER_WRAPPER_CNTNR_SELECTOR = ".demographics-inner-wrap";
var DEMO_TOGGLE_HEADER_SELECTOR = "#h3-demographics";
var DEMO_TOGGLE_BTN_SELECTOR = ".toggle_demographics_menu";
var DEMO_GROUP_TOGGLE_BTNS_SELECTOR = "dt.toggle_button";
var DEMO_GROUP_TOGGLE_BODIES_SELECTOR = "dd.toggle_body";
var DEMO_TOGGLE_HEADER_CLOSED_CSS_CLASS = "closed";

var POL_OUTER_CNTNR_SELECTOR = ".policies";
var POL_INNER_CNTNR_SELECTOR = ".policies-inner";
var POL_INNER_WRAPPER_CNTNR_SELECTOR = ".policies-inner-wrap";
var POL_TOGGLE_HEADER_SELECTOR = "#h3-policies";
var POL_TOGGLE_BTN_SELECTOR = ".toggle_policies_menu";
var TOGGLE_BTN_CLOSED_CSS_CLASS = "closed";
var TOGGLE_POL_WRAPPER_FX_DURATION = "300";
var TOGGLE_POL_SLIDE_ORIENTATION = "horizontal";

// 
// Initialize the Demographics Drawer
//
function InitDemoDrawer(){
	
    var demoOuterCntnr = document.getElement(DEMO_OUTER_CNTNR_SELECTOR);
    var demoInnerCntnr = document.getElement(DEMO_INNER_CNTNR_SELECTOR);
    var demoInnerWrapCntnr = document.getElement(DEMO_INNER_WRAPPER_CNTNR_SELECTOR);
    var demoToggleHeader = document.getElement(DEMO_TOGGLE_HEADER_SELECTOR);
    var demoToggleBtn = document.getElement(DEMO_TOGGLE_BTN_SELECTOR);
	
	if( !$defined(demoOuterCntnr) || !$defined(demoInnerCntnr) || !$defined(demoInnerWrapCntnr) || !$defined(demoToggleHeader) || !$defined(demoToggleBtn) )
		return;
	
    var subSectionBtns = document.getElements(DEMO_GROUP_TOGGLE_BTNS_SELECTOR);
    var subSections = document.getElements(DEMO_GROUP_TOGGLE_BODIES_SELECTOR);
    
    if ($defined(subSectionBtns) && $defined(subSections) && subSectionBtns.length > 0 && subSections.length > 0 && subSectionBtns.length == subSections.length) {
        
        for(var i = 0; i < subSections.length; i++) {
            
            var inputs = subSections[i].getElementsByTagName("input");
            
            for(var j = 0; j < inputs.length; j++) {
                if( inputs[j].getAttribute("type").indexOf("radio") == -1 ) continue;
                if( !inputs[j].checked ) continue;
                else {
                    page.setSelectedDemoIndex(i);
                    page.setPageFirstLanding(false);
                    break;
                }
            }
            
            if( !page.getPageFirstLanding() ) break;
        }
        
        var demoAccordion = new Accordion(subSectionBtns, subSections, {
            opacity: DemoEffectOptions.UseAccordianOpacity,
            show: page.getSelectedDemoIndex()
        });
    }
    
    var divs = demoOuterCntnr.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++) {
        if( divs[i].className.indexOf("bottom") != -1 ) {
            demoOuterCntnr.bottomDiv = divs[i];
            break;
        }
    }
    
    var demoInnerWrapSlide = new Fx.Slide(demoInnerWrapCntnr, {
        duration: DemoEffectOptions.InnerWrapSlideDuration
    });
    
    var innerDemoFx = new Fx.Morph(demoInnerCntnr);
    var openDemoTabFx = new Fx.Morph(demoOuterCntnr);
    var closeDemoTabFx = new Fx.Morph(demoOuterCntnr);

	openDemoTabFx.addEvents({
        "start": function(){
			if( demoOuterCntnr.hidden ) showDemographicsTab();
			innerDemoFx.start("div.demographics-inner-open");
		},
        "complete": function(){
			page.setIsDemoOpen(true);
            demoToggleHeader.removeClass(DEMO_TOGGLE_HEADER_CLOSED_CSS_CLASS);
            demoOuterCntnr.bottomDiv.style.display = "block";
		}
    });
    
    closeDemoTabFx.addEvents({
		"start": function(){
			innerDemoFx.start("div.demographics-inner-closed");
			demoOuterCntnr.bottomDiv.style.display = "none";
		},        
        "complete": function(){
			page.setIsDemoOpen(false);
            demoToggleHeader.addClass(DEMO_TOGGLE_HEADER_CLOSED_CSS_CLASS);
		}
    });
       
    demoToggleBtn.addEvent("click", function(event){
        (new Event(event)).preventDefault();
		page.fireEvent("startDemoTransition");
		
        if (!page.getIsDemoOpen()) { // DemoTab is not open, so open it
        	openDemoTabFx.start("div.demographics-open").chain(function(){
				demoInnerWrapSlide.slideIn().chain(function(){
					demoInnerCntnr.getElement("div").setStyle("height", "auto");
				});
			});
			

        } else { // DemoTab is open, so close it
            demoInnerWrapSlide.slideOut().chain(function(){closeDemoTabFx.start("div.demographics-closed");});
        }
        
    });
    
    if (!page.getPageFirstLanding()) {
    	if( !demoOuterCntnr.hidden ) hideDemographicsTab();
	} 

	var toggleButtonSlideFx = new Fx.Slide(demoToggleHeader,{
		mode: 'horizontal'
	});
	
	// 
	// Add the Event Handler for when the Policies Tab Begins its Transition
	page.addEvent("startPoliciesTransition",function(){
		
		if( !page.getIsPoliciesOpen() ) { // Policies Tab is not Open, but it is about to open

			if( page.getIsDemoOpen() ) { // If the Demo Tab is open, Close it and Hide the Toggle Button
	
				// Order of Graphical Effect:
				//	1.) Slide In (Collapse) the Inner Wrapper of the Demographics Tab
				//	2.) Shift the Demographics Tab to the left (Close it)
				//	3.) Hide the Toggle Button for the Demographics Tab

				demoInnerWrapSlide.slideOut().chain(function(){
					closeDemoTabFx.start("div.demographics-closed").chain(function(){
						toggleButtonSlideFx.slideOut();
					});
				});
			} else { // Otherwise, just hide the Toggle Button
				toggleButtonSlideFx.slideOut();
			}
			
		} else {
			toggleButtonSlideFx.slideIn();
		}
	});
	
    function hideDemographicsTab() {
        demoInnerCntnr.style.marginLeft = "-175px";
        demoInnerCntnr.style.width = "0";
        demoToggleHeader.className += " closed";
        demoOuterCntnr.bottomDiv.style.display = "none";
        demoOuterCntnr.hidden = true;
        page.setIsDemoOpen(false);
    }
    function showDemographicsTab() {
        demoToggleHeader.className = demoToggleHeader.className.replace(/ closed/i,"");
        demoOuterCntnr.hidden = false;
    }
}

// 
// Initialize the Policies Drawer
//
function InitPoliciesDrawer(){
	
    var policiesOuterCntnr = document.getElement(POL_OUTER_CNTNR_SELECTOR);
    var policiesInnerCntnr = document.getElement(POL_INNER_CNTNR_SELECTOR);
    var policiesInnerWrap = document.getElement(POL_INNER_WRAPPER_CNTNR_SELECTOR);
    var policiesToggleHeader = document.getElement(POL_TOGGLE_HEADER_SELECTOR);
    var policiesToggleBtn = document.getElement(POL_TOGGLE_HEADER_SELECTOR);
    
	if( !$defined(policiesOuterCntnr) || !$defined(policiesInnerCntnr) || !$defined(policiesInnerWrap) || !$defined(policiesToggleHeader) || !$defined(policiesToggleBtn) )
		return;
		
    page.setIsPoliciesOpen(false);
	
	var openPoliciesTabFx = new Fx.Morph(policiesOuterCntnr);
    openPoliciesTabFx.addEvent("start",function(){
        if( policiesOuterCntnr.hidden ) showPoliciesTab();
    });
    openPoliciesTabFx.addEvent("complete", function(){
		page.setIsPoliciesOpen(true);
        policiesToggleHeader.removeClass(TOGGLE_BTN_CLOSED_CSS_CLASS);
    });
	
	var closePoliciesTabFx = new Fx.Morph(policiesOuterCntnr);
    closePoliciesTabFx.addEvent("complete", function(){
            page.setIsPoliciesOpen(false);
            policiesToggleHeader.addClass(TOGGLE_BTN_CLOSED_CSS_CLASS);
    });
    
    var openPoliciesWrapperFx = new Fx.Slide(policiesInnerWrap, {duration: parseInt(TOGGLE_POL_WRAPPER_FX_DURATION)});
    var closePoliciesWrapperFx = new Fx.Slide(policiesInnerWrap, {duration: parseInt(TOGGLE_POL_WRAPPER_FX_DURATION)});
	openPoliciesWrapperFx.addEvent("complete",function(){
		policiesInnerCntnr.getElement("div").setStyle("height","auto");
	});
	
	// Hide the Tab (On Page Load)
	if( !policiesOuterCntnr.hidden ) hidePoliciesTab();
    
    policiesToggleBtn.addEvent("click", function(event){
		
		(new Event(event)).preventDefault();
		page.fireEvent("startPoliciesTransition");
		
		// When Policies Tab is closed, open it
        if (!page.getIsPoliciesOpen()) {
        
            openPoliciesTabFx.start("div.policies").chain(function(){openPoliciesWrapperFx.slideIn();});
				                	
    	        
		}// When Policies Tab is open, close it
	    else if (page.getIsPoliciesOpen()) {
			closePoliciesWrapperFx.slideOut().chain(function(){closePoliciesTabFx.start("div.policies-closed");});
		}
	}); // End Click Event Handler
	
	//
	// Set the Event Handler for when the Demographics Tab begins its Transition
	//
	page.addEvent("startDemoTransition",function(){
	
		if( !page.getIsDemoOpen() ) { // The Demographics Tab is not Open, But it is about to be opened
	
			if( page.getIsPoliciesOpen() ) { // Policies Tab is open, so close the Policies tab and hide the Policies Toggle Button

				// Order of Graphical Effect:
				//	1.) Slide In (Collapse) the Inner Wrapper of the Policies Tab
				//	2.) Shift the Policies Tab to the left (Close it)
				//	3.) Hide the Toggle Button for the Policies Tab

				closePoliciesWrapperFx.slideOut().chain(function(){
					closePoliciesTabFx.start(".policies-closed").chain(function(){
						//tglPolTab.slideOut();
					});
				});
			} else { // The Policies tab is closed, so just hide the Toggle Button
				//tglPolTab.slideOut();
			}
		} else { // The Demographics Tab is about to be Collapsed, so show the Toggle Button
			//tglPolTab.slideIn();
		}
	}); // End Start Demo Transition Event Handler
	
	function hidePoliciesTab() {
        policiesInnerWrap.style.marginTop = "-"+policiesInnerWrap.offsetHeight+"px";
        policiesOuterCntnr.style.marginLeft = "-177px";
        policiesToggleHeader.className += " closed";
        policiesInnerWrap.className = policiesInnerWrap.className.replace(/ on-load/i,"");
        policiesOuterCntnr.hidden = true;
        page.setIsPoliciesOpen(false);
    }
    function showPoliciesTab() {
        policiesToggleHeader.className = policiesToggleHeader.className.replace(/ closed/i,"");
        policiesOuterCntnr.hidden = false;
    }
}

//
// Attach the events to the DomReady Event
//
window.addEvent("domready", InitDemoDrawer);
window.addEvent("domready", InitPoliciesDrawer);