$(document).ready(function() {
        
// image clicks
    $("a.gallery").click(function(e) {
		e.preventDefault();
        var container = $(this).parent("td").parent("tr").parent("tbody").parent("table").parent("div");
        var ord = container.parent("div").next("div");
        var img = $(this).find("img").attr("src");
        var color = $(this).parent("td").find("a.item-title-sm").text();
        var md = img.replace("_sm.jpg", "_md.jpg");
        var lg = img.replace("_sm.jpg", "_lg.jpg");
        var size = ord.find('select[name|="size"] option:selected').text();
        size = size.toLowerCase();
        var sku = img.substr(47, (img.length-53)) + size;
        container.find("td").removeClass("viewed");
        $(this).parent("td").addClass("viewed");
        container.find("div.zoomed").find("img").attr("src", md);
        container.find("a.enlargebtn").attr("href", lg);
        ord.find('select[name|="color"] option:selected').removeAttr("selected");
        ord.find('select[name|="color"]').find('option[value|="' + color + '"]').attr("selected", "selected");
        ord.find('input[name|="sku"]').val(sku);
	});
 // title clicks
    $("a.item-title-sm").click(function(e) {
		e.preventDefault();
        var container = $(this).parent("td").parent("tr").parent("tbody").parent("table").parent("div");
        var ord = container.parent("div").next("div");
        var img = $(this).parent("td").find("a.gallery").find("img").attr("src");
        var color = $(this).text();
        var md = img.replace("_sm.jpg", "_md.jpg");
        var lg = img.replace("_sm.jpg", "_lg.jpg");
        var size = ord.find('select[name|="size"] option:selected').text();
        size = size.toLowerCase();
        var sku = img.substr(47, (img.length-53)) + size;
        container.find("td").removeClass("viewed");
        $(this).parent("td").addClass("viewed");
        container.find("div.zoomed").find("img").attr("src", md);
        container.find("a.enlargebtn").attr("href", lg);
        var ord = container.parent("div").next("div");
        ord.find('select[name|="color"] option:selected').removeAttr("selected");
        ord.find('select[name|="color"]').find('option[value|="' + color + '"]').attr("selected", "selected");
        ord.find('input[name|="sku"]').val(sku);
	});
// update sku at size change
    $('select[name|="size"]').change(function() {
        var size = $(this).find('option:selected').text();
        size = size.toLowerCase();
        var form = $(this).parent("div").parent("form");
        var old_sku = form.find('input[name|="sku"]').val();
        var old_array = old_sku.split("_", 2);
        var sku = old_array.join("_") + "_" + size;
    });
// add to cart button click
    $("a.addbtn").click(function(e) {
		e.preventDefault();
        var container = $(this).parent("li").parent("ul").parent("form");
        $.ajax({
		  type: "POST",
		  url: "merchandise/cartajax",
		  data: {   name: container.find('input[name=group]').val(),
                    sku: container.find('input[name=sku]').val(),
                    color: container.find('select[name=color]').val(),
					size: container.find('select[name=size]').val(),
					qty: container.find('input[name=qty]').val()
				},
		  dataType: "json",
		  success: function(data){
				$("#merchcart").html(data.cart);
			}
		});
    });
//zoom images  
    $('a.enlargebtn').click(function(e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        //Get the A tag  
        var img = $(this).attr('href');
        var bg = img.replace("http://4njpicks.com/", "../");
      
        //Get the screen height and width  
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  
      
        //Set height and width to mask to fill up the whole screen  
        $('#mask').css({'width':maskWidth,'height':maskHeight});  
          
        //transition effect       
        $('#mask').fadeIn(1000);      
        $('#mask').fadeTo("slow",0.8);    
      
        //Get the window height and width  
        var winH = $(window).height();
        var winS = $(document).scrollTop();
        var winW = $(window).width();  
                
        //Set the popup window to center  
        $('#popup').css('top',  winH/2-375+winS);  
        $('#popup').css('left', winW/2-375);
        $('#popup').css('height',  '750px');  
        $('#popup').css('width', '750px');
        
        //Set background image
        $('#popup').css('background-image', 'url(' + bg + ')');
      
        //transition effect  
        $('#popup').fadeIn(2000);   
      
    });
//commercial popup 
    $('a.commercialbtn').click(function(e) {  
        //Cancel the link behavior  
        e.preventDefault();
      
        //Get the screen height and width  
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  
      
        //Set height and width to mask to fill up the whole screen  
        $('#mask').css({'width':maskWidth,'height':maskHeight});  
          
        //transition effect       
        $('#mask').fadeIn(1000);      
        $('#mask').fadeTo("slow",0.8);
      
        //Get the window height and width  
        var winH = $(window).height();
        var winS = $(document).scrollTop();
        var winW = $(window).width();  
                
        //Set the popup window to center  
        $('#popup').css('top',  winH/2-250+winS);  
        $('#popup').css('left', winW/2-250);
        $('#popup').css('height',  '480px');
        $('#popup').css('width', '640px');
        
        //load the movie
        $('#popup').load('/commercial', function(){
            $('.window .vclose').click(function(e) {
                //Cancel the link behavior  
                e.preventDefault();  
                $('#mask, .window').hide();  
            });
        });
      
        //transition effect  
        $('#popup').fadeIn(2000);
      
    });  
      
   //if close button is clicked  
    $('.window .close').click(function(e) {
        //Cancel the link behavior  
        e.preventDefault();  
        $('#mask, .window').hide();  
    });
      
    //if mask is clicked  
    $('#mask').click(function() {  
        $(this).hide();
        $('.window').hide();  
    });           

});