var currentYearIndex = 0;
var yearDivWidth = 186;
var contentDivWidth = 560;
var numberYearItems = 0;
var isRunning = false;
var spanYearWidth = 0;

jQuery(document).ready(function () {

    numberYearItems = jQuery('.yItems').length;

    jQuery('#YearSlider').css('width', numberYearItems * yearDivWidth);

    jQuery('#ContentSlider').css('width', numberYearItems * contentDivWidth);

    jQuery('#Container #Bottom #bottomYearSlider #SliderYearContainer #SliderYearContent').css('width', (26 * numberYearItems));

    spanYearSpace = 47;

    spanYearWidth = jQuery('#Container #Bottom #bottomYearSlider #SliderYearContainer #SliderYearContent .year:eq(0)').width();

    Startup();

    ClickNext();

    ClickPrevious();

    YearClick();

    var numberof = jQuery('#Container #Bottom #bottomYearSlider #SliderYearContainer #SliderYearContent .year').length;


    jQuery('#SliderYearContainer .year').each(function () {
        var index = jQuery('#SliderYearContainer #SliderYearContent .year').index(this);
        jQuery(this).css('left', (index + 1 / 2) * spanYearSpace - (spanYearWidth / 2));
    });

});

function setRunning() {
    isRunning = true;
    setTimeout(function () {
        isRunning = false;
    }, 500);
}

function Startup() {

    jQuery('#btnPrev').hide();

    jQuery('.yItems:eq(0)').css({ zIndex: 1000 });
    jQuery('.yItems:eq(0) .year').animate({
        "font-size": "100px",
        "line-height": "100px",
        "margin-left": "-20px",
        "margin-right": "-20px",
        "margin-bottom": "-9px",
        "width" : "226px"
    }, 0);

    jQuery('#YearSlider').css('left', yearDivWidth);

    jQuery('#SliderArrow').css('width', spanYearSpace / 2 + 4);
    jQuery('#SliderYearContainer #SliderYearContent .year:eq(0)').addClass('activeYear');

    return false;

}

function YearClick() {
    jQuery('#SliderYearContainer #SliderYearContent .year').click(function () {
        var index = jQuery('#SliderYearContainer #SliderYearContent .year').index(this);
        GoTo(index);

    });
}

function GoTo(index) {

    setRunning();

    if (index != 0)
        jQuery('#btnPrev').fadeIn('slow');
    else
        jQuery('#btnPrev').fadeOut('slow');

    if (index != numberYearItems - 1)
        jQuery('#btnNext').fadeIn('slow');
    else
        jQuery('#btnNext').fadeOut('slow');


    jQuery('#ContentSlider').animate({
        "left": -(index) * contentDivWidth
    }, 500);

    if (currentYearIndex < index) {
        jQuery('#YearSlider').animate({
            "left": -(index - 1) * yearDivWidth
        }, 500, ZoomOutYear(currentYearIndex), ZoomInYear(index));
    } else if (currentYearIndex > index) {
        jQuery('#YearSlider').animate({
            "left": -(index - 1) * yearDivWidth
        }, 500, ZoomOutYear(currentYearIndex), ZoomInYear(index));
    }

    jQuery('#SliderYearContainer #SliderYearContent .year:eq(' + currentYearIndex + ')').removeClass('activeYear');

    jQuery('#SliderYearContainer #SliderYearContent').animate({
        "marginLeft": (-470 + 47) * (Math.floor(index / 9))
    });

    jQuery('#SliderArrow').animate({
        "width": spanYearSpace * (index % 9) + spanYearSpace / 2 + 4
    }, 500, function () {
        jQuery('#SliderYearContainer #SliderYearContent .year:eq(' + index + ')').addClass('activeYear');
    });

    currentYearIndex = index;

}


function ClickNext() {
    jQuery('#btnNext').click(function () {

        if (currentYearIndex + 1 < numberYearItems && !isRunning) {
            GoTo(currentYearIndex + 1);
        }
        return false;

    });
}

function ClickPrevious() {
    jQuery('#btnPrev').click(function () {

        if (currentYearIndex > 0 && !isRunning) {
            GoTo(currentYearIndex - 1);
        }

        return false;

    });
}

function ZoomInYear(id) {
    jQuery('.yItems:eq(' + id + ')').css({ zIndex: 100 });
    jQuery('.yItems:eq(' + id + ') .year').animate({
        "font-size": "100px",
        "line-height": "100px",
        "margin-left": "-20px",
        "margin-right": "-20px",
        "margin-bottom": "-9px",
        "width": "226px"
    }, 500);
    return false;
}

function ZoomOutYear(id) {
    jQuery('.yItems:eq(' + id + ')').find('.year').animate({
        "font-size": "50px",
        "line-height": "50px",
        "margin-left": "0px",
        "margin-right": "0px",
        "margin-bottom": "0px",
        "width": "186px"
    }, 500, function () {
        jQuery(this).parent().css({ zIndex: 0 });
    });
    return false;
}