var album = 0; //The currently selected album
var current = 0; //The currently selected image
var view; //The currently selected view
var data = []; //The data for the currently selected album
var title = ""; //The title of the currently selected album
var sprite = ""; //The sprite of the currently selected album
var gridView, mosaicView; //the views, defined later

$(document).ready(function() {
    view = gridView; //this referrs to a function that we havn't created yet
    albumView(); //render the album view
   
    //set up the jQuery UI slider for later use by the grid view
    $("#slider").slider({
    	value: 75,
    	max: 150,
    	min: 50,
    	slide: function(event, ui) {
    	    $('#content').css('font-size',ui.value+"px");
    	}
    });
	
    //setup the buttons for switching views
    $("#grid").click(function() {
        $("#views a.selected").removeClass("selected");
        $(this).addClass("selected");
        gridView();
    });
    
    $("#mosaic").click(function() {
        $("#views a.selected").removeClass("selected");
        $(this).addClass("selected");
        mosaicView();
    });
    
    $("#slideshow").click(function() {
	    slideshowView();
	});
    
});

function albumView() {
    //remove everything from the content area that might have been there from other views,
    //as well as the back button (used later) 
    $("#content *").remove();
    $(".button").remove();
    
    //add the album_view class to the content view, and extent it to the bottom of the window
    //also, hide the footer, and set the title of the gallery (in the data file)
    $("#content").attr("class", "").addClass("album_view"); 
    $("#content").css({ bottom: "0px", top: "57px" }); 
    $("#controls").hide();
    $("h1").removeClass("view").html(gallery);
    current = 0; 
    
    $("<h2>Albums</h2>").appendTo("#content"); //add the title of the view
    $.each(albums, function(i) {
    	//create the album, and register the click handler
        var item = $('<div class="item">').click(function() {
            album = i; //set the current album
            data = albums[i].photos; 
            title = albums[i].title;
            sprite = albums[i].sprite;
            view(); //go to current view
        });
        
        //create the skimmer, and set the background image to the sprite for the album (in the data file)
        //then register the mousemove event
        $('<div class="skimmer">').css("background", "url("+this.sprite+")").mousemove(function(e) {
            var x = e.pageX; 
            var w = 160 / albums[i].photos.length; 
            var offset = $(this).offset().left; 
            var image = Math.floor((x - offset) / w);
            $(this).css("background-position", "0px " + (-160 * image) + "px");
        }).mouseout(function() {
        	//when we mouseout, set the background position back to 0
            $(this).css("background-position", "0px 0px"); 
        }).appendTo(item);
        
        //create the album title and the number of photos label
        $('<strong/>').html(this.title).appendTo(item);
        $('<span/>').html(this.photos.length + (this.photos.length > 1 ? " Photos" : " Photo")).appendTo(item);
        
        item.appendTo("#content"); //add the item to the content area
    });
};

function gridView() {
    //remove everything from the content area that might have been there from other views,
    //add the grid_view class to the content view, and set up the title bar
    $("#content *").remove();
    $("#content").attr("class", "").addClass("grid_view");   
    $("h1").addClass("view").html(title).show(); 
    $(".button").remove();  
    
    //set up the footer view, and the content area
    $("#controls").show();
    $("#controls #slider").show();
    $("#content").css({ bottom: "40px", top: "57px" });
    
    view = gridView; //set the current view
    
    //add the back button
    $('<div class="button">').html(gallery).click(function() {
        albumView(); //go back to the current view
    }).appendTo("body");
    
    //add the items in the album to the grid, and set the size of the image in ems.
    $.each(data, function(i) {
        var item = $('<div class="grid_item">').click(function() {
            largeView(this, i);
        });
        $('<img/>').attr("src", this.src)
                   .css("width", this.width / 100 + "em")
                   .css("height", this.height / 100 + "em")
                   .appendTo(item);
        $("<strong/>").html(this.title).appendTo(item);
        item.appendTo("#content");
    });
};

function mosaicView() {
    //remove everything from the content area that might have been there from other views,
    //add the grid_view class to the content view, and set up the title bar
    $("#content *").remove();
    $("#content").attr("class", "").addClass("mosaic_view");
    $("h1").addClass("view").html(title).show();
    $(".button").remove();
    
    //set up the footer view, and the content area
    $("#controls #slider").hide();
    $("#controls").show();
    $("#content").css({ bottom: "40px", top: "57px" });
    
    view = mosaicView; //set the current view
    
    //add the back button
    $('<div class="button">').html(gallery).click(function() {
        albumView(); //go back to the current view
    }).appendTo("body");
    
    //add the large view with title
    var detail = $('<div id="mosaic_detail">').click(function(i) {
        largeView(this, current);
    });
    $("<img/>").attr("src", data[current].src).appendTo(detail);
    $("<strong/>").html(data[current].title).appendTo(detail);
    detail.appendTo("#content");
    
    //add the thubnail grid, with a click handler to animate the image change
    var grid = $('<div id="mosaic_grid">');
    $.each(data, function(i) {
        $('<div class="mosaic_item">')
            .css({
                backgroundPosition: "0px " + (-160 * i) + "px",
                backgroundImage: "url(" + sprite + ")"
            })
            .data("num", i)
            .click(function() {
                var num = $(this).data("num");
                current = num;
                $(".mosaic_item.selected").removeClass("selected");
                $(this).addClass("selected");
                
                $("#mosaic_detail").animate({ opacity: 0 }, "fast", function() {
                    $("#mosaic_detail img").attr("src", data[num].src);
                    $("#mosaic_detail strong").html(data[num].title);
                    $(this).animate({ opacity: 1 }, "fast");
                });    
            }).appendTo(grid);
    });
        
    grid.appendTo("#content");
    
    //select the current item in the thumbnail grid view
    $(".mosaic_item:nth-child("+ (current + 1) +")").addClass("selected");
};

function largeView(photo, i) {
    current = i;
    var item = data[i];
    
    var hovered = false;
    
    $("h1").hide();
    $(".button").remove();
    $("#content").attr("class", "").addClass("large_view");
    $("#controls").hide();
    $("#content").css({ bottom: "0px", top: "0px" });
    $("#content *").remove();
    
    $('<div class="button">Back to Album</div>').click(function() {
        view(); //go back to the current view
    }).appendTo("#content");
    
    var large = $('<div id="main">');
    $("<img/>").attr("src", item.src).appendTo(large);
    $("<strong/>").html(item.title).appendTo(large);
    large.appendTo("#content");
    
    var wrapper = $('<div id="hover_view_wrapper">');
    var hover = $('<div id="hover_view">').hover(function() {
        hovered = true;
    }, function() {
        hovered = false;
    });
    
    $('<div id="previous" title="Previous">').click(function() {
        if(!data[current-1]) return;
        
        $(".large_view #hover_view #next").removeClass("disabled");
        if(!data[current-2]) $(this).addClass("disabled");
        
        current--;
        $(".large_view #main").animate({ opacity: 0 }, "fast", function() {
            $(".large_view img").attr("src", data[current].src);
            $(".large_view strong").html(data[current].title);
            $(this).animate({ opacity: 1 }, "fast");
        });    
    }).appendTo(hover);
    
    $('<div id="next" title="Next">').click(function() {
        if(!data[current+1]) return;
       
        $(".large_view #hover_view #previous").removeClass("disabled");
        if(!data[current+2]) $(this).addClass("disabled");
        
        current++;
        $(".large_view #main").animate({ opacity: 0 }, "fast", function() {
            $(".large_view img").attr("src", data[current].src);
            $(".large_view strong").html(data[current].title);
            $(this).animate({ opacity: 1 }, "fast");
        });    
    }).appendTo(hover);
    
    wrapper.append(hover).appendTo("#content");
    
    if(current == 0) {
        $(".large_view #hover_view #previous").addClass("disabled");
    }    
    else if(current == data.length-1) {
        $(".large_view #hover_view #next").addClass("disabled");
    }
    
    var timer;
    var showing = false;
    
    $("#content").mousemove(function(event) {
        if(!showing) {
            showing = true;
            $(".large_view #hover_view").stop().animate({ opacity: 1 });
        }
        
        clearTimeout(timer);
        timer = setTimeout(function() {
            if(hovered) return;
            showing = false;
            $(".large_view #hover_view").stop().animate({ opacity: 0 });
        }, 2000);
    });
};

function slideshowView() {
    window.open("slideshow.html#"+album+"/"+current,
                "slideshow",
            "menubar=no,toolbar=no,location=no,fullscreen=yes,resizable=no,scrollbars=no,status=no,left=0,top=0,width="+screen.width+",height="+screen.height);
};