/*--------------------------------------------------------------------------*/
/*  Copyright © 2010 Web Interactive Technologies LLC. All Rights Reserved.
/*  No parts of this file may be reproduced without a written consent of
/*  Web Interactive Technologies. / www.webintech.com / 410-777-8500
/*
/*  Licensed for use to: The Truth Movie LLC / www.thetruthmovie.tv
/*--------------------------------------------------------------------------*/

function Wall(target,url,options)
{
	var wall = this;
	
	pageTitle = "The Truth";  // N

	// Width and Height of each square in the grid
	// this.resolution = 120;
	// Time taken by the panel to slide open
	this.panelOpenTimer = 500;
	// Time taken by the panel to slide close
	this.panelCloseTimer = 200;
	// Minimum width the panel opens to
	this.panelMinWidth = 800;
	// Determines how fast the scrolling animates
	this.scrollingTimer = 500;
	// Fade settings for Mouse-Over on images
	this.fadeDuration = 300;	
	this.fadeOpacity = 0.7;
	// Flicker settings when images are loading
	this.flickerDuration = 100;
	this.flickerOpacity = 0.3;
	// Determines how fast the tooltip slides 
	// up and down on Mouse Over / Mouse Out
	this.tooltipTimer = 300;
	
	if(typeof(options) != 'undefined')
		for(var key in options)
			this[key] = options[key];
	var scrollbar,thumb,content,template;	
	var panel = $("<div class='wall-panel'></div>");	
	panel.append("<table class='wall-main' " +
			"cellpadding='0' cellspacing='0'>" +
			"<tr></tr></table>");						
	panel.append("<div class='wall-scrollbar'>" +
			"<div class='wall-scrollbar-thumb'>" +
			"</div></div>");
	content = panel.children(".wall-main");
	template = content.children(":first").children();
	scrollbar = panel.children(".wall-scrollbar");
	thumb = scrollbar.children(":first");
	
	scrollbar.find(".wall-scrollbar-thumb").draggable
	({	axis:'x', containment:'parent',drag:updateContent	});
	content.draggable({	axis:'x',stop:checkBounds,drag:updateScroll,handle:'.wall-column' });
	
	scrollbar.bind("mousedown",
		function(event)
		{
			if(event.target != scrollbar[0])
				return;
			var left = event.pageX;
			left -= scrollbar.offset().left;
			left -= Math.floor(thumb.width() / 2);
			var range = scrollbar.width() - thumb.width();	
			if(left > range)
				left = range;
			else if(left < 0)
				left = 0;	
			thumb.animate({"left":left},200,function()
			{ updateContent(true); });
		}
	);
	
	var baseurl = location.href.toString();
	baseurl = baseurl.split("?")[0];
	baseurl = baseurl.split("#")[0];						
	var pIndex = baseurl.lastIndexOf("/");
	baseurl = baseurl.substring(0,pIndex);
	
	$("#"+target).append(panel).find("a").each
	(	function()
		{
			var path = this.href.replace(baseurl,"");
			var title = escape(this.getAttribute("title"));
			var share = this.getAttribute("share") || "0";
			this.href = "#wallState=0;title=" + title + 
					";share=" + share + "__" + path; 
		}
	);
	var shareLinks = "";
	$.get('include/share.php?ts='+(new Date().getTime()),
		function(data) {
			data = data.replace("<ul>",
				"<ul class='wall-frame-share'>");
			shareLinks = data;
		}
	, "text");		
	
	$.getJSON(url+'?ts='+(new Date().getTime()),loadImages);	
	
	function loadImages(data)
	{		
		var tr = content.find("tr:first");
		tr.children().remove();
		var td, plc, grid;
		for(var i=0;i<data.length;i++)
		{
			var group = "#g"+data[i].group;
			if(td != null && td.attr("id") != group)
				td = null;
			if(td == null)
			{
				tr.append(td = $("<td id='" 
					+ group + "'></td>"));
				td.addClass("wall-column");
			}
			td.append(plc = $("<a class='wall-content'></a>"));
			plc.css('width',(data[i].width * wall.resolution)+'px');
			plc.css('height',(data[i].height * wall.resolution)+'px');
			plc.append(grid = $(createTable(data[i].height,data[i].width)));
			grid.addClass("wall-grid").find("td")
				.append("<a class='wall-overlay'></a>");
			var left = data[i].left * wall.resolution;
			var top = data[i].top * wall.resolution;
			var prev = plc.prev();
			if(prev.length > 0)
			{
				top -= parseInt(prev.css("margin-top"));
				top -= (prev.height()+prev.position().top);
			}				
			plc.css('margin-top',top+'px');
			plc.css('margin-left',left+'px');					
			setImage.call(plc[0],data[i]);
		}
		setInterval(checkURL,50);
	}
	
	function setImage(data)
	{
		var that = $(this);
		if(data == null) 
		{
			that.empty().removeClass("wall-content")
			.addClass("wall-disabled").attr("href","");		
		}
		else
		{
			that.bind('mouseenter',onMouseEnter).bind('mouseleave',onMouseLeave);
			var url = "imagesize.php?image="+data.picture+"&size="
					+that.width()+"X"+that.height();			
			flicker.call(that.find(".wall-overlay")[0]);
			var image = new Image();
			image.onload = function()
			{
				onImageLoaded.call(that,data,image);
			}		
			image.src = url;			
		}
	}
	
	function onImageLoaded(data,image)
	{
		var desc = data.description;
		var title = data.title;
		var id = data.id;  // N TEMP
		var parentIndex = this.parents(".wall-column").prevAll(".wall-column").length;
		var href = "#wallState="+parentIndex+ ";title=" + escape(data.title)
				+ ";share=" + data.share + "__/"+data.content;		
		this.attr("href",href).find(".wall-overlay").attr("href",href);
		this.css("background-image","url(" + image.src + ")");
		var grid = this.children().eq(0);
		if(desc || title)
		{
			var markup = 
				"<div class='wall-desc'>" +
					"<div class='wall-desc-content'>" +
						"<div class='wall-desc-title'>" + title + "</div>" +  // N
//						"<div class='wall-desc-title'>" + id + " " + title + "</div>" +  // N
						"<div class='wall-desc-body'>" + desc + "</div>" +
//						"<div class='wall-desc-link'>READ MORE <span>&gt;&gt;</span></div>" +  // N
					"</div>" +
				"</div>";		
			this.append(markup = $(markup));				
			var overlay = $("<div class='wall-desc-overlay'></div>");
			overlay.css("height",markup.height()+'px')
				.css("margin-top",'-'+markup.height()+'px');
			markup.append(overlay);
			markup.css("margin-top","-"+(markup.find(".wall-desc-title").height())+'px');
		}
	}
	
	var initialURL = '';
	function checkURL()
	{
		var currentURL = location.href.toString();
		if(currentURL != initialURL)
		{	
			initialURL = currentURL;
			var hash = initialURL.split("#")[1];			
			if(hash != null)
			{
				var info = /wallState=(\d+)(;title=([^;]*))?(;share=(\d+))?(__\/(.*))?/;
				info = info.exec(hash);
				closeFrame(info[1]);   // N

				if(info == null || info.length < 2) 
				{
					content.find("td.wall-frame").remove();
					checkBounds();
				}
				else
				{
					var frameIndex = info[1];
					var title = info[3];
					var shareFlag = info[5];
					var framePath = info[7];	
					if(!framePath) closeFrame(frameIndex);
					else {
//						closeFrame(frameIndex);   // N
						var request = $.get('include/content.php?ts='+(new Date().getTime())+ '&path='+framePath,showFrame);
						request.framePath = framePath;
						request.frameIndex = frameIndex;
						request.share = shareFlag;
						request.title = title || ""; 
					}
				}	
			}
		}
	}
	
	function showFrame(data) {
		
		var title = arguments[2].title;
		var share = arguments[2].share;
		var framePath = arguments[2].framePath;
		var frameIndex = arguments[2].frameIndex;
				
		var frame = content.find("td.wall-column");
		
		// N set new page title
		if (title !="") {
		var setTitle = title;
		setTitle = setTitle.replace(/%20/g, " ");
		setTitle = setTitle.replace(/%26/g, "&");
		document.title = pageTitle + " - " + setTitle;
		}

		if(frame.length <= frameIndex)
			frameIndex = 0;
		frame = frame.eq(frameIndex);		
		var left = frame.width();		
		frame.prevAll().each
			(function(index){ left += $(this).width(); });
		var cell, nextFrame = frame.next();
		 
		if(nextFrame.attr("class") == "wall-frame")
		{
			frame = nextFrame;
			cell = frame.find(".wall-frame-content");
			var toolbar = frame.children(".wall-frame-panel");
			if(toolbar.length == 0)
				toolbar = panel.children(".wall-frame-panel");
			toolbar.find(".wall-frame-share").parent().remove();			
		}		
		else {			
			var markup =
				"<td class='wall-frame'>" +
					"<div class='wall-frame-content wall-clearfix'></div>" +
					"<div class='wall-frame-panel'>" + 
						"<ul class='wall-frame-menu'>" +
							"<li><a style='background-position: 48px 0px' " +
							"class='wall-frame-close'>close</a></li>" +
						"</ul>" + 
					"</div></td>";		
			frame.after(frame = $(markup));
			var height = frame.height();						
			frame.find(".wall-frame-close").attr("href","#wallState="+frameIndex+"__/");
			frame.find(".wall-frame-panel").css("margin-top",'-'+(height-10)+'px');
			frame.find(".wall-frame-panel").css("float","right");
			cell = frame.find(".wall-frame-content"); cell.css("height",frame.height()+'px');	
		}		
		
		if(share != "0")
		{
			var shareMarkup = shareLinks;
			var url = location.href.toString();
			url = url.split("#")[0];
			url += "#wallState="+frameIndex+";title="
			url += title+";share="+share+"__/"+framePath; 
			shareMarkup = shareMarkup
				.replace(/%URL%/g,escape(url))
				.replace(/%TITLE%/g,title);				
			shareMarkup = "<li><a style='background-position: 48px -20px' class='color_orange'>" +
								"share</a>" + shareMarkup + "</li>";
			var toolbar = frame.children(".wall-frame-panel");
			if(toolbar.length == 0)
				toolbar = panel.children(".wall-frame-panel");			
			toolbar.find(".wall-frame-close").parent().before(shareMarkup);
			toolbar.children(".wall-frame-menu").children('li').hover(showMenu,hideMenu);
		}

		cell.html("<div style='margin-top:30px' class='wall-floater'>"+data+"</div>");
		var width = cell.children(":first").outerWidth() + 20;
		if(width < wall.panelMinWidth) width = wall.panelMinWidth;
		content.animate({"left":"-"+(left-40)},{duration:wall.panelOpenTimer,step:updateToolbar});		
		cell.animate({'width': width},wall.panelOpenTimer,function(){
			checkBounds();
			//hack: chrome fails to update UI
			var fp = frame.find(".wall-frame-panel");
			$("<div></div>").append(fp); frame.append(fp);
		});
		
	}
	
	function closeFrame(frameIndex)
	{
		var frame = content.find("td.wall-column");	
		
		// N set page title
		document.title = pageTitle;
		
		if(frame.length <= frameIndex)
			frameIndex = 0;
		frame = frame.eq(frameIndex).next();
		if(!frame.hasClass("wall-frame")) return;			
		var toolbar = frame.find(".wall-frame-panel");
		if(toolbar.length == 0)
		{
			toolbar = panel.children(".wall-frame-panel");
		}
		toolbar.remove();
		frame = frame.find(".wall-frame-content");
		var width = frame.width();
		var height = frame.height();
		var left = width / 2;
		content.animate({'left':'+='+left},wall.panelCloseTimer);
		frame.animate({'width': 0},wall.panelCloseTimer, 
		function() {
			frame.parents("td.wall-frame").remove();
			checkBounds();				
		});	
	}
	
	function updateScroll()
	{			
		updateToolbar();
		var left = -parseInt(content.css("left"));
		if(isNaN(left)) left = 0;
		var rangeSrc = content.width() - panel.width();
		var rangeTarget = scrollbar.width()-thumb.width();
		left = Math.floor((left * rangeTarget) / rangeSrc);				
		if(left > rangeTarget)
			left = rangeTarget;
		else if(left < 0) left = 0;
		if(arguments.length == 1)
			thumb.animate({"left":left},wall.scrollingTimer);
		else thumb.css("left",left+'px');		
	}
	
	function updateContent()
	{				
		var left = parseInt(thumb.css("left"));
		var rangeSrc = scrollbar.width()-thumb.width();
		var rangeTarget = content.width() - panel.width();
		left = Math.floor((left * rangeTarget) / rangeSrc);
		if(arguments.length == 1)
		{
			content.animate({"left":-left},
				{duration:wall.scrollingTimer,step:updateToolbar});
		}
		else { 
			content.css("left",'-'+left+'px');
			updateToolbar();			
		}		
	}
		
	var currentFrame = null;
	
	function updateToolbar()
	{	
		var that, oldFrame = currentFrame;
		if(currentFrame == null || currentFrame.parentElement == null)
			that = panel.find("td.wall-frame:first");
		
		else that = $(currentFrame);		
		if(that.length == 0)
		{
			currentFrame = null; 
			return;
		}		
		var limit = panel.offset().left + panel.width();			
		var width = that.width();
		var offset = that.offset().left;				
		if((offset+width) < limit)
		{
			while((offset+width) < limit)
			{
				var next = that.nextAll("td.wall-frame:first");				
				if(next.length == 1)
				{
					that = next;
					width = that.width();
					offset = that.offset().left;					
				}
				else break;
			}
		}
		else if(offset > limit)
		{
			while(offset > limit)
			{
				var prev = that.prevAll("td.wall-frame:first");
				if(prev.length == 1)
				{				
					that = prev;
					width = that.width();
					offset = that.offset().left;
				}
				else break;
			}
		}
		
		currentFrame = that[0];
		width = that.width();
		offset = that.offset().left;
		
		var height = panel.height() - that.height();
		height += that.position().top;
				
		if(oldFrame != currentFrame)
		{
			if(oldFrame != null)
			{
				var old = $(oldFrame);			
				if(old.children(".wall-frame-panel").length == 0)
				{
					var toolbar = panel.children(".wall-frame-panel");
					old.append(toolbar);			
					var margin = parseInt(toolbar.css("margin-top"));
					toolbar.css("margin-top",(margin+height)+'px');
					toolbar.css("float", old.offset().left > limit ? "left" : "right");
				}
			}			
		}
		
		if(offset < limit && (offset + width) > limit)
		{
			var isPanelChild = false;
			var toolbar = that.children(".wall-frame-panel");
			if(toolbar.length == 0)
			{
				isPanelChild = true;
				toolbar = panel.children(".wall-frame-panel");
			}
			if(offset + toolbar.outerWidth() >= limit)
			{
				if(isPanelChild)
				{
					that.append(toolbar);
					var margin = parseInt(toolbar.css("margin-top"));
					toolbar.css("margin-top",(margin+height)+'px');					
					toolbar.css("float","left");
				}
			}
			else
			{
				if(!isPanelChild)
				{
					panel.append(toolbar);
					var margin = parseInt(toolbar.css("margin-top"));
					toolbar.css("margin-top",(margin-height)+'px');
					toolbar.css("float","right");
				}
			}
		}
		else
		{
			if(that.children(".wall-frame-panel").length == 1)
				return;
			var toolbar = panel.children(".wall-frame-panel");
			that.append(toolbar);			
			var margin = parseInt(toolbar.css("margin-top"));
			toolbar.css("margin-top",(margin+height)+'px');
			toolbar.css("float","right");
		}
	}
	
	function checkBounds()
	{
		var left = parseInt(content.css("left"));
		if(left > 0)
		{
			content.animate({left:"0"},
				{duration:500,step:updateToolbar});
		}
		else
		{
			left += content.width() - content.parent().width();
			left = -left;
			if(left > 0)
				content.animate({"left":"+="+left},
					{duration:wall.scrollingTimer,step:updateToolbar});	
		}
		updateScroll(true);				
	}
	
	function onMouseEnter(event)
	{
		var that = $(this);
		that.find(".wall-overlay").fadeTo
			(wall.fadeDuration,wall.fadeOpacity)
			.fadeTo(wall.fadeDuration,0.0);
			
		var desc = that.find(".wall-desc").eq(0);
		var distance = desc.height();
		if(distance >= desc.parent().height())
			distance = desc.parent().height() - 1;
		desc.animate({'margin-top': '-'+distance},wall.tooltipTimer);
	}
	
	function onMouseLeave(event)
	{
		var desc = $(this).find(".wall-desc").eq(0);
		desc.queue("fx",[]);
		desc.animate({'margin-top': ('-'+(desc.find
			(".wall-desc-title").height()))},wall.tooltipTimer);
	}	
	
	function flicker()
	{
		var parent = $(this).parents(".wall-content");		
		if(parent.css("background-image").toString() == "none")
		{
			var overlays = parent.find(".wall-overlay");
			var index = Math.floor(Math.random() * overlays.length);
			var next = overlays.eq(index); 	
			next.delay(100).fadeTo
				(wall.flickerDuration,wall.flickerOpacity)
					.fadeTo(flickerDuration,0.0,flicker);
		}
	}
	
	function createTable(rows,cols)
	{
		var markup = "<table cellspacing='0' cellpadding='0'>";	
		for(var r=0;r<rows;r++)
		{
			markup += "<tr>";
			for(var c=0;c<cols;c++)
				markup += "<td></td>";
			markup += "</tr>"
		}
		return (markup + "</table>");
	}
	
	function showMenu() { 
		$('ul', this).css('display', 'block'); 
	}
	
	function hideMenu() { 
		$('ul', this).css('display', 'none'); 
	}
}

$(document).ready(function()
{
	Wall(	/* html-parent = */ "the-wall",
			/* data-source = */ "include/images.php", 
			/* options = 	 */ {resolution: 135} );
});