var sf = {

	init : function()
	{
		sf.matchSize();
		
		if ($.browser.msie && parseFloat($.browser.version)<7)
		{}
		else
			$('#gallery_list a').click(sf.gallery.thumb_click);
		
		
	}
	
	,matchSize : function ()
	{
		
		var items = $('.content,#sidebar,#main_menu');
		
		var h = 0;
		items.each(function(){
			h = Math.max(h,$(this).innerHeight());
		});
		
		items.each(function(){
			$(this).height( h - ($(this).innerHeight() - $(this).height()) );
		});
		
		
	}
	
	,gallery : {
	
		gid : null
		
		,container : null
		
		,data : null
	
		,init : function (gid, index)
		{
			if (index)
				sf.gallery.start_index = index;
			else
				sf.gallery.start_index = 0;
				
			
			sf.overlay.init(sf.gallery).animate({opacity:0.8});
		
			var container = sf.gallery.container = $('<div id="gallery"><div id="loader"></div><br/>Loading...</div>').appendTo($(document.body));
			
			container.css(
				{
					top:'50%',
					left:'50%',
					width:'300px',
					height:'100px',
					"margin-left":"-150px",
					"margin-top":"-50px",
					"background-color":"#fff"
				});
				
			container.click(sf.gallery.container_click);
			
			sf.gallery.gid = gid;
			sf.gallery.get(gid);			
			
			
		}
	
		,get : function (gid)
		{
			$.getJSON("/json.php",{action:'gallery',gid:gid},sf.gallery.results);
			
		}
		
		,results : function(data)
		{
			//console.log("results(%o)",data);
			sf.gallery.data = data;
			sf.gallery.data.index = sf.gallery.start_index - 1;
			sf.gallery.start();
		}
		
		,start : function()
		{
			var ov = sf.overlay.current;
			
			var size = {
				x : ov.position().left,
				y : ov.position().top,
				width : ov.width(),
				height : ov.height()
			}
			
			//console.log("ov(%o,%o,%o,%o)",ov.position().left,ov.position().top,ov.width(),ov.height());
		
			var c = sf.gallery.container;
			
			c.html('').append('<div class="gallerywrap">\
								<div id="panel">\
									<a href="#" id="close">Close</a>\
									<h2>'+sf.gallery.data.title+'</h2>\
									<blockquote></blockquote>\
									<div id="nav">\
										<a href="#" id="previous">&laquo; Previous</a><span id="status"></span><a href="#" id="next">Next &raquo;</a>\
									</div>\
								</div>\
								<div id="image"></div>\
							   </div>');
			
		
			$('#next',c).click(sf.gallery.on_next);
			$('#previous',c).click(sf.gallery.on_previous);
			$('#close',c).click(sf.gallery.close);
			$("#image",c).html("<div id='loader' class='abscenter'></div>");
			
			c.css({
					top:0,
					left:0,
					width:'100%',
					height:'auto',
					"margin-left":"auto",
					"margin-top":"auto",
					"background-color":"transparent"
				})
			
			$('.gallerywrap').css(
				{
					height: size.height - 40,
					width : 300+500,
					top : 20
				});
			
			sf.gallery.load_next_image();
		
		}
		
		,show_loader : function(show)
		{
			show ? $('#loader').show() : $('#loader').hide() ;
		}
		
		,clear_image : function()
		{
			$('#image img').remove();
		}
		
		,update_status : function()
		{
			$('#panel #status').html((sf.gallery.data.index +1) + " of "+sf.gallery.data.pictures.length);
		}
		
		,update_description : function()
		{
			var current = sf.gallery.data.pictures[sf.gallery.data.index];
			var s = '';
			if (current.title)
				s += '<h3>'+current.title+'</h3>';
			s += current.description;
			
			if (current.location)
				s += '<p><strong>Location:</strong> '+current.location+'</p>';
			
			$('#panel blockquote').html(s);
			
		
		}
		
		,load_next_image : function()
		{
			
			if (sf.gallery.data.index == sf.gallery.data.pictures.length - 1)
				sf.gallery.data.index = 0;
			else
				sf.gallery.data.index++;
						
			sf.gallery.load_current_image();			
			
			
		}
		
		,load_previous_image : function()
		{
			
			if (sf.gallery.data.index==0)
				sf.gallery.data.index = sf.gallery.data.pictures.length - 1;
			else
				sf.gallery.data.index--;
						
			sf.gallery.load_current_image();			
			
			
		}
		
		
		,load_current_image : function()
		{
			sf.gallery.update_status();
			sf.gallery.update_description();
			sf.gallery.clear_image();
			sf.gallery.show_loader(true);	
			
			
			var current = sf.gallery.data.pictures[sf.gallery.data.index];
			
			var img;
			
			if (!current.dom_img)
			{
			
				img = current.dom_img = new Image();
						
				$(img)
				.load(function(e){
					sf.gallery.render_image(this);
				})
				.attr('src',current.image);
			}
			else
			{
				sf.gallery.render_image(current.dom_img);
			}
			//console.log($(img));	
		}
		
		,render_image : function(img)
		{
			//console.log("render_image(%o)",img);
			var ratio = img.width / img.height;
			var ov = sf.overlay.current;
		
			var size = {
				x : ov.position().left,
				y : ov.position().top,
				width : ov.width(),
				height : ov.height()
			}
			//console.log("size=%o",size);
			img.height = size.height - 40;
			img.width = img.height * ratio;
			
			//console.log(img.width);
			
			//console.log("img.width+300 > size.width-40 = %o > %o = %o",img.width+300 , size.width-40, img.width+300 > size.width-40)

			if (img.width+300 > size.width-40)
			{
				img.width = size.width-40-300;
			}
			
			//console.log(img.width);
			
			//console.log(img.height);
			sf.gallery.show_loader(false);
			
			$('.gallerywrap').animate({width:img.width+300},1000,function(){
				$("#image").append(img);
			
			});
		}
		
		,on_next : function()
		{
			sf.gallery.load_next_image();
		}
		
		,on_previous : function()
		{
			sf.gallery.load_previous_image();
		}
		
		
		,overlay_click : function ()
		{
			//console.log("overlay_click()");
			sf.gallery.close();
		}
		
		,container_click : function(e,b,c)
		{
			//console.log("container_click(%o,%o,%o)",e,b,c);
			if (e.target.id=='gallery')
				sf.gallery.close();
			return false;
		}
		
		,close : function()
		{
			sf.gallery.container.remove();
			sf.gallery.container = null;
			sf.overlay.remove();
			return false;
		}
		
		,thumb_click : function()
		{
			//console.log("thumb_click(%o)",$(this).attr('gallery'));
			sf.gallery.init($(this).attr('gallery'),$(this).attr('index'));
			return false;
		}
	}
		
	,overlay : {
		
		current : null
		
		,notify_events : null
	
		,init : function(notify_events)
		{
			var ov = $('<div id="overlay"></div>').css({opacity:0}).appendTo($(document.body));
			ov.click(sf.overlay.click);
			this.notify_events = notify_events;
			return sf.overlay.current = ov;
		}
		
		,click : function()
		{
			if (sf.overlay.notify_events)
				sf.overlay.notify_events.overlay_click();
			return false;			
		}
		
		,remove : function()
		{
			sf.overlay.current.remove();
			sf.overlay.current = null;
		}
	}
			
}