// JQuery! All we do here is initialize the scroll pane and the carousel.
//.......................................................................


$(function()
{
	$('.scroll-pane').jScrollPane();
	jQuery('#product-carousel').jcarousel({
        scroll: 1,
        initCallback: productcarousel_initCallback,
        itemLastInCallback:    productcarousel_itemLastInCallback
    });
    
    jQuery('.other-partner-logo').bind('click', function() {
    
        var itemId = parseInt(jQuery(this).attr('name'));
        $('#partnerName').html(partnerInfo[itemId][0]);
        $('#partnerDescription').html(partnerInfo[itemId][1]);
        $('.scroll-pane').jScrollPane();
    
    });
    
    jQuery('.partner-model-row').bind('click', function() {
    
        // Get appropriate IDs
        //....................
        
        var itemId = parseInt(jQuery(this).attr('name'));
        var parentId = parseInt($(this).parent().parent().attr('name'));

        // Set the category info
        //......................
        
        $('#categoryName').html(categoryInfo[parentId][0]);
        $('#categoryDescription').html(categoryInfo[parentId][1]);

        // Set the model info
        //...................
        
        $('#modelName').html(modelInfo[parentId][itemId][0]);
        $('#modelDescription').html(modelInfo[parentId][itemId][2]);
        $('#productSpecLink').attr('href', modelInfo[parentId][itemId][3]);
        
        $('.scroll-pane').jScrollPane();
    
    });
    
    jQuery('.other-partner-logo').hover(function() {
        
        var itemId = parseInt(jQuery(this).attr('name'));
        $(this).attr('src', partnerInfo[itemId][2]);
        
    }, function() {
    
        var itemId = parseInt(jQuery(this).attr('name'));
        $(this).attr('src', partnerInfo[itemId][3]);
    
    });

});









// This callback is called when the carousel is first initialized.
// It sets up the click function that handles users clicking on
// an item. The handler simply scrolls to that item's position.


function productcarousel_initCallback(carousel) {

    jQuery('.carousel-item-link').bind('click', function() {
    
        // Get the ID of the selected product
        //...................................
    
        var itemId = parseInt(jQuery(this).attr('name'));
        
        //console.log(leftItemId + " | " + itemId + " | " + rightItemId + " | Count: " + itemsCount);
        
        // Scroll the carousel
        //....................
        
        carousel.scroll(jQuery.jcarousel.intval(itemId));
        
        return false;
    });
};







// This callback is called every time the carousel moves around. Since it is called
// when the LAST VISIBILE ITEM is changed, the item ID (idx parameter) represents
// the far-right hand item in the carousel.
// From this, we calculate IDs for the left and center items, and change the selected
// and deselected states appropriately.


function productcarousel_itemLastInCallback(carousel, item, idx, state) {
    
    // We have to offset ItemIDs because they don't line up directly with carousel positions.
    // ItemIDs start at 0 and positions start at 1.
    // It goes like this:
    // Item ID:             0 1 2 3 4 5 6
    // Carousel Position:   1 2 3 4 5 6 7
    //...................................

    var leftItemId = idx - 3;
    var itemId = idx - 2;
    var rightItemId = idx - 1;
    var itemsCount = productInfo.length;
    
    if(leftItemId > 0) {
        productcarousel_deselectProduct(leftItemId);
    }
    
    if(rightItemId < itemsCount) {
        productcarousel_deselectProduct(rightItemId);
    }
    
    productcarousel_selectProduct(itemId);
};












// Deselects a product based on ID. Shrinks it's image and removes
// info in the right-hand column.

function productcarousel_deselectProduct(itemId) {

    // Display the small version of the product image
    //...............................................
    
    $('#' + itemId + '_img').attr('src', productInfo[itemId][3]);
    $('#' + itemId + '_img').removeClass('carousel-selected-item');
    
    // Clear product name/description from right-hand column
    //......................................................
    
    $('#productName').html("");
    $('#productDescription').html("");
    
}











// Selects a product based on ID. Enlarges it's image and displays info in
// the right-hand column.

function productcarousel_selectProduct(itemId) {

    // Bring up the large detail image for the selected item
    //......................................................

    $('#' + itemId + '_img').attr('src', productInfo[itemId][2]);
    $('#' + itemId + '_img').addClass('carousel-selected-item');

    // Change the description/name in the right column
    //................................................

    $('#productName').html(productInfo[itemId][0]);
    $('#productDescription').html(productInfo[itemId][1]);
    $('#productSpecLink').attr('href', productInfo[itemId][4]);

    $('.scroll-pane').jScrollPane();
    
}