$(document).ready(function() {

    var data = [
        { photo:'media/images/photo1.jpg', desc:""},
        { photo:'media/images/photo2.jpg', desc:""},
        { photo:'media/images/photo3.jpg', desc:""},
        { photo:'media/images/photo4.jpg', desc:""},
        { photo:'media/images/photo5.jpg', desc:""},
        { photo:'media/images/photo6.jpg', desc:""},
        { photo:'media/images/photo7.jpg', desc:""},
        { photo:'media/images/photo8.jpg', desc:""},
        { photo:'media/images/photo9.jpg', desc:""},
        { photo:'media/images/photo10.jpg', desc:""},
        { photo:'media/images/photo11.jpg', desc:""},
        { photo:'media/images/photo12.jpg', desc:""},
        { photo:'media/images/photo13.jpg', desc:""},
        { photo:'media/images/photo14.jpg', desc:""},
        { photo:'media/images/photo15.jpg', desc:""},
        { photo:'media/images/photo16.jpg', desc:""},
        { photo:'media/images/photo17.jpg', desc:""},
        { photo:'media/images/photo18.jpg', desc:""},
        { photo:'media/images/photo19.jpg', desc:""},
        { photo:'media/images/photo21.jpg', desc:""},
        { photo:'media/images/photo22.jpg', desc:""},
        { photo:'media/images/photo23.jpg', desc:""},
        { photo:'media/images/photo24.jpg', desc:""},
        { photo:'media/images/photo26.jpg', desc:""},
        { photo:'media/images/photo27.jpg', desc:""},
        { photo:'media/images/photo28.jpg', desc:""},
        { photo:'media/images/photo29.jpg', desc:""}
    ];

    var index = 0;
    var numPhotos = data.length;

    function next() {
        index = index+1 == numPhotos ? 0 : index+=1;
        changePhoto();
    }

    function prev() {
        index = index == 0 ? numPhotos-1 : index-=1;
        changePhoto();
    }

    // arrow click handlers
    $('#right .nav .arrows .arrow_right').click(next);
    $('#right .nav .arrows .arrow_left').click(prev);


    function changePhoto() {

        var imageHtml = '<img id="photo' + index + '" src="' + data[index].photo + '" width="536" height="670">';
        $('#right .photo').append(imageHtml);

        $('#photo'+index).load(function() {
            $(this).fadeIn(600, function() {
                if($('#right .photo img').length > 1) {
                    var bottomImage = $('#right .photo img').get(0);
                    $(bottomImage).remove();
                }
                preloadNextImages();
            });
        });



        // set text
        $('#right .nav .description .count').html((index+1) + "/" + numPhotos);
        $('#right .nav .description .text').html(data[index].desc);
    }

    function preloadNextImages() {
        // preload one photo before and after current one 
        var tempIndex = index;
        var nextImage = data[tempIndex+1 == numPhotos ? 0 : tempIndex+=1].photo;
        tempIndex = index;
        var prevImage = data[tempIndex == 0 ? data.length-1 : tempIndex-=1].photo;
        $([nextImage, prevImage]).preload();
    }

    // chagne arrow opacity on rollover
    $('#right .nav .arrows img').hover(function() {
        $(this).stop().clearQueue().animate({'opacity':0.8}, 200);
    }, function() {
        $(this).stop().clearQueue().animate({'opacity':0.5}, 200);
    });
    $('#right .nav .arrows img').css('opacity', 0.5);

    // enable arrow keys
    $(document).keyup(function(e) {
        if(e.keyCode == 39) {	// right key
            next();
        }
        if(e.keyCode == 37) {	// left key
            prev();
        }
    });

    changePhoto();

});