var vpHeight = 150;
var vpWidth = 340;
var spotlightData = {};
var secondaryVPSAHeightOffset;
var targetActiveThumbnailPosition = 100;
var activeThumbnailIndex; //the index of the thumbnail that is currently at the bottom of the viewPaneList
var tnHeight = 150; //the height of thumbnails
var liWidth = 580; //the width of large images
var activeViewPaneScrollArea = "#currentViewPaneScroll1";
var secondaryViewPaneScrollArea = "#currentViewPaneScroll2";
var spotlightTimer;

//$(function () {
//    LoadSpotlightData();
//});
$(document).ready(LoadSpotlightData);

function LoadSpotlightData() {
    $.ajax({
        url: "js/settings_data/spotlightdata.js",
        dataType: 'json',
        data: {},
        success: function (data) {
            spotlightData = data;
            //preloadSpotlightImages();
            initSpotlight()
        },
        error: function (msg) {
            alert("error!");
        }
    });
}
function preloadSpotlightImages() {
    var arrImages = new Array();
    for (s in spotlightData.items) {
        arrImages.push(spotlightData.items[s].thumbnailImage);
        arrImages.push(spotlightData.items[s].largeImage);
    }
    $.preload(arrImages, {
        base: 'images/spotlight_widget/',
        onComplete: function () {
            initSpotlight();
        }
    });
}
function initSpotlight() {
    /* at this point we should have the spotlight data so let's load the spotlight widget:
     * - fill the viewPaneList with the thumbnails
     * - assign click event handlers on the thumbnails
     * - load the first item in the viewPaneList into the main viewPane and set up event handlers
     */

    //hide loading images
    $(".spotlight_loading").hide();

    if (spotlightData.items.length < 4) {
        alert("Must have at least 4 spotlight items");
        return;
    }
    for (vptn in spotlightData.items) {
        var $thumbItem = $("<li><a href='#' rel='" + vptn + "'><img src='images/spotlight_widget/" + spotlightData.items[vptn].thumbnailImage + "' alt='' /><div class='thumbnail_caption'>" + spotlightData.items[vptn].caption + "</div></a></li>");
        $("#viewPaneScrollArea").append($thumbItem);
        
        if (vptn == "0") {
            $($thumbItem).css("top", "0px");
        } else {
            $($thumbItem).css("top", (tnHeight * (parseInt(vptn))) + "px");
        }
    }

    //create item selectors:
    for (var v = 0; v < spotlightData.items.length - 2; v++) {
        //add item selector
        var $itemSelector = $("<a href='#' rel='" + v + "'><img src='images/spotlight_widget/dot.png' alt=''/></a>");
        $("#vpItemSelector").append($itemSelector);
    }

    $("#viewPaneScrollArea").css("top", "0px");
    $(secondaryViewPaneScrollArea).css("left", liWidth);
    //set the active thumbnail and large image
    moveToThumbnailIndex(1);
    updateSelectedSelector();
    loadViewPaneData();

    //set up event handlers
    $("#vpItemSelectorLeft > a").click(leftSelectorClicked);
    $("#vpItemSelectorRight > a").click(rightSelectorClicked);
    $(".scroll_area li a").click(thumbnailSelected);
    $("#vpItemSelector a").click(itemSelectorSelected);
    $(".quote_request").click(quoteRequested);

    startSpotlightTimer();
}

function startSpotlightTimer() {
    spotlightTimer = setInterval("moveIndexRight()", 5000);
}
function stopSpotlightTimer() {
    clearTimeout(spotlightTimer);
}

function thumbnailSelected(e) {
    //alert($(e.currentTarget).attr("rel"));
    //find the thumbnail that points to the selected items large picture
    for (var i in spotlightData.items) {
        if (spotlightData.items[i].showLargeImageOfItem == $(e.currentTarget).attr("rel")) {
            moveToThumbnailIndex(i);
            break;
        }
    }
    loadViewPaneData();
    updateSelectedSelector();
    stopSpotlightTimer();
    return false;
}
function itemSelectorSelected(e) {
    stopSpotlightTimer();
    var i = $(e.currentTarget).attr("rel")
    moveToThumbnailIndex(i);
    loadViewPaneData();
    updateSelectedSelector();
    return false;
}
function updateSelectedSelector() {
    var tmpActiveThumbIndex = parseInt(activeThumbnailIndex);
    switch (tmpActiveThumbIndex) {
        case 4:
            tmpActiveThumbIndex = 0
            break
        case 5:
            tmpActiveThumbIndex = 1
            break;
    }
    $("#vpItemSelector > a > img").attr("src", "images/spotlight_widget/dot.png");
    $("#vpItemSelector > a[rel='" + tmpActiveThumbIndex + "'] > img").attr("src", "images/spotlight_widget/dot_active.png");
}

function leftSelectorClicked() {
    stopSpotlightTimer();
    moveIndexLeft();
    return false;
}
function rightSelectorClicked() {
    stopSpotlightTimer();
    moveIndexRight();
    return false;
}

function moveIndexRight() {
    //up
    if (spotlightData.items[activeThumbnailIndex].onRightMoveToIndex != null) {
        activeThumbnailIndex = parseInt(spotlightData.items[activeThumbnailIndex].onRightMoveToIndex);
        var toThumbnailPosition = $("#viewPaneScrollArea").find("li > a[rel='" + activeThumbnailIndex + "']").last().parent().position().top;
        var topVal = $("#viewPaneList").height() - toThumbnailPosition - tnHeight;
        $("#viewPaneScrollArea").css("top", topVal + "px");
    }

    activeThumbnailIndex++;
    var toThumbnailPosition = $("#viewPaneScrollArea").find("li > a[rel='" + activeThumbnailIndex + "']").parent().position().top;
    var topVal = $("#viewPaneList").height() - toThumbnailPosition - tnHeight;
    $("#viewPaneScrollArea").animate({
        top: topVal
    }, 1000, thumbnailMoveComplete);
    loadLargePictureArea(activeThumbnailIndex);
    updateSelectedSelector();
    loadViewPaneData();
}
function moveIndexLeft() {
    //down
    if (spotlightData.items[activeThumbnailIndex].onLeftMoveToIndex != null) {
        activeThumbnailIndex = parseInt(spotlightData.items[activeThumbnailIndex].onLeftMoveToIndex);
        var toThumbnailPosition = $("#viewPaneScrollArea").find("li > a[rel='" + activeThumbnailIndex + "']").last().parent().position().top;
        var topVal = $("#viewPaneList").height() - toThumbnailPosition - tnHeight;
        $("#viewPaneScrollArea").css("top", topVal + "px");
    }

    activeThumbnailIndex--;
    var toThumbnailPosition = $("#viewPaneScrollArea").find("li > a[rel='" + activeThumbnailIndex + "']").parent().position().top;
    var topVal = $("#viewPaneList").height() - toThumbnailPosition - tnHeight;
    $("#viewPaneScrollArea").animate({
        top: topVal
    }, 1000, thumbnailMoveComplete);
    loadLargePictureArea(activeThumbnailIndex);
    updateSelectedSelector();
    loadViewPaneData();
}
function moveToThumbnailIndex(i) {
    if (spotlightData.items[i].selectorMoveToIndex != null) {
        i = spotlightData.items[i].selectorMoveToIndex;   
    }
    var toThumbnailPosition = $("#viewPaneScrollArea").find("li > a[rel='" + i + "']").parent().position().top;
    activeThumbnailIndex = parseInt(i)
    //translate the "to thumbnail" position to a top value

    var topVal = $("#viewPaneList").height() - toThumbnailPosition - tnHeight;

    $("#viewPaneScrollArea").animate({
        top: topVal
    }, 1000, thumbnailMoveComplete);
    activeThumbnailIndex = i;
    loadLargePictureArea(i);
}
function thumbnailMoveComplete() {
    
}
function loadViewPaneData() {
    var thumbnailItem = spotlightData.items[activeThumbnailIndex];
    var spotlightItem = spotlightData.items[thumbnailItem.showLargeImageOfItem];
    
    $(secondaryViewPaneScrollArea).find(".caption").html(spotlightItem.caption);
    $(secondaryViewPaneScrollArea).find(".sub_caption").html(spotlightItem.subCaption);
    $(secondaryViewPaneScrollArea).find(".more_info").html(spotlightItem.moreInfoText);
    $(secondaryViewPaneScrollArea).find(".more_info").attr("href", spotlightItem.moreInfoLink);
    if (spotlightItem.quoteRequestVisible) {
        $(secondaryViewPaneScrollArea).find(".quote_request").show();
        $(secondaryViewPaneScrollArea).find(".quote_request").attr("rel", spotlightItem.quoteRequestName);
    } else {
        $(secondaryViewPaneScrollArea).find(".quote_request").hide();
    }
}
function loadLargePictureArea(i) {
    var spotlightItem = spotlightData.items[i];
    var largeSpotlightItem = spotlightData.items[spotlightItem.showLargeImageOfItem];
    $(secondaryViewPaneScrollArea).css("background-image", "url(images/spotlight_widget/" + largeSpotlightItem.largeImage + ")");
    $(secondaryViewPaneScrollArea).animate({
        left: 0
    }, 1000);
    $(activeViewPaneScrollArea).animate({
        left: -liWidth
    }, 1000, function () {
        var tmpActiveVPSA = activeViewPaneScrollArea;
        activeViewPaneScrollArea = secondaryViewPaneScrollArea;
        secondaryViewPaneScrollArea = tmpActiveVPSA;
        //line up the new secondary view pane scroll area for the next transition
        $(secondaryViewPaneScrollArea).css("left", liWidth);
    });
}
function quoteRequested(e) {
    showQuoteRequestService($(e.currentTarget).attr("rel"), true);
    showQuoteRequestDialog();
    return false;
}