/* produces toggle effect for a panel */
WDPRO_LOADER.require("wdprodom");
WDPRO_LOADER.require("accordion");
WDPRO_LOADER.require("event");

WDPRO_LOADER.addCallback(
	function(){		
		YAHOO.util.Event.onDOMReady( togglePanel.init );
	}
);

togglePanel = {
    disabledRollover: false, // a flag to check who opened the panel - mouseover or Panel widget
    init:function(){
        var $D = WDPRO.util.Dom;
        var $E = YAHOO.util.Event;
        
        /* list pages to be used with expanded panel
			Change the way we hook into certain pages post-launch.
		*/		
		var stopToggleToolboxPricingWishes = $D.getElementsByClassName("pricing-wishes", "body");
		var stopToggleToolboxPricingEscape = $D.getElementsByClassName("pricing-escape", "body");
		var stopToggleToolboxPricingCouture = $D.getElementsByClassName("pricing-couture", "body");
        var stopToggleToolboxFAQ = $D.getElementsByClassName("faq", "body");
		 
        if (stopToggleToolboxPricingWishes != '' || stopToggleToolboxPricingEscape != '' || stopToggleToolboxPricingCouture!= '' || stopToggleToolboxFAQ != '') {
			togglePanelOpen.init(); //switch to expanded panel
		return;
	}
	
	
		var containingPanel = $D.getElementsByClassName("containedPanel", "div");
        //var minHeight = 235; //$D.getHeight(resultElements[0]); //<-- getHeight() won't work if initially in "list" view instead of "thumbnail" view
		
	/* listen for the mouseover event */
        var that = this;
        $E.addListener(containingPanel, 'mouseover', function(evt) {
            if (that.disabledRollover) {
                return;
            }
            var target = $E.getTarget(evt);
	    var relatedTarget = $E.getRelatedTarget(evt);
            var wrapper = target;
			
            if (target && !$D.hasClass(target, 'containedPanel')) {
            	wrapper = $D.getAncestorByClassName(target, 'containedPanel');
            }

            if (wrapper && relatedTarget && !$D.isAncestor(wrapper, relatedTarget)) {
                var wrapperHeight = $D.getHeight(wrapper);
                var heightTo = $D.getHeight($D.getChildren(wrapper)) - 32; // adjust for height offset

                if (heightTo <= wrapperHeight) {
                    return;
                }
                var anim = new YAHOO.util.Motion(wrapper, {height:{to:heightTo}}, .2, YAHOO.util.Easing.easeOut);
                anim.animate();

            }
			
			/* toggle shim */
			var toggleShim = $D.hasClass(wrapper, 'collapsed');		
			if( toggleShim ) {				
				$D.replaceClass( wrapper, 'collapsed', 'expanded');
			}
			/* toggle title */
			var toggleTitle = $D.hasClass('toggleTitle', 'toggleTitle');		
			if( toggleTitle ) {				
				$D.replaceClass( 'toggleTitle', 'toggleTitle', 'toggleTitleHover');
			}
			/* toggle icons */
			var toggleIcons = $D.hasClass( 'hideTogglePane', 'toggleIcons' );			
			if( toggleIcons ) {
				$D.replaceClass( 'hideTogglePane', 'toggleIcons', 'toggleIconsHide');
			}

                        //make the panel link "Close"
                        var toggleLink = $D.get("toggleLinkId");
                        $D.replaceClass(toggleLink,"toggleOpen","toggleClose");                        			
        });

		/* listen for the mouseout event */
        $E.addListener(containingPanel, 'mouseout', function(evt) {
            if (that.disabledRollover) {
                return;
            }
           
            var target = $E.getTarget(evt);
            var relatedTarget = $E.getRelatedTarget(evt);

            var wrapper = target;
            if (target && !$D.hasClass(target, 'containedPanel')) {
                wrapper = $D.getAncestorByClassName(target, 'containedPanel');
            }


            if (wrapper && relatedTarget && !$D.isAncestor(wrapper, relatedTarget)) {
                var minHeight = $D.getStyle(wrapper, 'minHeight');
                minHeight = 102; //minHeight.substring(0, minHeight.length - 2);

                var anim = new YAHOO.util.Motion(wrapper, {height:{to:minHeight}}, .2, YAHOO.util.Easing.easeIn);
                anim.animate();
            }

			/* toggle shim */
			var toggleShim = $D.hasClass(wrapper, 'expanded');		
			if( toggleShim ) {
				$D.replaceClass( wrapper, 'expanded', 'collapsed');
			}
			/* toggle title */
			var toggleTitle = $D.hasClass('toggleTitle', 'toggleTitleHover');		
			if( toggleTitle ) {				
				$D.replaceClass( 'toggleTitle', 'toggleTitleHover', 'toggleTitle');
			}					
			/* toggle icons */
			var toggleIcons = $D.hasClass( 'hideTogglePane', 'toggleIconsHide' );			
			if( toggleIcons ) {
				$D.replaceClass( 'hideTogglePane', 'toggleIconsHide', 'toggleIcons');
			}

                        //make the panel link "Open"
                        var toggleLink = $D.get("toggleLinkId");
                        $D.replaceClass(toggleLink,"toggleClose","toggleOpen");                 
        });

	
	
		var panelToggleOpen = $D.hasClass('toggleLinkId', 'toggleLink');
		if( panelToggleOpen ) {
			var showHideElement = $D.getElementsByClassName("toggleIcons", "div");
			var toggleElement1 = $D.getElementsByClassName("collapsed", "div");
			var toggleElement2 = $D.getElementsByClassName("toggleTitle", "div");
			var toggleElement3 = $D.getElementsByClassName("toggleLink", "div");
			
			var containingPanel = $D.getElementsByClassName("containedPanel", "div");
			var maxHeight = $D.getHeight(containingPanel);
			
			var config = WDPRO.widgets.Accordion.createPanelConfigByClassNames({
					container: "wrapper"
					, triggerClass: "toggleLink"
					, wrapperClass: "containedPanel"
					, minHeight: 100
					, maxHeight: 216 //"auto"
					, duration: 0.5
					, initiallyExpanded: false
					, eventType: "click"
					//, easing : YAHOO.util.Easing.elasticOut					
			 });			
			
			for ( var i = config.length - 1, j = 0; i >= j; i-- ) {
				var togglePanels = new WDPRO.widgets.TogglePanel(config[i]);
				
				expandedTriggerClass = 'toggleIconsHide';
				collapsedTriggerClass = 'toggleIcons';
				expandedShim = 'expanded';
				collapsedShim = 'collapsed';
				expandedTitle = 'toggleTitleHover';
				collapsedTitle = 'toggleTitle';
				toggleClose = 'toggleClose';
				toggleOpen = 'toggleOpen';
				
				
				// subscribes to the collapse behavior
				togglePanels.collapseEnd.subscribe(function(eType, args) {					
					var target = showHideElement;
		
					if($D.hasClass(target,expandedTriggerClass)){
						$D.replaceClass(target,expandedTriggerClass,collapsedTriggerClass);
						$D.replaceClass(toggleElement1,expandedShim,collapsedShim);
						$D.replaceClass(toggleElement2,expandedTitle,collapsedTitle);
						$D.replaceClass(toggleElement3,toggleClose,toggleOpen);
					}else{
						$D.addClass(target,collapsedTriggerClass);						
					}
                                        that.disabledRollover = false;
				});				
				
				// subscribes to the expansion behavior
				togglePanels.expandStart.subscribe(function(eType, args) {					
					var target = showHideElement;
					
					if( $D.hasClass( target,collapsedTriggerClass ) ){						
						$D.replaceClass( target,collapsedTriggerClass,expandedTriggerClass );
						$D.replaceClass(toggleElement1,collapsedShim,expandedShim);
						$D.replaceClass(toggleElement2,collapsedTitle,expandedTitle);
						$D.replaceClass(toggleElement3,toggleOpen,toggleClose);
					}else{
						$D.addClass( target,expandedTriggerClass );
					}	
                                        that.disabledRollover = true;
				});
			
				
			} // end for loop
		} // end if hasClass	
	
	}
};

togglePanelOpen = {
	init:function(){
        	var $D = WDPRO.util.Dom;
        	var $E = YAHOO.util.Event;
		
			var containingPanel = $D.getElementsByClassName("containedPanel", "div");
                var heightTo = 209; //not currently using getHeight() based on previous comment above
               
                var anim = new YAHOO.util.Motion(containingPanel, {height:{to:heightTo}}, .2, YAHOO.util.Easing.easeOut);
                anim.animate();
			
		/* toggle shim */
		var toggleShim = $D.hasClass(containingPanel, 'collapsed');		
		if( toggleShim ) {				
			$D.replaceClass( containingPanel, 'collapsed', 'expanded');
		}
		/* toggle title */
		var toggleTitle = $D.hasClass('toggleTitle', 'toggleTitle');		
		if( toggleTitle ) {				
			$D.replaceClass( 'toggleTitle', 'toggleTitle', 'toggleTitleHover');
		}
		/* toggle icons */
		var toggleIcons = $D.hasClass( 'hideTogglePane', 'toggleIcons' );			
		if( toggleIcons ) {
			$D.replaceClass( 'hideTogglePane', 'toggleIcons', 'toggleIconsHide');
		}
		

		/* toggle link */
		$D.replaceClass( 'toggleLinkId', 'toggleOpen', 'toggleIconsHide');
		
		
	}
};