$(function(){
    
    // initially call resize on load
    UI.resize();
    
    // call resize every time the window is resized
    $(window).resize(function(){
        UI.resize();
    });
    
    // gallery
    $('.gallery').click(function(){
        //if ($(this).attr('id') != 'exhibition') {
            UI.gallery.open(this.id);
        //}
        return false;
    });
      
});



/**
 * User Interface Stuff
 */

var UI = {

    gallery: {
        
        open: function(id) {
    
            $('#header,#main').fadeOut('slow', function() {
            
                Overlay.mask({
                    color: '#000',
                    opacity: 0.3
                });
            
                $('body').append("<div id='gallery'></div>");
                
                $('#gallery').css({
                    'z-index': $('#q-mask').css('z-index') + 1
                }).fadeIn();
                
                $('#gallery').load('/includes/' + id + '.html', {}, function(){
                
                    $(".scrollable").scrollable();
        
                    $(".items img").click(function() {
                    
                        $('#image_wrap .title').remove();
                    
                    	// see if same thumb is being clicked
                    	if ($(this).hasClass("active")) { return; }
                    
                    	// calclulate large image's URL based on the thumbnail URL (flickr specific)
                    	var url = $(this).attr("src").replace("thumbs/", "");
                    	
                    	var title = $(this).attr("alt");
                    
                    	// get handle to element that wraps the image and make it semi-transparent
                    	var wrap = $("#image_wrap").fadeTo("medium", 0.5);
                    
                    	// the large image
                    	var img = new Image();
                    
                    	// call this function after it's loaded
                    	img.onload = function() {
                    
                    		// make wrapper fully visible
                    		wrap.fadeTo("fast", 1);
                    
                    		// change the image
                    		wrap.find("img").attr("src", url);
                    		
                    		if (title) {
                                $('#image_wrap').append("<div class='title'>" + title + "</div>");
                    		}
                    
                    	};
                    
                    	// begin loading the image
                    	img.src = url;
                    
                    	// activate item
                    	$(".items img").removeClass("active");
                    	$(this).addClass("active");
                    	
                    	$('#gallery').append("<div class='close'>close X</div>");
                    	
                    	$('#gallery .close').click(function(){
                    	   UI.gallery.close();
                    	});
                    
                    // when page loads simulate a "click" on the first image
                    }).filter(":first").click();
                
                });
            
            });
            
            $(window).keyup(function(e){
                if (e.keyCode == '27') {
                    UI.gallery.close();
                }
            });
        },
        
        close: function() {
            $('#gallery').remove();
            Overlay.unmask();
            $('#header,#main').fadeIn();
        }
    },

    resize: function() {
        
        var w = $(window).width();
        var h = $(window).height();
        var diff, addHeight, addWidth = null;
    
        $('#bg-img').height(h);
        $('#header').height(h);
        
        if (w > 1000) {
            $('#page').width(w);
            diff = w - 1000;
            $('#main').css('margin-left', diff * 0.35 + 'px');
            $('#header .container').css('margin-left', diff * 0.1 + 'px');
        }
        
        if (h > 530) {
            diff = h - 530;
            $('#main').css('margin-top', diff * 0.35 + 'px');
            $('#header .container').css('margin-bottom', diff * 0.25 + 'px');
        }
        
    }

};