/**
    Begin class DelaySlider
    Copyright: Zuiderlicht 2010
    Author: RB, 2010-03-11
    Allows a delayed slidedown/up of a given element
    
    Usage example:
    
    //1. declare a (global) variable for the slider
    globalLoginSlider = new DelaySlider('#loginScreen','slow','fast', 50);

    //2. declare global functions for the (for example) mouse over and mouse out events.
    function logoButtonMouseOver(){
        globalLoginSlider.slideDown();
    }
    
    function logoButtonMouseOut(){
        globalLoginSlider.slideUp();
    }
    
    //3. attach the global functions to the HTML element events:
     <div onmouseover="logoButtonMouseOver()" onmouseout="logoButtonMouseOut()"></div>
     
*/

/* Constructor 

@param pvSlideElementSelector {string} The jQuery selector of the element(s) to slide down and up
@pvSlideUpSpeed {string} This can be a value like 'slow' and 'fast', but also an integer in milliseconds
@pvSlideDownSpeed {string} This can be a value like 'slow' and 'fast', but also an integer in milliseconds
@pvInitialDelay {integer} The number of delay timeouts that should pass before the element(s) will be slided up again
*/
function DelaySlider(pvSlideElementSelector, pvSlideUpSpeed, pvSlideDownSpeed, pvInitialDelay)
{
    this.counter = 0; //the counter that holds the number of passed timeouts
    this.initialDelay = pvInitialDelay; //the start value for the total delay. It is decremented with every delay cycle
    this.timeoutArray = new Array(); //keeps track of all running timeouts
    this.delaySpeed = 100; //timeout in ms per delay

    this.slideElementId = pvSlideElementSelector;
    this.slideUpSpeed = pvSlideUpSpeed;
    this.slideDownSpeed = pvSlideDownSpeed;
    this.targetHeight = 0;
    
    this.touchTimeouts = new Array();
    
} //DelaySlider constructor





/**
  Slides down the element to the target height and sets the counter to the initial delay.
  If no target height is set, it will use the standard jquery slideDown method.
  Any running timeouts will be cleared first
*/
DelaySlider.prototype.slideDown = function(pvTargetHeight)
{
    //clear running timeouts
    while(this.timeoutArray.length > 0){
        clearTimeout(this.timeoutArray.pop());
    }
   
    if (pvTargetHeight == null){
        //use the standard jQuery slideDown method
        $(this.slideElementId).slideDown(this.slideDownSpeed);
    }
    else
    {
       this.targetHeight = pvTargetHeight
       $(this.slideElementId).slideDown(this.slideDownSpeed);
       //$(this.slideElementId).animate({height: this.targetHeight}, this.slideDownSpeed, function() {});
    
    }
    
    
    //init the counter
    this.counter = this.initialDelay;
} //slideDown()

/**
  Starts the delayed slide up of the element
*/
DelaySlider.prototype.slideUp = function()
{
    this.targetHeight = 0;
    this.p_startDelay(this);
} //slideUp()

/**
Private method p_startDelay()
Starts the delay after for example a mouse out event. 
The pvDelayObject parameter holds a reference to the current object instance, because it must be passed
to a timeout method. The use of 'this' is therefore not possible.
*/
DelaySlider.prototype.p_startDelay = function(pvDelayObject)
{

    //decrement the counter untill it is <= zero
    pvDelayObject.counter--;
    if (pvDelayObject.counter > 0)
    {
      //fire a new timeout
      var lvTimeout = setTimeout(
        function delay()
        {
            //recursive call
            pvDelayObject.p_startDelay(pvDelayObject);
        
        }, pvDelayObject.delaySpeed);
        pvDelayObject.timeoutArray.push(lvTimeout);
    }
    
    //delay exceeded, so slide back the element
    if (pvDelayObject.counter <= 0)
    {
      
      $(pvDelayObject.slideElementId).slideUp(pvDelayObject.slideUpSpeed);

      //$(pvDelayObject.slideElementId).animate({height: pvDelayObject.currentHeight}, pvDelayObject.slideUpSpeed, function() { });
    }
    
}//startDelay()

/* End class DelaySlider */


/* Declare two delay slider objects */
globalMenuSlider = new DelaySlider('#headLayerBlock', 400,200, 5); 
globalLoginSlider = new DelaySlider('#loginScreen',400,200, 5); 

/**
 
*/
function logoButtonMouseOver(){
   globalLoginSlider.slideDown();
    
}//logoButtonMouseOver

function logoButtonMouseOut(){
  
   globalLoginSlider.slideUp();
   
}

/* make the delay very high if someone presses a key or clicks in the login screen 
first it clears the function, so that any pending calls don't matter.
Then it sets a timer to 10 seconds, after the delay, the function is restored and the login screen is slided up
*/
function loginScreenTouched(){
    globalLoginSlider.slideUp = function() {}; //clear the function
    while(globalLoginSlider.touchTimeouts.length > 0)
    {
        clearTimeout(globalLoginSlider.touchTimeouts.pop());
    }
    var lvTouchTimeout = setTimeout( function doRestore(){restoreLoginSlider();}, 10000);
     globalLoginSlider.touchTimeouts.push(lvTouchTimeout);
} //loginScreenTouched

/* restore the login slider function */
function restoreLoginSlider(){

    globalLoginSlider.slideUp = function()
    {
        this.targetHeight = 0;
        this.p_startDelay(this);
    }
    globalLoginSlider.slideUp();
}


/* The logo itself */
function logoMouseOver(){
    logoButtonMouseOver();
}

function logoMouseOut(){
    logoButtonMouseOut();
}


/*********************************************************************
 * No onMouseOut event if the mouse pointer hovers a child element 
 * *** Please do not remove this header. ***
 * This code is working on my IE7, IE6, FireFox, Opera and Safari
 * 
 * Usage: 
 * <div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');"> 
 *		So many childs 
 *	</div>
 *
 * @Author Hamid Alipour Codehead @ webmaster-forums.code-head.com		
**/
function is_child_of(parent, child) {
	if (child != null) {
		while (child.parentNode) {
			if ((child = child.parentNode) == parent) {
				return true;
			}
		}
	}
	return false;
}

function fixOnMouseOut(element, event, pvFunction) {
	var current_mouse_target = null;
	if (event.toElement ) {
		current_mouse_target 			 = event.toElement;
	} else if( event.relatedTarget ) {				
		current_mouse_target 			 = event.relatedTarget;
	}
	if( !is_child_of(element, current_mouse_target) && element != current_mouse_target) {
		pvFunction();
	}
}
/*********************************************************************/




/*
    Called when the mouse hits a main menu item.
    It first cleans up any running delays and then slides down the sub-menu bar
*/
function menuMouseOver(pvIndex){
   positionMenuArrow(pvIndex);
   var lvSubMenuHeight = displaySubMenu(pvIndex);
   
   globalMenuSlider.slideDown(lvSubMenuHeight);
      
   
}//menuMouseOver()

/*
    Called when the mouse leaves a main menu item.
*/
function menuMouseOut(){
    globalMenuSlider.slideUp();
}//menuMouseOut()

/*
    Called when the mouse hits a sub menu block.
*/
function subMenuMouseOver(pvSubmenuIndex){
   globalMenuSlider.slideDown();
}

/*
 Called when the mouse leaves a sub menu block
*/
function submenuMouseOut(){
    menuMouseOut();
}


/*
 Sets the left position of the div that contains the main menu arrow (the white triangle image)
*/
function positionMenuArrow(pvMenuIndex){
   var lvLeft = 158 + (160 * pvMenuIndex);
   var lvImageDiv = document.getElementById('imgMainMenuArrow');
   lvImageDiv.style.left = lvLeft + "px";
   lvImageDiv.style.display = "block";
}

/*
    Shows the selected submenu and hides the others.
    It returns the height of the displayed sunmenu
    
    @param pvIndex {integer} The selected submenu index (zero based).
*/
function displaySubMenu(pvIndex){
    
    //hide all submenu's first
    $('.subMenu').hide();
   
    var lvHeight=0; 
      
    //show the submenu that corresponds with the index
    switch (pvIndex){
        case 0: 
        {
            $('#firstSubMenu').show();
            lvHeight = $('#firstSubMenu').height();
            break;
        }
        case 1:
        {
            $('#secondSubMenu').show();
            lvHeight = $('#secondSubMenu').height();
            break;
        }
        
        case 2:
        {
            $('#thirdSubMenu').show();
            lvHeight = $('#thirdSubMenu').height();
            break;
        }
        
        case 3:
        {
            $('#fourthSubMenu').show();
            lvHeight = $('#fourthSubMenu').height();
            break;
        }
        default:
        {
            alert('Invalid menu index provided to displaySubMenu(pvIndex)');
        }
        
    }//switch pvIndex
    
    return lvHeight + 87;
    
} //displaySubMenu


/*
 Occurs when a node in the Telerik treenode is clicked.
 It will expand / collapse nodes that have children
*/
function subMenuNodeClicking(sender, args){
 
    var node = args.get_node();
    if (node.get_expanded()) {
        node.collapse();
    }
    else {
        node.expand();
    }

} //SubMenuNodeClicking

/**
    Collections & products BEGIN
**/

/**
    toggleGroup makes a group panel expand or collapse, depending on it's current height.
    The height to expand is calculated by using the (number of lines) times the height of a product square

    @param pvGroupPanel {element} A group container division element
    @param pvNumberOfProducts {integer} The number of products inside the group
*/
function toggleGroup(pvGroupPanel, pvNumberOfProducts)
{
    var lvMinHeight = 32;
    var lvProductHeight = 162;
    var lvToggleSpeed = 500;
    var lvLineSize = 4; //do not set to zero; will cause division by zero
    var lvCurrentHeight = $(pvGroupPanel).height();
    
    //calculate the targetheight based on the number of lines
    var lvTargetHeight = Math.max(Math.ceil((Math.max(pvNumberOfProducts, lvLineSize) / lvLineSize)) * lvProductHeight, lvMinHeight) + 20;
    
    //make an exception for the first line
    if (pvNumberOfProducts <= lvLineSize){
        lvTargetHeight = lvProductHeight;
    }
    
    //convert the calculated height to a string
    var lvAnimateHeightInteger = (lvCurrentHeight == 0 || lvCurrentHeight == lvMinHeight) ? lvTargetHeight : lvMinHeight;
    var lvAnimateHeightString = lvAnimateHeightInteger + 'px';
    
    //collapse arrow (on the left)
    if (lvAnimateHeightInteger == lvMinHeight){
        $('.groupArrow', pvGroupPanel).removeClass('groupArrowExpanded');
        $('.groupArrow img:nth-child(1)', pvGroupPanel).css("display", "none"); //hide first img
        $('.groupArrow img:nth-child(2)', pvGroupPanel).css("display", "inline"); //show second img
        $('.groupClickPanel', pvGroupPanel).css("display", "block");
    }
    else{
    //expand arrow (on the right)
        $('.groupArrow', pvGroupPanel).addClass('groupArrowExpanded');
        $('.groupArrow img:nth-child(1)', pvGroupPanel).css("display", "inline"); //hide first img
        $('.groupArrow img:nth-child(2)', pvGroupPanel).css("display", "none");//show second img
        $('.groupClickPanel', pvGroupPanel).css("display", "none");
    }
    
    //animate to the calculated height
    $('.groupContainerRight',pvGroupPanel).animate({height: lvAnimateHeightString}, lvToggleSpeed, function() {});
    $(pvGroupPanel).animate({height: lvAnimateHeightString}, lvToggleSpeed, function() {});

} //toggleGroup


/* start de slideshow binnen de meegegeven container id  */
function StartSlideshow(containerId) {

    //bepaal de omvattende div
    var container = $("#" + containerId)[0];

    //bepaal aantal afbeeldingen
    var nslideshowimg = $("img", container).length;

    var pnlSlideShow = $(".slideshowElement", container);

    if (nslideshowimg > 1) {
        pnlSlideShow.cycle({
            fx: 'fade', timeout: 4000, speed: 750
        });
    }
    else {
        $('.nav', container).hide();
    }

    $('.playpause', container).click(function() {
        $(this).toggleClass('play');
        $(slideshowid).cycle('toggle');

    });


    $('.next', container).click(
        function() {
            pnlSlideShow.cycle('next');
        }
    );

    $('.prev', container).click(
        function() {
            pnlSlideShow.cycle('prev');
        }
    );


    //    $('.playpause', container).hover(
    //        function () {
    //            $(this).addClass('hover');
    //        },
    //        function () {
    //            $(this).removeClass('hover');
    //        }
    //    )

}