var leftStop = 20;
var coverIndex = 0;
var _width = 334;
var _height = 259;
var _top = 0;
var _left = 0;
var imageOut;
var imageIn;

var isAnimating = true;

$(window).bind('keydown', function (event) {
    switch (event.keyCode) {
        case 37: rotateLeft();
            break;
        case 39: rotateRight();
            break;
    }
});

//Remember image size (wait until load due bug in Chrome)
$(window).bind('load', function () {
    imageOut = $('div.projectFlow img.imageOut');
    imageIn = $('div.projectFlow img.imageIn');

    //    _width = imageOut.width();
    //    _height = imageOut.height();
    _left = imageOut.position().left;
    _top = imageOut.position().top;

    imageOut.hide();

    var startImage = new Image();
    startImage.src = projectList[0][1];

    $(startImage).bind('load', function () {
        imageOut.attr('src', startImage.src);
        imageOut.fadeIn();
        $('div.projectFlow div.navButton').show();
        isAnimating = false;
    });

    //Preload other images
    var img = new Image();
    for (var i = 1; i < projectList.length; i++) {
        img.src = projectList[i][1];
    }
});

function rotateRight() {

    rotate(-1, 20, 530);
}

function rotateLeft() {

    rotate(1, 530, 20);
}



function rotate(i, x1, x2) {
    if (isAnimating)
        return;

    isAnimating = true;
    coverIndex += i;
    if (coverIndex < 0)
        coverIndex = projectList.length - 1;
    if (coverIndex > projectList.length - 1)
        coverIndex = 0;

    $('.lastButton img').fadeOut(500, function () { $(this).fadeIn(500); });
    $('.nextButton img').fadeOut(500, function () { $(this).fadeIn(500); });
    $('body div#wrapper div.projectText').fadeOut(500, function () {
        $(this).find('h2').text(projectList[coverIndex][0]);
        $(this).find('a.fullstory').attr('href', projectList[coverIndex][2]);
        $(this).find('p.statement').text(unescape(projectList[coverIndex][3]));
        $(this).find('p.statementperson').text(projectList[coverIndex][4]);
        $(this).fadeIn(500);
    });

    imageIn.attr('src', projectList[coverIndex][1]);
    imageIn.show();

    imageIn.css({ opacity: 0.5, left: x1, top: 100, width: _width * 0.4, height: _height * 0.4 });

    imageIn.animate({ opacity: 1, left: _left, top: _top, width: _width, height: _height }, 850);
    imageOut.animate({ opacity: 0.5, left: x2, top: 100, width: _width * 0.4, height: _height * 0.40 },
        1000, function () {
            imageOut.attr('src', imageIn.attr('src'));
            imageOut.attr('style', imageIn.attr('style'));
            imageIn.hide();
            isAnimating = false;
        });
}