// JavaScript for the Product Detail Page.
$(document).ready(function() {
    
    $('#storeBreadCrumbs').append(' > ' + $('#productColumn2 h1').html());

    // Inside Corners
    var innerCorners = '<img src="/container-corner-top-left.gif" width="11" height="11" alt="" class="cornerImage" style="top:-1px; left:-1px;" />';
    innerCorners += '<img src="/container-corner-top-right.gif" width="11" height="11" alt="" class="cornerImage" style="top:-1px; right:-1px;" />';
    innerCorners += '<img src="/container-corner-bottom-left.gif" width="11" height="11" alt="" class="cornerImage" style="bottom:-1px; left:-1px;" />';
    innerCorners += '<img src="/container-corner-bottom-right.gif" width="11" height="11" alt="" class="cornerImage" style="bottom:-1px; right:-1px;" />';
    
    $('#productPageContainer').append(innerCorners); // assign the corners to the main product content container.
    $('#relatedItemsContainer').append(innerCorners); // assign the corners to the related content container.
    
    // Product Detail Container Corners
    var productDetailContainerCorners = '<img src="/prod-desc-corner-top-left.gif" width="13" height="13" alt="" class="cornerImage" style="top:-1px; left:-1px;" />';
    productDetailContainerCorners += '<img src="/prod-desc-corner-top-right.gif" width="13" height="13" alt="" class="cornerImage" style="top:-1px; right:-1px;" />';
    productDetailContainerCorners += '<img src="/prod-desc-corner-bottom-left.gif" width="13" height="13" alt="" class="cornerImage" style="bottom:-1px; left:-1px;" />';
    productDetailContainerCorners += '<img src="/prod-desc-corner-bottom-right.gif" width="13" height="13" alt="" class="cornerImage" style="bottom:-1px; right:-1px;" />';
    
    $('#productDescriptionContainer').append(productDetailContainerCorners); // assign the corners to the main product content container.
    
    $('#productTabs li').each(function() {
        $(this).find('a').click(function() {
            if ($(this).parent().attr('class') != 'current') {
                $('.productTabContent').hide(); // Hide all showing panels.
                $('#productTabs li.current').removeClass('current'); // Remove the "current" class.
                $($(this).attr('href')).fadeIn(); // Fade in the new panel.
                $(this).parent().addClass('current'); // add the "current" class to the current tab.
            }
            return false;
        });
    });
    
    $('#productTabs li:first').addClass('current');
    $('.productTabContent:first').fadeIn();
    
    // mini-reviews link
    $('#miniReviews').click(function() {
        $('.productTabContent').hide(); // Hide all showing panels.
        $('#productTabs li.current').removeClass('current'); // Remove the "current" class.
        $($(this).attr('href')).fadeIn(); // Fade in the new panel.
        $('#productTabs li a[href=' + $(this).attr('href') + ']').parent().addClass('current'); // add the "current" class to the current tab.
        return false;
    });
    
    
    // Handle the image switching here:
    
    $('#productThumbnails img').each(function() {
        $(this).click(function() {
            var thisPath = $(this).attr('src');
            $('#largeImage img').attr('src',thisPath);
        });
    });
    
    var imageModalStyles = {
        'display'        :    'none',
        'position'        :    'absolute',
        'top'            :    '25px',
        'left'            :    '0px',
        'z-index'        :    '500',
        'width'            :    '515px',
        'height'        :    '400px',
        'text-align'    :    'center',
        'border'        :    'solid 1px #9999ff',
        'background'    :    '#fff'
    }
    
    $('#largeImage img').hover(function() {
        $('#productColumn2').append('<div id="imageModal"></div>');
        $('#imageModal').css(imageModalStyles);
        var theSrc = $(this).attr('src');
        var theModalContent = '<div id="imgContent" style="width:515px; height:400px; overflow:hidden;"><img src="' + theSrc + '" alt="" /></div>';
        
        //$('#productColumn2').append(theModalContent);
        $('#imageModal').html(theModalContent + innerCorners);
        $('#imageModal').fadeIn('fast');
        
    }, function() {
        $('#imageModal').fadeOut();
        $('#imageModal').remove();
    });
    
    // Reviews Count - stuff the numeral for the amount of reviews into the minireviews area and reviews tab label.
    var reviewsCount = $('.reviewsItem').size();
    if (reviewsCount >=1) {
        $('a#miniReviews span.reviewCountStub').html(reviewsCount + ' ');
        $('#productTabs li a span.reviewCountStub').html(' (' + reviewsCount + ')');
    } else {
        $('#tab_02').prepend('<p>There are currently no reviews for this product.</p>');
    }
    
    if ( priceJson ) {
        updateProductOptionPrice();
    }
});

if ( priceJson ) {
  $("div#prodQty select").change(function() {
    updateProductOptionPrice();
  });
}

var guids = [];
function updateProductOptionPrice() {
  if ( !guids.length ) {
        // Get the order of guids that the API built; doesn't necessarily match the order
        // of product option choices being rendered in HTML
        var keyStr;
        $.each(priceJson, function(i, val) {
            keyStr = i;
            return false;
        });
        var guiAry = keyStr.split(',');
        var id;
        $.each(guiAry, function(i, val) {
            id = $("option[value='" + val + "']").parent().attr('name');
            guids.push( id.replace('optionCount', '') );
        });
    }
    // based on the order of guids, build our hash
    var hash = '';
    $.each(guids, function(i, val) {
        if ( hash ) {
          hash += ',';
        }
        hash += $("select[name='optionCount" + val + "']").val();
    });
    
    if ( priceJson[hash] ) {
        //alert(hash + ': ' + priceJson[hash]);
        var priceVar = priceJson[hash][0];
        var price = parseFloat(priceVar);
        $("span#productPrice").text('$' + price.toFixed(2));
    }
}