// phui.modal
var modal;
var content;
var overlay;
var ph = {};

$(document).ready(function(){
});

jQuery.modal_init = function(cls)
{
	$("a[class="+cls+"]").click(function(){
		$.modal({image: $(this).attr("href"), image_series: cls});
		return false;
	});
}

jQuery.modal = function(options)
{
	overlay = new ph.Shadow(0.7);
	overlay.bind("click", phui_modal_close);
	
	modal = $("<div />").addClass("phui_modal")
													.append('<div class="phui_modal_top_left" />')
													.append('<div class="phui_modal_top_right" />')
													.append('<div class="phui_modal_bottom_left" />')
													.append('<div class="phui_modal_bottom_right" />')
													.append('<div class="phui_modal_top" />')
													.append('<div class="phui_modal_left" />')
													.append('<div class="phui_modal_right" />')
													.append('<div class="phui_modal_bottom" />');
														
  content = $("<div />").addClass("phui_modal_content").addClass("phui_loading").appendTo(modal);
	content.wrap("<div class='phui_modal_content_wrapper'></div>");
	
	var body = $("<div />").addClass("phui_modal_body").addClass("phui_text");
	
	if(options.title)
	{
		var title = $("<h1 />").addClass("phui_modal_title").text(options.title).appendTo(content);
	}
	
	var html = $("<div />").addClass("phui_modal_html").appendTo(content);
	
	if(options.padding)
	{
		html.css({padding:options.padding});
	}
	else
	{
		html.css({padding:"15px 15px 15px 15px"});
	}
	
	if(options.height)
	{
		content.height(options.height);
	}
	if(options.width)
	{
		content.width(options.width);
	}
	
	// appending
	$("body").append(modal);
	
	// position
	phui_modal_center(modal);
	
	// events
	$(window).bind("resize", phui_modal_center);
	$(document).bind("phui.modal.close", phui_modal_close);
		
	if(options.html)
	{
		html.html(options.html);
		content.removeClass("phui_loading");
		var height = html.height() + 15;
		content.css({height: height});
		phui_modal_center(modal);
	}
	
	
	if(options.image)
	{
		phui_load_image(options.image);
		if(options.image_series)
		{
			phui_modal_navigator(options.image_series, options.image);
		}
	}
	
	
	
}

var phui_modal_navigator = function(cls, current)
{
	//@TODO implement
	
	// 01 build array from class
	var images = [];
	$("."+cls).each(function(){
		images.push($(this).attr("href"));
	});
	
	// 02 get current number
	var current_number = null;
	for(var i=0; i<images.length; i++)
	{
		if(images[i] == current)
		{
			current_number = i;
		}
	}
	
	// 03 build links to left and right if needed
	var left_link_needed = (current_number > 0);
	var right_link_needed = (current_number+1 < images.length);
	
	// 04 put it all together and add to content
	var link_holder = $("<div />").addClass("phui_modal_button_holder").appendTo(content);;
	var nav_holder = $("<div />").addClass("phui_modal_navigation_holder").addClass("phui_text").appendTo(link_holder);
	nav_holder.text("test");

	// @TODO finish up gallery browser
}

var phui_modal_center = function()
{
	var position = phui_center({
		width: modal.width(),
		height: modal.height()
	});
	modal.css({
		top: position.top,
		left: position.left
	});
}

var phui_center = function(size)
{
	doc_w = $(window).width();
	doc_h = $(window).height();
	
	doc_scroll = $(document.body).scrollTop();
			
	var position = {
		top: doc_h/2 - size.height/2,
		left: doc_w/2 - size.width/2
	};
	
	return position;	
}

var phui_modal_close = function()
{
	overlay.destroy();
	$(".phui_modal").fadeOut(function(){
		$(this).remove();
	});
}

var phui_load_image = function(image_path)
{
	content.addClass("phui_loading");
	$("img.phui_modal_image").fadeOut().remove();
	
	var image = $("<img />");

	// prepare onload event
	image.bind("load", function(){
		image.appendTo(content).hide();		
		var position = phui_center({
			width: image.width()+24,
			height: image.height()+24
		});
		modal.animate({
			top: position.top,
			left: position.left
		});
		content.animate({
			width: image.width(),
			height: image.height()
		}, function(){
			$(image).fadeIn();
			content.removeClass("phui_loading");
		});
	});
	
	// start loading
	image.attr("src", image_path).hide().addClass("phui_modal_image");
}