var currentCard;
var numCards;
var currentImageId;

function initGallery(imageId)
{
    $(".gallery_album-slider-control-images-box img").hide(); //ajax-loader;
    makeImageCards();
    currentImageId = imageId;
    currentCard = _scrollCardsToImage(imageId);
    init_handler_albumScrollButtons();
    $("#card_" + currentCard).css("left", 0).show();
    init_progressBar();
    updateProgressBar(currentCard);
    init_handler_albumImagesThumbs();
    init_handler_imageNavigation();
    action_changeActiveImage(currentImageId);
}

function init_handler_albumImagesThumbs()
{
    $(".gallery_album-slider-control-card-image").click(function() {
        var id = utils_getImageId(this);
        action_changeActiveImage(id);
        return false;        
    });
}

function utils_getImageId(cardImageElement)
{
    var id;
    if (!$(cardImageElement).hasClass("twin")) {
            id = $(cardImageElement).attr("id").substr(5);
        } else {
            var temp = $(cardImageElement).attr("id").substr(5);
            var len = temp.length;
            id = temp.substr(0, len - 2);
        }
    return id;
}

function calc_getNextImageId()
{
    var next;
    var list = $(".gallery_album-slider-control-card-image").filter(function(index){
        if (!$(this).hasClass("twin"))
        {
            return true;
        }
        return false;
    });
    var count = list.size();
    var index = list.index($("#imgc_" + currentImageId)[0]);
    if (index == count - 1)
    {
        next = $(".gallery_album-slider-control-card-image").first();
    }
    else
    {
        next = list.get(index + 1);
    }
    return utils_getImageId(next);
}

function calc_getPrevImageId()
{
    var next;
    var list = $(".gallery_album-slider-control-card-image").filter(function(index){
        if (!$(this).hasClass("twin"))
        {
            return true;
        }
        return false;
    });
    var count = list.size();
    var index = list.index($("#imgc_" + currentImageId)[0]);
    if (index == 0)
    {
        next = $(".gallery_album-slider-control-card-image").last();
    }
    else
    {
        next = list.get(index - 1);
    }
    return utils_getImageId(next);
}



function action_changeActiveImage(imageId)
{
    currentImageId = imageId;
    action_loadImageData(imageId);
    _scrollCardsToImage(imageId);    
}

function action_loadImageData(imageId)
{
        $.getJSON("/gallery/image/" + imageId, function(data){
            __updateImageData(data.url, data.rating, data.title);
        });
}

function __updateImageData(url, rating, title)
{
    $(".gallery_album-image-data-picture").fadeOut(100, function(){
        $(".gallery_album-image-data-picture").html('<img src = "' + url + '">');
        $(".gallery_album-image-data-picture img").load(function(){
            init_imageNavButtons();
        });
        $(".gallery_album-image-data-picture").fadeIn(400);
    });

    $(".gallery_album-image-title p").html(title);

    action_loadImageComments(currentImageId);

    // TODO: update rating
}

function init_handler_albumScrollButtons()
{
    $(".gallery_album-slider-control-button-left").click(function(){
        action_scrollAlbumToLeft();
    });

    $(".gallery_album-slider-control-button-right").click(function(){
        action_scrollAlbumToRight();
    });

    $(".gallery_album-slider-control-card").not("#card_" + currentCard).hide();
    $("#card_" + currentCard).show();

    $(".gallery_album-slider-control").mousewheel(function(event, delta){
        if (delta > 0)
        {
            action_scrollAlbumToLeft();
        }
        else
            action_scrollAlbumToRight();
        return false;
    });
}

function action_scrollAlbumToLeft()
{
    if (currentCard == 1) // we are at the beginning
    {
        action_scrollCard("toRight", numCards);
    }
    else
    {
        action_scrollCard("toRight", parseInt(currentCard) - 1);
    }
}

function action_scrollAlbumToRight()
{
    if (currentCard == numCards) // we are at the end
    {
        action_scrollCard("toLeft", 1);
    }
    else
    {
        action_scrollCard("toLeft", parseInt(currentCard) + 1);
    }
}


function action_scrollCard(direction, newCardNumber)
{
    $(".gallery_album-slider-control-card").not("#card_" + currentCard).css("left",770); //hide
    if (direction == "toLeft")
    {
        //newCard is already at 770px
        $("#card_" + newCardNumber).show();
        $("#card_" + currentCard).animate({ left: -770 }, {
            duration: 500,
            step: function(now, fx){
                $("#card_" + newCardNumber).css("left", 770 - Math.abs(now));
                }
            });

    }
    if (direction == "toRight")
    {
        $("#card_" + newCardNumber).css("left", -770);
        $("#card_" + newCardNumber).show();
        $("#card_" + currentCard).animate({ left: 770 }, {
            duration: 500,
            step: function(now, fx){
                $("#card_" + newCardNumber).css("left", -770 + Math.abs(now));
                }
            });
    }
    updateProgressBar(newCardNumber);
    currentCard = newCardNumber;
}

function init_progressBar()
{
    $(".gallery_album-progress-bar").click(function(e){

	var x = e.pageX - this.offsetLeft;
	var card = Math.ceil(numCards * x / 770);
    if (card > currentCard)
    {
        action_scrollCard("toLeft", card);
    }
    if (card < currentCard)
    {
        action_scrollCard("toRight", card);
    }

   });
}

function updateProgressBar(nCardNo)
{
    var percent = (nCardNo) / numCards;
    $(".gallery_album-progress-bar-inner").css("width", Math.ceil(percent * 770));
}

function init_handler_imageNavigation() //gray scroll arrows
{

    $("#gallery_album-image-prev-image").click(function(){
            action_changeActiveImage(calc_getPrevImageId());
        });

    $("#gallery_album-image-next-image").click(function(){
            action_changeActiveImage(calc_getNextImageId());
        });

    $(".gallery_album-image-gata").hover(function(){
        init_imageNavButtons();
        $("#gallery_album-image-prev-image").fadeIn();
        $("#gallery_album-image-next-image").fadeIn();


    }, function(){
        //mouse-leave
        $("#gallery_album-image-prev-image").fadeOut();
        $("#gallery_album-image-next-image").fadeOut();        
    });
}

function init_imageNavButtons()
{
    var height = parseInt($(".gallery_album-image-gata").height());
    
        $("#gallery_album-image-prev-image img").css("top", height / 2 - 80);
        $("#gallery_album-image-next-image img").css("top", height / 2 - 80);
}

function makeImageCards()
{
    var totalWidth = 0;
    var width;
    var cardIndex = 1;
    var currentCard$ = makeNewCard(cardIndex);
    currentCard$.appendTo(".gallery_album-slider-control-images-box");
    $(".gallery_album-slider-control-card-image").each(function(index, Element){
    
        width = $(this).width();
        totalWidth += (width + 4);
        if (totalWidth < 768)
        {
            $(this).clone().appendTo(currentCard$);
        }
        else
        {
            var croppedWidth = width - (totalWidth - 764);
            $(this).clone().width(croppedWidth).clone().appendTo(currentCard$);
            currentCard$ = makeNewCard(++cardIndex);
            currentCard$.appendTo(".gallery_album-slider-control-images-box")
            totalWidth = 0;
            if (croppedWidth < Math.ceil(0.7*width))
            {
                var id = $(this).attr("id");
                $(this).clone().addClass("twin").attr("id", id + "_1").appendTo(currentCard$);
                totalWidth = width;
            }            
        }

    });
    numCards = $(".gallery_album-slider-control-card").size();
    $(".gallery_album-slider-control-card").css("left", 770);
    $("#gallery_album-images-container").detach();
}

function makeNewCard(index)
{
    var result = $("<div>",
        {
        "class": "gallery_album-slider-control-card",
        id: "card_" + index
        });
    return result;
}

function _scrollCardsToImage(imageId)
{
    var cardImage$ = $("#imgc_" + imageId);
    var cardNo = $(cardImage$).parent().attr("id").substr(5);
    if (cardNo > currentCard)
    {
        action_scrollCard("toLeft", cardNo);
    }
    if (cardNo < currentCard)
    {
        action_scrollCard("toRight", cardNo);
    }
    return parseInt(cardNo);
}

function action_loadImageComments(imageId)
{
    $.get("/comments/comments_Image_" + currentImageId, function(data){
        $(".gallery_album-image-comments").html(data);    
    });
}



//////////////// <old stuff>


function initAlbumUpdateForms() {
    $("form.editor").submit(function() {
        var url = $(this).attr("action");
        var id = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: url, 
            data: $(this).serialize(),
            success: function(response)
            {
                $("#editor_status_" + id).html(response);
            }
        });
        return false;    
    });
}

function initImageEditForms()
{
    $(".button").button();
    
   
    $("form.EditImageForm").submit(function() {
        var url = $(this).attr("action");
        var id = $(this).attr("objId");
        $.ajax({
            type: "POST",
            url: url,
            data: $(this).serialize(),
            success: function(response) {
                $("#StatusMessage" + id).html(response);
            }
        });    
        return false;
    });

    $("A.DeleteLink").click(function() {
        var url = $(this).attr("action");
        var id = $(this).attr("objId");
        $.ajax({
            type: "GET",
            url: url,
            success: function(response) {
                $("#StatusMessage" + id).html(response);
            }
        });
        registerDeleteHandler();
        return false;
    });

    function registerDeleteHandler() {
        $("form.DeleteImageButton").live("submit", function() {
            var url = $(this).attr("action");
            var id = $(this).attr("objId");
            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function(response) {
                    $(".ImageDataEditor#" + id).hide(500);
                }
            });
            return false;
        });
    }
    
}

/////////////// </old stuff>