"use strict";
/*global $, IE, VisitFeatures*/

$(function () {
    var fade1 = $("#preview-fade-1"),
    fade2 = $("#preview-fade-2"),
    fade1Preview = fade1.find(".previewText"),
    fade2Preview = fade2.children(".previewText"),
    fade1Title = fade1Preview.find('h1'),
    fade2Title = fade2Preview.find('h1'),
    fade1TitleLink = fade1.find("a"),
    fade2TitleLink = fade2.find("a"),
    fade1Desc = fade1Preview.find('span'),
    fade2Desc = fade2Preview.find('span'),
    fadeLock = false,
    startIndex = 0,
    currentIndex = 0,
    defaultTimeout = 7,
    preloadTick = 6,
    nextTimeout = defaultTimeout,
    preloaded = {},
    previewTemplate = '<li class="left{cls} picture-box">' +
    '<div class="left picture-box-frame">' +
    '<a href="#{id}">' +
    '<img class="left" src="' + Site.mainAddress + 'cache/visit_features/{id}-picture_1-160x71-crop.jpg">' +
    '</a>' +
    '<div class="clr"></div>' +
    '<a class="tc2" href="#{id}">' +
    '<span class="left ts2">' +
    '{title}' +
    '</span>' +
    '</a>' +
    '</div>' +
    '</li>',
    swapImage = function (img, title, description, id) {
        if (!fadeLock) {
            fadeLock = true;
            fade2Title.html(title);
            fade2Desc.html(description);

            fade2.css('background-image', 'url(' + img + ')');

            if (IE === 6) {
                fade1Preview.fadeOut(1000);
            }
            fade2.fadeIn(1000, function () {
                fade1.css('background-image', 'url( ' + img + ')');
                fade1Title.html(title);
                fade1Desc.html(description);
                fade1TitleLink.attr('href', 'feature_view.php?id=' + id);

                if (IE === 6) {
                    fade1Preview.fadeTo(0, 1);
                }

                fade2.hide();
                fadeLock = false;
            });
        }
    },
    preload = function (i) {
        if (!preloaded[i] && VisitFeatures.records && VisitFeatures.records[i]) {
            preloaded[i] = new Image(543, 254);
            preloaded[i].src = Site.mainAddress + 'cache/visit_features/' + VisitFeatures.records[i].id + '-picture_1-543x254-crop.jpg';
        }
    },
    refreshImages = function () {
        var data = {}, html = '', i;
        
        for (i = startIndex; i < startIndex + 3; i += 1) {
            if (i === startIndex) {
                data.cls = '';
            } else {
                data.cls = ' ml8';
            }
            data.id = VisitFeatures.records[i].id;
            data.title = VisitFeatures.records[i].title_english;
            html += previewTemplate.supplant(data);
        }
        $("#preview-nav").html(html);
    }, 
    tick = function () {
        nextTimeout -= 1;
        if (nextTimeout === preloadTick) {
            if (currentIndex + 1 < VisitFeatures.records.length) {
                preload(currentIndex + 1);
            } else {
                preload(0);
            }
        }
        if (nextTimeout <= 0) {
            if (currentIndex + 1  < VisitFeatures.records.length) {
                currentIndex += 1;
            } else {
                currentIndex = 0;
            }
            nextTimeout = defaultTimeout;
            if (VisitFeatures.records && VisitFeatures.records[currentIndex]) {
                swapImage(Site.mainAddress + 'cache/visit_features/' + VisitFeatures.records[currentIndex].id + '-picture_1-543x254-crop.jpg', VisitFeatures.records[currentIndex].title_english, VisitFeatures.records[currentIndex].intro_english, VisitFeatures.records[currentIndex].id);
            }
        //

        }
        setTimeout(tick, 1000);
    };

    tick();

    $("#preview-nav a").live('click', function (e) {
        var id = $(this).attr('href').split('#')[1];
        e.preventDefault();
        $(VisitFeatures.records).each(function (i) {
            if (this.id === id) {
                currentIndex = i;
                nextTimeout = defaultTimeout;
                swapImage(Site.mainAddress + 'cache/visit_features/' + id + '-picture_1-543x254-crop.jpg', this.title_english, this.intro_english, id);
            }
        });
    });

    $("a[href=#preview-prev]").click(function (e) {
        e.preventDefault();
        if (startIndex > 0) {
            startIndex -= 1;
            nextTimeout = defaultTimeout;
            refreshImages();
        }
    });

    $("a[href=#preview-next]").click(function (e) {
        e.preventDefault();
        if (startIndex + 3 < VisitFeatures.records.length) {
            startIndex += 1;
            nextTimeout = defaultTimeout;
            refreshImages();
        }
    });

    $("#state-select").change(function () {
        if ($(this).val() === '1') {
            $('#USStates').show();
            $('#MXStates').hide();
        } else {
            $('#USStates').hide();
            $('#MXStates').show();
        }
    });

    /*Tabs*/
    $("#tabpane").gtab({
        select: function (id) {
            var link = $(this).find('a[href="#' + id + '"]');
            $(this).find('.tabbox-tab').removeClass('tabbox-tab').addClass('tabbox-tab-innactive');
            $(this).find('.tabbox-tab-pleft').insertBefore(link);
            $(this).find('.tabbox-tab-pright').insertAfter(link);
            link.removeClass('tabbox-tab-innactive').addClass('tabbox-tab');
        }
    });
});