$(document).ready(function(){
            
        imageGallery();
        
        $(".stockists").click(function(event){
            event.preventDefault();
            $("#stockists").fadeToggle(500);
			menuClose($("#archive a").eq(0));
            
        });
		
	$("#archive a").eq(0).click(function(event){
            event.preventDefault();
			
			if( $(this).parent().hasClass("open") === true){
				
				menuClose($(this));
				
				
			}else{
				
				
				menuOpen($(this));
			}
         });
        
        $(".close, #overlay-bg").bind("click", function(){
                 $("#overlay").fadeOut(400);
                 $("#images").fadeOut(200);
        });
            
                        
                        
$(".col").bind("click", function(e){e.preventDefault();
                
                
                //CHANGE HASH
                window.location.hash =  $(this).attr("data");
                
                moveToScreen();
                
                //SHOW PROGRESS BAR AGAIN
                $("#progress").show();   
                $("#progress").css({"width" : "0px"});
                
                //UPDATE PRODUCT INFO
                $("#product-info").html($(this).find("a").attr("title") + "<br />" + $(this).find("a").attr("code"));
                
                //UPDATE IMAGES
                var numberOfImges = $(this).find("a").attr("images");
                var images_html = "";
                for (i = 0; i < numberOfImges; i++){
                    images_html += '<img src="images/' + $(this).find("a").attr("code").replace("#", "") + "/" + (i+1) + '.jpg" />';
                }
                $("#images").html(images_html);
                
                
                $("#overlay").fadeIn(400, function(){
                 
                 popupGallery();
                
                }).css({"height" : $(document).height() + "px"});
                
        });
                        
                        
if(window.location.hash){
    var hash = window.location.hash.substring(1);
    $(".col[data='" + hash + "']").click();
}
				
            
});
          
// // // // // POPUP SCRIPT

 function moveToScreen(){
                var moveToScreen = $(window).scrollTop() + 108;
                $("#product-detail").css({"top" : moveToScreen + "px"});
            }


function menuOpen(element){
	element.parent().addClass("open");
		
	 var container = element.parent(),
	 	totalIndex = container.find("ul li").length,
			 	h = container.find("ul").height() + 18;
			
            	container.animate({"height" : h}, (100 * totalIndex) + 400);
				
				container.find("ul li").each(function(){
					
						$(this).stop().animate({
							"padding-left" : "18px",
							"opacity" : "1"
							
						}, (300 * $(this).index()) + 400);
		});
	
}

function menuClose(element){
	element.parent().removeClass("open");
	
	 var container = element.parent(),
	 	totalIndex = container.find("ul li").length,
			h = 18;
			
            	container.animate({"height" : h}, (100 * totalIndex) + 1000);
				
				container.find("ul li").each(function(){
					
						$(this).stop().animate({
							"padding-left" : "0px",
							"opacity" : "0"
							
						}, (300 * (totalIndex - $(this).index() ) ) + 400);
		});
	
}

function popupGallery(){
    
        Gallery = $("#images");
        GalleryImg = $("#images").find("img");
        TotalImages = GalleryImg.length;
        Count = 1;
        Loading = 0;
        
        $("#product-nav span").text(Count + " /  " + TotalImages);
        
            LoadCount = 0;
            GalleryImg.each(function(i){
                    
                    
                    var img = new Image();
                    img.src = $(this).attr("src");
                    
                    $(img).bind("load error", function(){
                        LoadCount ++;
                        loadProgress();
                        
                    });
                    
                    if(i >= 1){
                        $(this).hide();
                    }
                    
            });
            
    
      }
      
      function loadProgress(){
        
        var progress = Math.floor( ((LoadCount) / TotalImages) * $("#images").width() );
        
        $("#progress").stop().animate({"width" : progress + "px"}, 100);
        $("#progress span").html("loading...<br/>" + (LoadCount) + " / " + TotalImages);
        //alert (progress);
        //alert (LoadCount);
        if(LoadCount === TotalImages){
            
            loadComplete();
        }
        
      }
      
      function loadComplete(){
        $("#progress").fadeOut(400);
        Gallery.fadeIn(400);
        $("#next, #prev").bind("click", popupGalleryNav);
      }
      
      function popupGalleryNav(e){e.preventDefault();
      
       if( $("#images").find("img").is(":animated") == false){
     
                    if(this.id === "next"){
                        
                                $("#images").find("img").first().next().css({"z-index" : "1"}).fadeIn(1000, function(){
                                    $(this).prev().css({"z-index" : "0", "display" : "none"})
                                    $("#images").find("img").last().after($(this).prev());
                                });
                                
                                if (Count >= TotalImages){
                                   Count = 1;
                                }else{
                                    Count ++;  
                                }
                                  $("#product-nav span").text(Count + " / " + TotalImages);
                            }
                            
                            if(this.id === "prev"){
                                
                                $("#images").find("img").first().css({"z-index" : "0"});
                                $("#images").find("img").last().css({"z-index" : "1"}).fadeIn(1000, function(){
                                    $("#images").find("img").first().css({"z-index" : "0", "display" : "none"})
                                    $("#images").find("img").first().before($(this));
                                });
                                
                                
                                if (Count == 1){
                                    Count = TotalImages;
                                }else{
                                    Count --;  
                                }
                                
                                $("#product-nav span").text(Count + " / " + TotalImages);
                            }
                            
                    }
            
      }


function imageGallery(){
    
    var Gallery = new Object();
    Gallery.Image = $("#images").find("img");
    Gallery.TotalImages = Gallery.Image.length;
    Gallery.Count = 1;
    Gallery.LoadCount = 0;
    
    $("nav span").text(Gallery.Count + " / " + Gallery.TotalImages);
    
    imageGalleryLoad(Gallery);
}


function imageGalleryLoad(Gallery){
    
        Gallery.Image.each(function(i){
          
            $(this).attr("src",  $(this).attr("src")).load(function(){
                
                if(i > 0){
                   $(this).css({"display" : "none"}); 
                }
                
                imageGalleryLoadProgress(Gallery);
               
            });
        
        })

}

function imageGalleryLoadProgress(Gallery){
    
    progress = ((Gallery.LoadCount + 1) / Gallery.TotalImages) * $("#images").width();
    
    if (Gallery.LoadCount === Gallery.TotalImages - 1){
                
                //Gallery.Image.eq(0).css({"opacity" : "1"});
                $("#images, nav").animate({"opacity" : "1"}, 2000);
                
        $("#progress").stop().animate({"width" : progress + "px"}, 200);        
        $("#progress span").html("loading...<br/>" + (Gallery.LoadCount + 1) + " / " + Gallery.TotalImages);
        
        imageGalleryLoadComplete(Gallery);
                
    }else{
        
        
        $("#progress").stop().animate({"width" : progress + "px"}, 200);
        $("#progress span").html("loading...<br/>" + (Gallery.LoadCount + 1) + " / " + Gallery.TotalImages);
        
        Gallery.LoadCount++;
        
    }
        
    
    
}

function imageGalleryLoadComplete(Gallery){
    
     $("#progress").fadeOut(500);
     
     $("#next, #prev").bind("click", {Gallery: Gallery}, imageGalleryNav);
    
}

function imageGalleryNav(event){
    event.preventDefault();
    Gallery = event.data.Gallery
    if( Gallery.Image.is(":animated") == false){
     
            if(this.id === "next"){
             
                $("#images").find("img").first().next().css({"z-index" : "1"}).fadeIn(1000, function(){
                    $(this).prev().css({"z-index" : "0", "display" : "none"})
                    $("#images").find("img").last().after($(this).prev());
                });
                
                if (Gallery.Count >= Gallery.TotalImages){
                    Gallery.Count = 1;
                }else{
                    Gallery.Count ++;  
                }
                
                 $("nav span").text(Gallery.Count + " / " + Gallery.TotalImages);
            }
            
            if(this.id === "prev"){
                
                $("#images").find("img").first().css({"z-index" : "0"});
                $("#images").find("img").last().css({"z-index" : "1"}).fadeIn(1000, function(){
                    $("#images").find("img").first().css({"z-index" : "0", "display" : "none"})
                    $("#images").find("img").first().before($(this));
                });
                
                
                if (Gallery.Count == 1){
                    Gallery.Count = Gallery.TotalImages;
                }else{
                    Gallery.Count --;  
                }
                
                $("nav span").text(Gallery.Count + " / " + Gallery.TotalImages);
            }
    }
    
}