var current_gallery = 0;
var current_gallery_length = 0;
var DIVIDER = 10;
var animating = false;
var current_photo = 0;
$(document).ready(function(){

    $.ajax({
          type: "GET",
          url: "xml/gallery.xml",
          dataType: "xml",
          complete: function(data) {
            json = $.xmlToJSON(data.responseXML);
            set_gallery(0, 0);
            }
    });
    
    $('#contact').click( function (e) {
        $('#loading').hide();
        $('#gallery-wrap').hide();
        $('#contact-content').show();
        $('#one').hide();
        $('#two').hide();
        $('#three').hide();
        current_gallery = -1;
        current_photo = 0;
    });
    
    $('#previous-btn, #next-btn').hover(
      function () {
        $(this).css('background-position', 'bottom left');
      }, 
      function () {
        $(this).css('background-position', 'top left');
      }
    );
    
    $('#next-btn').click( function (e) {
        if (current_photo+1 < current_gallery_length && animating == false) {
            gallery_move(current_photo+1);
        }
    });
    
    $('#previous-btn').click( function (e) {
        if (current_photo-1 >= 0 && animating == false) {
            gallery_move(current_photo-1);
        }
    });
    
    $('#fashion, #music, #people, #scapes, #contact, #one, #two, #three').hover(
      function () {
        $(this).css('background-position', 'top left');
      }, 
      function () {
        $(this).css('background-position', 'bottom left');
      }
    );
    
    $('#fashion').addClass("active");
    $('#fashion, #music, #people, #scapes, #contact').click( function (e) {
        e.preventDefault();
        $('#nav .active').removeClass("active");
        $(this).addClass("active");
    });
    
    $('#one, #two, #three').click( function (e) {
        e.preventDefault();
    });
    
    $('#fashion').click( function () {
        if (current_gallery != 0)
            set_gallery(0, 0);
    });
    
    $('#music').click( function () {
        if (current_gallery != 1)
        set_gallery(1, 0);
    });
    
    $('#people').click( function () {
        if (current_gallery != 2)
        set_gallery(2, 0);
    });
    
    $('#scapes').click( function () {
        if (current_gallery != 3)
        set_gallery(3, 0);
    });
    
    $('#one').click( function () {
        set_gallery(current_gallery, 0);
    });
    
    $('#two').click( function () {
        set_gallery(current_gallery, 1);
    });
    
    $('#three').click( function () {
        set_gallery(current_gallery, 2);
    });
});

function set_gallery(gallery, page) {
    $('#gallery-wrap').hide();
    $('#contact-content').hide();
    $('#loading').show();
    current_photo = 0;
    
    $('#gallery-content').html("");
    $('#gallery-content').css("left", 0);
    
    
    if (json.gallery[gallery].page[0] && json.gallery[gallery].page[1] && json.gallery[gallery].page[2]) {
        $('#one').show();
        
        $('#numbers .active').removeClass("active");
        if (page == 0)
            $("#one").addClass("active");
        else if (page == 1)
            $("#two").addClass("active");
        else if (page == 2)
            $("#three").addClass("active");
    }
    else {
        $('#one').hide();
    }
    if (json.gallery[gallery].page[1])
        $('#two').show();
    else
        $('#two').hide();
    if (json.gallery[gallery].page[2])
        $('#three').show();
    else
        $('#three').hide();
    
    
    current_gallery = gallery;
    current_gallery_length = json.gallery[gallery].page[page].photo.length;
    var ypos = 0;
    var _images = new Array();
    for(var i = 0; i < current_gallery_length; i++) {
        var id = 'photo-'+i;
        var photo = json.gallery[gallery].page[page].photo[i];
        $("#gallery-content").append('<img src="photos/'+photo.url+'" alt="" class="gallery-image" id="'+id+'" />');
        $("#"+id).css("left", ypos);
        ypos += DIVIDER+parseInt(photo.width);
        
        /*
        $("#"+id).click(function() {
            id_array = $(this).attr("id").split("-");
            new_id = parseInt(id_array[1]);
            gallery_move(new_id);
        });
        */
        _images.push('photos/'+photo.url);
    }
    var loaded_count = 0;
    $.each(_images,function(e) {
        $(new Image()).load(function() {
            loaded_count++;
            //alert(loaded_count+", "+_images.length);
            if (loaded_count == _images.length) {
                $('#loading').hide();
                $('#contact-content').hide();
                $('#gallery-wrap').show();
            }
        }).attr('src',this);
    });
    
    $("#gallery-content").append('<a href="" id="back"><img src="images/buttons/backbutton.png" alt="&laquo;Back" /><a/>');
    $("#back").css("left", ypos+20);

    $('#back').click( function (e) {
        e.preventDefault();
        current_photo = 0;
        animating = true;
        $("#gallery-content").animate({left: 0}, 1000, 'easeOutExpo', function(){animating = false});
    });
    
}

function gallery_move(new_id) {
    
    var animate = true;
    var gallery_width = $("#gallery").width();
    var current_position = 0;
    var new_distance = calculate_travel(current_photo, new_id);
    
    //if (current_photo == 0) {
    //    current_position = ((gallery_width/2)-($('#photo-'+current_photo).width()/2));
    //}
    //else {
        current_position = parseInt($("#gallery-content").css("left"));
    //}
    
    if (new_id == current_photo) {
        animate = false;
    }
    else if (new_id == 0) {
        var new_left = 0;
    }
    else if (new_id > current_photo) {
        //alert("next");
        var new_left = current_position - new_distance;
    }
    else if (new_id < current_photo) {
        //alert("prev");
        var new_left = current_position + new_distance;
    }
    else {
        animate = false;
    }
    if (animate == true) {
        animating = true;
        $("#gallery-content").animate({left: new_left}, 500, 'easeOutExpo', function(){animating = false});
    }
    current_photo = new_id;

}

function calculate_travel(current_id, new_id) {
    var new_distance = 0;
    if (current_id < new_id) {
        var first_id = current_id;
        var second_id = new_id;
    }
    else {
        var first_id = new_id;
        var second_id = current_id;
    }
    for(var i = first_id; i < second_id; i++) {
        if (i == first_id || i == second_id) {
            //var new_width = $('#photo-'+i).width()/2;
            var new_width = $('#photo-'+i).width();
        }
        else {
            var new_width = $('#photo-'+i).width();
        }
        
        //if (i > first_id) {
            new_distance += DIVIDER;
        //}
        new_distance += new_width;
    }
    return new_distance;
}