jQuery(document).ready(function() {

jQuery("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
jQuery("#topnav ul li a:first-child").hover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
jQuery(this).parent().find("ul.subnav").show().slideDown('slow'); //Drop down the subnav on click
jQuery(this).parent().hover(function() {
}, function(){
jQuery(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
jQuery(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){	//On Hover Out
jQuery(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

  jQuery('.error').hide();
  
jQuery('div.loadcarousel').fadeTo('fast', 1).show();
jQuery('div.mainContent').fadeTo('fast', 0);

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last')); 
                jQuery('#carousel_ul li img').fadeTo(0,.75);
                jQuery('#carousel_ul li h3 a').fadeTo(0, .75);  
                jQuery('#carousel_ul li div').fadeTo(0, 0);  
                jQuery('#carousel_ul li div p').fadeTo(0, 0);  
                jQuery('#carousel_ul li div a').fadeTo(0, 0);  
                jQuery('#carousel_ul li div h3').fadeTo(0, 0);  
                jQuery('#carousel_ul li div input').fadeTo(0, 0);  

                

jQuery('.capt3').text(jQuery('.caption3').text());
jQuery('.capt6').text(jQuery('.caption6').text());
jQuery('.capt7').text(jQuery('.caption7').text());
jQuery('.capt9').text(jQuery('.caption9').text());
jQuery('.capt10').text(jQuery('.caption10').text());
jQuery('.capt11').text(jQuery('.caption11').text());




                
        

        jQuery('#left_scroll img').fadeTo(0,0.6);
       jQuery('#right_scroll img').fadeTo(0,0.6);
     var caption_title = jQuery('#carousel_ul li span h3');
     var caption_text = jQuery('#carousel_ul li span p');
     var caption_buttons = jQuery('#carousel_ul li span a');
        


var timerId;
jQuery('#right_scroll').click(
    function() {

jQuery('#right_scroll img').fadeTo('fast',1);
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = jQuery('#carousel_ul li').outerWidth();
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            jQuery('#carousel_ul:not(:animated)').animate({'left' : left_indent},'slow',function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first')); 
                
                //and get the left indent to the default -210px
                jQuery('#carousel_ul').css({'left' : '-270px'});
            }); }, 
    function() { 
                jQuery('#right_scroll img').fadeTo('slow',.6);
}
);

jQuery('#left_scroll').click(
    function() {

            jQuery('#left_scroll img').fadeTo('fast', 1);

            var item_width = jQuery('#carousel_ul li').outerWidth() + 10;
                        
            var caption = jQuery('#carousel_ul li span');
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt(jQuery('#carousel_ul').css('left')) + item_width;
            
            jQuery('#carousel_ul:not(:animated)').animate({'left' : left_indent},'slow',function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            jQuery('#carousel_ul').css({'left' : '-270px'});
            });
            jQuery('#left_scroll img').fadeTo('fast', .8);

    },
    function() {jQuery('#left_scroll img').fadeTo('slow', .6);}
);


jQuery('#carousel_ul li').hover(
    function() {
jQuery("img", this).stop().dequeue();
jQuery("h3 a", this).stop().dequeue();
jQuery("div", this).stop().dequeue();

jQuery("div h3", this).stop().dequeue();
jQuery("div p", this).stop().dequeue();
jQuery("div a", this).stop().dequeue();
jQuery("div input", this).stop().dequeue();


jQuery('li').removeClass("activeli");
jQuery(this).addClass("activeli");
jQuery("img", this).fadeTo('slow', 1);
jQuery('h3 a', this).fadeTo('slow', 1);  
jQuery('div', this).fadeTo('slow', 1); 

jQuery('div h3', this).fadeTo('slow', 1); 
jQuery('div p', this).fadeTo('slow', 1); 
jQuery('div a', this).fadeTo('slow', 1); 
jQuery('div input', this).fadeTo('slow', 1); 

},
    function() {
jQuery('div h3', this).fadeTo('fast', 0);  
jQuery('div p', this).fadeTo('fast', 0);  
jQuery('h3 a', this).fadeTo('fast',.75);  
jQuery("img", this).fadeTo('fast', 0.75);
jQuery('div', this).fadeTo('fast', 0);  
jQuery('div a', this).fadeTo('fast', 0); 
jQuery('div input', this).fadeTo('fast', 0);  

}
 );
 
 
jQuery('#carousel_ul li').click(
    function() {
jQuery('div.mainContent').fadeTo('fast', 0);
});
 
var added = getUrlVars();

if(added['added'] != 1) {
jQuery('.XSbutton').fadeTo('fast', 0).hide();
jQuery('.txtCart').hide();
}

if(added['added'] == 1) {

jQuery('.XSbutton').fadeTo('fast', .75).show()
jQuery('.txtCart').fadeTo('fast', 1).show();

}
jQuery('a.prtLink2[href*="13.png"]').after('<p style="color:#E70101; font-size:20px;">DISCONTINUED</p>');
jQuery('a.prtLink2[href*="13.png"]').remove();
jQuery('a.Lbutton').hover(
    function() {
jQuery(this).stop().dequeue();
jQuery(this).fadeTo('slow', 1);

  

},
    function() {
jQuery(this).fadeTo('fast', .75);

}
 );



jQuery('a.Sbutton').hover(
    function() {
jQuery(this).stop().dequeue();
jQuery(this).fadeTo('slow', 1);



  
  

},
    function() {
jQuery(this).fadeTo('fast', .75);


}
 );

jQuery('a.XSbutton').hover(
    function() {
jQuery(this).stop().dequeue();
jQuery(this).fadeTo('slow', 1);
},
    function() {
jQuery(this).fadeTo('fast', .75);


}
 );


// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
}




});





jQuery(window).load( function() {

    var pathname = window.location.pathname;
jQuery('div.loadcarousel').fadeTo('fast', 0).hide();
jQuery('div.mainContent').fadeTo('fast', 1);

if(pathname == '/store/'){
jQuery('div.loadcarousel').load('http://www.kilosports.com/store/index.php?_a=viewProd&productId=3 .mainimage');
jQuery('div.loadcarousel').load('http://www.kilosports.com/store/index.php?_a=viewProd&productId=6 .mainimage');
jQuery('div.loadcarousel').load('http://www.kilosports.com/store/index.php?_a=viewProd&productId=7 .mainimage');
jQuery('div.loadcarousel').load('http://www.kilosports.com/store/index.php?_a=viewProd&productId=9 .mainimage');
jQuery('div.loadcarousel').load('http://www.kilosports.com/store/index.php?_a=viewProd&productId=10 .mainimage');
};



});