/*
 * Custom functions for cooks theme
 */
$(document).ready(function() {
   
   //Control the hiding and showing of 2nd level children
   // in the left category menu

  $('li.has-children a.active').each(function(){
    $(this).parent().find('ul.collapsed').show();
  });

   $('li.has-children a.active').click(function(e) {
       e.preventDefault();
       $(this).parent().find('ul.collapsed').toggle();
   });



   
   //Ensure that we see the submenu list if the current category is a 
   // sub-menu item.  This should probably be done in category.tpl 
   if($('li.has-children a.active').length) {
       $('li.has-children a.active').parent().parent().show();
   }

    //Handle the scrolling of related items on the category pages
    var related = [];
    $('div[id^=product_]').each(function() {
        //console.log($(this));
        var numRelated = $(this).find('.related').length-1; //Number of related items
        if(numRelated > 0) {
            var $curRelated = $(this).find('.on'); //Curren item that is being shown
            
            var curRelatedNum = $curRelated.attr('class'); // Number of the current items that is being shown, cont below
            curRelatedNum = parseInt(curRelatedNum.substring(curRelatedNum.indexOf('rel_') + 4, curRelatedNum.indexOf('rel_') + 5));
            related[$(this).attr('id')] = {
                'numRelated' :  numRelated,
                'curRelatedNum' : curRelatedNum
            }
             console.log(related);
            /*
             * Handle when someone clicks on the right or left arrow
             */
            $(this).find('.related-scroll a').click(function(e) {
                e.preventDefault();
                var $parent = $(this).parent().parent();
                var index = $parent.attr('id'); //the array index which is the parent.parent id
                //var prevItem = related[index].curRelatedNum //The current item is saved because it will later be changed

                /* 
                 * Determine how to increment the curRelatedItem based on
                 * which button was click and/or the current curRelatedItem value
                 */
                //console.log(related[index]);
                if($(this).attr('class') == 'related-left') {  
                    if(related[index].curRelatedNum == 0) {
                        related[index].curRelatedNum = related[index].numRelated;
                    }
                    else {
                        related[index].curRelatedNum--;
                    }
                }
                else {
                    if(related[index].curRelatedNum == related[index].numRelated) {
                        related[index].curRelatedNum = 0;
                    }
                    else {
                        related[index].curRelatedNum++;
                    }
                }

                $parent.find('.on').hide().addClass('off').removeClass('on');
                $parent.find(".rel_"+related[index].curRelatedNum).fadeIn('slow').addClass('on').removeClass('off');


            });
        } 
    });
    
    /*
     * Control the accordian effect on the FAQ page
     */
    $('.question').click(function (e) {
        e.preventDefault();
        $(this).siblings().slideToggle();
        if($(this).hasClass('active')) {
           $(this).removeClass('active');
           $(this).parent().css({'borderTop' : 'none','borderBottom' : 'none'});
        }
        else {  
            $(this).addClass('active');
			$(this).parent().css({'borderTop' : '1px solid #c4c4c4','borderBottom' : '1px solid #c4c4c4'});
        }
    });
    
    /*
     * Controls "What is this?" on checkout page
     * 
     * Since .tooltip is hidden by default, this is specific to the 
     * checkout page
     * 
     * .tooltip is contained by a div whose visibility is controlled
     * by clicking on .cart-heading
     * 
     */ 
     $('.cart-heading').click( function() { // the tooltip might be visible now
        if($('.tooltip').length && !($(this).hasClass('.active'))) { //If the tooltip is visible bind the display to hover             
             //init the offset of the tooltip pop up.
             //These values are relative to each .tooltip span.tip-link
             var TOP_OFFSET = 25; 
             var LEFT_OFFSET = 40;
             $('.tooltip').each(function() {
                var $theTip = $(this);
                var $tipLink = $theTip.find('.tip-link');
                var position = $tipLink.position();                    
                var left = (position.left + LEFT_OFFSET) + 'px';
                var top = (position.top + TOP_OFFSET) + 'px';
                $tipLink.hover(function () {
                   $theTip.find('.tip').css({'left' : left, 'top' : top}).show(); 
                }, function() {
                    $theTip.find('.tip').hide();
                });
             });
         }
     });
        
});