var TXT_DIV = "div.header-middle-content-left-product-description-contetnt";
var IMG_DIV = "div.header-middle-content-picture";
var NAV_DIV = "div.header-middle-content-items-navigation";
var NAV_ITEM_ID = "header-middle-content-items-navigation-item";

var ANIM_SPEED = 400;
var SWITCH_DELAY = 12000;

var numberOfItems = itemPresenterImg.length;
var currentItemID = 0; // It is also the start element ID
var animating = false;
var animationTimer = null;
var windowBlured = false;

imagesToPreload.push(IMAGES_URL+"../arrow_big_left_over.png");
imagesToPreload.push(IMAGES_URL+"../arrow_big_right_over.png");
imagesToPreload.push(IMAGES_URL+itemPresenterImg[currentItemID]);

function preloadAllPresenterImages() {
    for(var i = 0; i < numberOfItems; i++) {
        imagesToPreload.push(IMAGES_URL+itemPresenterImg[i]);
    }
}

function setItem(itemID) {
    // Update text, links and graphics
    jQuery(TXT_DIV).html(itemPresenterTxt[itemID]);
    jQuery(IMG_DIV).css({'background-image' : 'url('+IMAGES_URL+itemPresenterImg[itemID]+')', 'background-repeat' : 'no-repeat', 'background-position' : 'bottom center'});
    if(itemPresenterLnk[itemID].length > 0) jQuery(IMG_DIV).html('<a href="'+itemPresenterLnk[itemID]+'"></a>');
    else                                    jQuery(IMG_DIV).html('');

    // Update navigation squares
    jQuery('.header-middle-content-items-navigation-square-active').removeClass('header-middle-content-items-navigation-square-active').addClass('header-middle-content-items-navigation-square');
    jQuery('#'+NAV_ITEM_ID+itemID).addClass('header-middle-content-items-navigation-square-active');

    if(itemPresenterLnk[itemID].length > 0 && itemPresenterLab[itemID].length > 0) {
        jQuery(IMG_DIV+' a').html(itemPresenterLab[itemID]);
        jQuery(IMG_DIV+' a').mouseenter(function() { jQuery(IMG_DIV+' a .middle-ribbon-item-label').fadeTo(ANIM_SPEED, 0.5); });
        jQuery(IMG_DIV+' a').mouseleave(function() { jQuery(IMG_DIV+' a .middle-ribbon-item-label').fadeTo(ANIM_SPEED, 0.0); });
    }
}

// Jump immediately to an item
function setItemTo(itemID) {
    clearTimeout(animationTimer);
    setItem(itemID);
    currentItemID = itemID;
    switchItemsConstantly();
}

// Switch to an item animating
function switchItem(direction) {
    // Block switching items when the window/tab is inactive
    if(windowBlured == true) {
        return;
    }

    // Block switching items while animating
    if(animating == true) {
        return;
    }
    animating = true;
    setTimeout('animating = false', ANIM_SPEED*2);

    if(direction == 'forward') {
        currentItemID = (currentItemID+1) % numberOfItems;
    }
    else if(direction == 'backward') {
        currentItemID = (currentItemID-1+numberOfItems) % numberOfItems;
    }

    // Animate
    jQuery(TXT_DIV).slideToggle(ANIM_SPEED);
    jQuery(IMG_DIV).fadeOut(ANIM_SPEED);
    setTimeout('setItem('+currentItemID+')', ANIM_SPEED);
    jQuery(TXT_DIV).slideToggle(ANIM_SPEED);
    jQuery(IMG_DIV).fadeIn(ANIM_SPEED);
}

function switchItemBackward() {
    clearTimeout(animationTimer);
    switchItem('backward');
    switchItemsConstantly()
}

function switchItemForward() {
    clearTimeout(animationTimer);
    switchItem('forward');
    switchItemsConstantly()
}

function switchItemsConstantly() {
    animationTimer = setTimeout('switchItem(\'forward\'); switchItemsConstantly();', SWITCH_DELAY);
}

// Display navigation menu (squares with numbers representing items)
function addItemsSwitchers() {
    var html = '<span class="header-middle-content-items-navigation-arrow-left" onclick="switchItemBackward()"></span>';

    for(var i = 0; i < numberOfItems; i++) {
        html += '<span id="'+NAV_ITEM_ID+i+'" onclick="setItemTo('+i+')" class="header-middle-content-items-navigation-square';
        if(i == 0) html += '-active';
        html += '"><span>'+(i+1)+'</span></span>';
    }

    html += '<span class="header-middle-content-items-navigation-arrow-right" onclick="switchItemForward()"></span>';

    jQuery(NAV_DIV).html(html);
}

function setUpItemPresenter() {
    switchItem('');

    // Start a recurring animation beginning with the current item
    switchItemsConstantly();

    setTimeout('preloadAllPresenterImages(); addItemsSwitchers()', 2000);

    jQuery("div.header-middle-content-left-outter-arrow").click(function () {
        switchItemBackward();
    });

    jQuery("div.header-middle-content-right-outter-arrow").click(function () {
        switchItemForward();
    });

    jQuery(window).blur(function(e) {
        windowBlured = true;
    });

    jQuery(window).focus(function(e) {
        windowBlured = false;
    });
}

jQuery(document).ready(function() {
    setUpItemPresenter();
});