/*
* This module allows you to place a hidden panel where you can display modules 
* such as a login or contact form. 
* (c) Copyright: Ninjoomla, www.ninjoomla.com - Code so sharp, it hurts.
* email: daniel@ninjoomla.com 
* date: 18 September, 2007
* PHP Code License : http://www.gnu.org/copyleft/gpl.html GNU/GPL 
* JavaScript Code  : http://creativecommons.org/licenses/by-nc-sa/3.0/
*
* Changelog
*
* 1.0 Sep 18, 07 : 
*       Initial Version
* 
*/

//window.addEvent is used to ensure that other events can be attached to the window also
window.addEvent('domready', function() {

    //initialise the variables we need for our custom sizing
    var nscrt = $('ninsecret');
    var nscrtClose = $('nscrt_close_div');
    var panel = $('ninsecret_panel'); 
    var panelwrap = $('ninsecret_panelwrap');
    
    //Hide the panel using JS, and apply the showalways class so the CSS doesn't 
    //interefere with the display of the menus. 
    panel.setOpacity(0);  
	
	if (nscrt_close_meth) {
	      //Add the class to display the close button
	      //We add the class to the outmost div - panelwrap - to allow styling 
        //efects to be applied to any fields in the panel (i.e. the open/close image) 
        panelwrap.addClass('nscrtCloseClick'); 
    } else {
        //Add the class to allow :hover for the mouseout close effect
        //We add the class to the outmost div - panelwrap - to allow styling 
        //efects to be applied to any fields in the panel (i.e. the open/close image) 
        panelwrap.addClass('nscrtCloseMout');
    }
    
  	//Set the event to use to open the panel according to the params
  	if (nscrt_open_meth) {
  		var nscrt_open_meth_desc = 'mouseover';
  	} else {
  		var nscrt_open_meth_desc = 'click';
  	}
      
      //Function to open the panel.
      nscrt.addEvent(nscrt_open_meth_desc,function(e) {
              e = new Event(e).stop();
                  
                  //only run the animation if the panel is hidden
                  if (panel.getStyle('display') == 'none'){
                  
                      //set the opacity to 0 just in case it is something else.
                      panel.setStyle('opacity', '0');
                      
                      //This class is to hold open the panel while we process the 
                      //mouseout or click functions.
                      //Because the mouseout JS is fired when you move into a div 
                      //inside the one it is applied to, we can't use on mouseout to
                      //close the div, we need to use the css :hover ability instead.
                      //We need to force the panel to show, and then depending on the 
                      //params (mouse out or click to close) we will either remove 
                      //this class immediately and let the :hover css handle it, 
                      //or keep it for now and remove it when the close button is clicked instead. 
                      panelwrap.addClass('nscrtOpen');
                      
                      panel.effect('opacity',{
                                    	duration: 1000
                                    }).start(0,1);
                                
                  }
               
          });
      
      //only show the button, and apply the JS function to it if specified in the params
      //OR if the browser is ie6 which doesn't support :hover so css wont work
  	if (nscrt_close_meth || window.ie6) {
  			 //close the panel if the close button is clicked
      		nscrtClose.addEvent('click',function(e) {
  		            e = new Event(e).stop();
  		            
  		            //Begin a 1000 milisecond fade out
  		            panel.effect('opacity',{
  		                          	duration: 1000
  		                          }).start(1,0);
  		            //Remove the displayer class
  		            panelwrap.removeClass.delay(1000,panelwrap, ['nscrtOpen']);
  		    });//nscrtClose.addEvent 'click'
  		    
  		    //because ie is such a heap of crap we need some extra js to allow the button hover
			if (window.ie6){
				nscrtClose.addEvent('mouseover',function(e) {
					nscrtClose.addClass('closebutover');			
				});
				
				nscrtClose.addEvent('mouseout',function(e) {
					nscrtClose.removeClass('closebutover');			
				});
			}
  		    
  		    
  	} else /*mouseout to close*/{
          //If we are using mouseout to close the panel then we need to a 
          //little bit of tricky JS moogic to remove the nscrtOpen class from the panel
          //This should be done when the mouse leaves the panelwrap div.
          //There are two ways to leave the panelwrap div, one is to go into the 
          //panel div, in which case the css :hover will take over, or out of the 
          //entire panel area, in which case we want to close the div automatically anyway.
          
          panelwrap.addEvent('mouseout',function(e) {
  		            e = new Event(e).stop();
  		            
  		            //Remove the displayer class
  		            panelwrap.removeClass('nscrtOpen');
  		            
  		    });//panelwrap.addEvent 'mouseout'
    
    }//if (nscrt_close_meth)
      
  	//Now that we know the JS is all working correctly remove the css 
  	//show/hide functionality   
  	    $$('.use_css').each(function(theDiv, i){
  	        theDiv.removeClass('use_css');
  	    });//use_css loop
	    
});//window.addEvent