$(function() {
    var page = 1;
    var image = 1;
    var images_per_page = 6;
    var width = 492;
    var image_height = $("#image_height").val();
    var cache = [];
    var first_time = true;
    
    $('#mainpicture').load(function() {
        resize_image();
    });
    
    $("[name=select_image]").each(function() {
        var cacheImage = document.createElement('img');
        cacheImage.src = 'imagecontent/' + $(this).attr('rel').split(';')[0];
        cache.push(cacheImage);    
    });

    
    $("[name=thumb_left] img").addClass('disabled');
    $("[name=image_left] img").addClass('disabled');
    
    var available_height = $(window).height() - 330;
    $(".mainpicture .navigate_left, .mainpicture .navigate_right").css('top', 170 + available_height / 2 - 25);
    
    $("[name=thumb_left]").click(function(event) {
        event.preventDefault();
        if (page > 1)
        {
            page--;
            $("[name=thumb_right] img").removeClass('disabled');
            if (page == 1)
                $("[name=thumb_left] img").addClass('disabled');
            navigate();
        }
    });
    
    $("[name=thumb_right]").click(function(event) {
        event.preventDefault();
        if (page < $("#pages").val())
        {
            page++;
            $("[name=thumb_left] img").removeClass('disabled');
            if (page == $("#pages").val())
                $("[name=thumb_right] img").addClass('disabled');
            navigate();
        }
    });
    
    $(document).keydown(function(event) {
        switch (event.keyCode) {
            case 37:
                nextImage('left');
                break;
            case 39:
                nextImage('right');
                break;
        }
    });
    
    $("[name=image_left], [name=image_right]").click(function(event) {
        event.preventDefault();
        if ($(this).attr('name') == 'image_left')
            nextImage('left');
        else
            nextImage('right');
    });
    
    function nextImage(direction)
    {
        if (direction == 'left')
            $("#thumb_list li:eq(" + (image - 1) + ")").prev().find("a").click();
        else
            $("#thumb_list li:eq(" + (image - 1) + ")").next().find("a").click();
    }
    
    $("[name=select_image]").click(function(event) {
        event.preventDefault();
        var explode = $(this).attr('rel').split(';');
        var src = explode[0];
        image_height = parseInt(explode[1]);
        $("#mainpicture").attr('src', 'imagecontent/' + src);
        image = $(this).parents("li").prevAll().length;
        $("[name=image_left] img, [name=image_right] img").removeClass('disabled');
        if (image == 1)
            $("[name=image_left] img").addClass('disabled');
        if (image == $("#thumb_list > li").size())
            $("[name=image_right] img").addClass('disabled');
        resize_image();
        var new_page = Math.ceil(image / images_per_page);
        while (new_page != page)
        {
            if (new_page < page)
                $("[name=thumb_left]").click();
            else
                $("[name=thumb_right]").click();
        }
    });
    
    $(window).resize(function() {
        resize_image();
        var available_height = $(window).height() - 330;
        $(".mainpicture .navigate_left, .mainpicture .navigate_right").css('top', 170 + available_height / 2 - 25);
    });
    
    function navigate()
    {
        $("#thumb_list").animate({marginLeft: (-(page-1) * width) + 'px'});
    }
    
    function resize_image()
    {
        $("#mainpicture").height(image_height);
        var available_height = $(window).height() - 330;
        if (image_height > available_height)
        {
            $("#mainpicture").css('padding-top', 0);
            $("#mainpicture").height(available_height);
        }
        else
        {
            $("#mainpicture").css('padding-top', 0.5 * (available_height - image_height));
        }
        
        if (! $(".mainpicture").is('visisble'))
            $(".mainpicture").fadeIn();
            
        $(".mainpicture .navigate_left").css('left', $(window).width() / 2 - $("#mainpicture").width() / 2 - 50);
        $(".mainpicture .navigate_right").css('right', $(window).width() / 2 - $("#mainpicture").width() / 2 - 50);
    }
});