$(document).ready(function() {
    $("div.section a").mouseenter(function() {
        $(this).parent().addClass("color");
    });
    $("div.section a").mouseleave(function() {
        $(this).parent().removeClass("color");
    });
    
    if ($(".viewer").length) { initializeViewer(); }

    if ($("div.item").length) {initializeItemImages(); }

    var viewCart = $("#header .cart");
    if (viewCart.html() == "View Cart (0)") {
        viewCart.hide();
    } else {
        viewCart.show();
    }

});

function initializeViewer() {
    var $viewer = $(".viewer");
    var $title = $(".viewer h1");
    var $img = $(".viewer img:eq(0)");
    var $thumbnails = $(".thumbnails img");
    var $btnLeft = $(".viewer .arrow.left");
    var $btnRight = $(".viewer .arrow.right");
    
    var $btnThumbsLeft = $(".selector .arrow.left");
    var $btnThumbsRight = $(".selector .arrow.right");
    var $thumbContainer = $(".selector .thumbnails");
    
    var pages = Math.ceil($thumbnails.length / 5);
    var scrollWidth = $thumbContainer.width();
    var maxScrollWidth = scrollWidth * (pages - 1);
    var currentPosition = 0;
    var duration = 750;
    var viewerIndex = 0;
    var currentPage = 1;
    
    $thumbnails.click(function() {
        $img.hide();
        $("#loading").show();
        var showImage = function() {
            $("#loading").hide();
            $img.attr("src", $(this).attr("src"));
            $img.show();
        }
        var $tempImg = $("<img />");
        $tempImg.load(showImage);
        $title.html($(this).attr("alt"));
        var src = $(this).attr("src");
        src = src.replace("-small", "-large");
        $tempImg.attr("src", src);
        $img.attr("alt", $(this).attr("alt"));
        $thumbnails.removeClass("selected");
        $(this).addClass("selected");
        viewerIndex = $thumbnails.index($(this));
        
        var pg = Math.ceil(((viewerIndex + 1) / 5));
        while (pg != currentPage) {
            switch (true) {
                case (pg < currentPage):
                    $btnThumbsLeft.click();
                    break;
                case (pg > currentPage):
                    $btnThumbsRight.click();
                    break;
            }
        }
    });
    
    $btnLeft.click(function() {
        if (viewerIndex == 0) { return; }
        $thumbnails.eq(--viewerIndex).click();
        $btnRight.css("visibility", "visible");
        if (viewerIndex == 0) {
            $btnLeft.css("visibility", "hidden");
        }
    });
    
    $btnRight.click(function() {
        if (viewerIndex == ($thumbnails.length - 1)) { return; }
        $thumbnails.eq(++viewerIndex).click();
        $btnLeft.css("visibility", "visible");
        if (viewerIndex == ($thumbnails.length - 1)) {
            $btnRight.css("visibility", "hidden");
        }
    });
    
    $btnThumbsLeft.click(function() {
        if (currentPosition == 0) { return; }
        currentPosition -= scrollWidth;
        $thumbContainer.scrollTo('-=' + scrollWidth + 'px', duration, { axis: 'x' });
        $btnThumbsRight.css("visibility", "visible");
        if (currentPosition == 0)
        {
            $btnThumbsLeft.css("visibility", "hidden");
        }
        currentPage--;
    });
    
    $btnThumbsRight.click(function() {
        if (currentPosition == maxScrollWidth) { return; }
        currentPosition += scrollWidth;
        $thumbContainer.scrollTo('+=' + scrollWidth + 'px', duration, { axis: 'x' });
        $btnThumbsLeft.css("visibility", "visible");
        if (currentPosition == maxScrollWidth)
        {
            $btnThumbsRight.css("visibility", "hidden");
        }
        currentPage++;
    });
    
    $thumbnails.eq(0).click();
};

function initializeItemImages() {
    var $itemImages = $("div.item #images img");
    var show = function() {
        var url = $(this).attr("src");
        url = url.replace("-small", "-medium");
        var $img = $("div.item .itemImage img");
        $img.attr("src", url);
    };
    $itemImages.click(show);
};