/*
 * handverk.js main site handling object
 *
 * @author  Les Kleuver   kyu.nl   2009
 * 
 * depends on jquery 1.3.2 or higher ( <3 jquery )
 */


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



var Handverk = function() {
	//constants
	var WINDOW_SIZE			= {"WINDOW_PORTRAIT":[476, 804], "WINDOW_SQUARE" : [668, 834], "WINDOW_LANDSCAPE" : [931, 834]};
	var MEDIA_SIZE			= {"WINDOW_PORTRAIT":[448, 640], "WINDOW_SQUARE" : [640, 640], "WINDOW_LANDSCAPE" : [903, 640]};
	
	//dom elements
	var categorySelector = null;
	var categoryPulldown = null;
	var frame = null;
	var closeFrameButton = null;
	var frameBackground = null;
	var projectFrame = null;
		var projectImageView = null;
		var projectDescription = null;
		var projectImageBrowsing = null;
	
	var contactFrame = null;
	var aboutFrame = null;
	var errorFrame = null;
	var loadingFrame = null;
	
	//flags
	var pulldownActive = false;

	//memory
	var currentProject = null;
	var currentImageIndex = 0;
	var frames = null;
	
	function init() {
		//navigation
		
		/* no more pulldown
		categorySelector = $("#active-category");
		categoryPulldown = $("#select-category");
		
		categorySelector.mouseover(showPulldown);
		categorySelector.mouseleave(hidePulldownBySelector)
		categoryPulldown.mouseover(activatePulldown);
		categoryPulldown.mouseleave(hidePulldownByPulldown);
		*/
		
		
		//frame
		frame = $("#frame");
		frameBackground = $("#frameBackground");
		closeFrameButton = $("#closeFrameButton");
		
		frameBackground.click(closeFrame);
		closeFrameButton.click(closeFrame);
		
		
		//project
		projectFrame = $('#projectFrame');
		projectImageView = $("#projectImageView");
		projectDescription = $("#projectDescription");
		projectImageBrowsing = $("#projectImageBrowsing");
		
		projectImageBrowsing.find('a.previous').click(previousProjectImage);
		projectImageBrowsing.find('a.next').click(nextProjectImage);
		
		//frames res
		contactFrame = $("#contactFrame");
		aboutFrame = $("#aboutFrame");
		errorFrame = $("#errorFrame");
		loadingFrame = $("#loadingFrame");
		
		
		//global
		$('a').click(onClickAnchorTag);
		frames = new Array(projectFrame, contactFrame, aboutFrame, errorFrame, loadingFrame);
		
		if(location.hash.length > 1) {
			handleHref(location.hash.substr(1));
		}
		
	}
	
	
/*
 * NAVIGATION ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 */
	/* got scrapped
	function showPulldown() {
		categoryPulldown.fadeIn("normal");
	}
	
	function activatePulldown() {
		pulldownActive = true;
	}
	
	function hidePulldownBySelector() {
		if(!pulldownActive) {
			setTimeout("Handverk.onHidePulldownBySelector()", 500);
		}
	}
	
	function onHidePulldownBySelector() {
		if(!pulldownActive) {
			hidePulldown();
		}
	}
	
	function hidePulldownByPulldown() {
		pulldownActive = false;
		setTimeout("Handverk.onHidePulldownBySelector()", 500);
	}
	
	function hidePulldown() {
		categoryPulldown.fadeOut("normal");
	}
	 */
	
	

/*
 *  GLOBAL HANDLERS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 */
	
	function onClickAnchorTag() {
		var a = $(this); //this refers to the clicked anchor tag

		//check to see if its a project link
		var href = a.attr("href");
		if(href == undefined) {
			return;
		}
		location.hash = href;
		
		return handleHref(href);
	}
	
	function handleHref(href) {
		if(href.indexOf('project') > -1) {
			loadProject(href);
			return false;
		}else if(href.indexOf('contact') > -1) {
			showContact(href);
			return false;
		}else if(href.indexOf('about') > -1) {
			showAbout(href);
			return false;
		}
		return true;
	}
	

/*
 * FRAME HANDLERS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 */

	function showFrame() {
		for(var i = 0; i < frames.length; i++) {
			frames[i].hide();
		}
		
		frameBackground.show()
		frame.fadeIn("normal");
	}
	
	function showFrameLoading() {
		setFrameSize(400, 400);
		loadingFrame.show();
	}
	
	function endFrameLoading() {
		loadingFrame.hide();
	}
	
	function showFrameError(msg) {
		setFrameSize(400, 400);
		errorFrame.html(msg).show();
	}
	
	function closeFrame() {
		location.hash = "/";
		frame.hide();
		frameBackground.hide();
		closeFrameButton.hide();
	}
	
	function setFrameSize(w, h) {
		var s_top = $(document).scrollTop();
		var w_width = $(window).width();
		var w_height = $(window).height();
		

		
		frame.width(w);
		frame.height(h);
		projectFrame.height(h - 28);
		var top = s_top + Math.round(Math.max( (w_height - h) / 2, 0));
		var left = Math.round(Math.max( (w_width - w) / 2, 0));
		
		frame.css("left", left + "px");
		frame.css("top", top + "px");
		
		closeFrameButton.css("left", (left + w - 12) + "px");
		closeFrameButton.css("top", (top - 5) + "px");
		closeFrameButton.show();
	}
	
/*
 * PROJECT POPUP ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 */
	
	function resetProjectFrame() {
		projectImageView.attr("src", "/img/blank.jpg");
		currentImageIndex = 0;
		currentProject = null;
		projectImageBrowsing.find('a').hide();
	}
	
	function loadProject(path) {
		//first reset everything to normal
		resetProjectFrame();
		
		var webname = path.substr(path.lastIndexOf('/')+1);
		
		showFrame();
		showFrameLoading();
		
		$.getJSON("/api/project/get/?webname="+escape(webname), onLoadProject);
	}
	
	function onLoadProject(o) {
		if(o.error == "0") {
			endFrameLoading();
			showProject(o.project);
		}else{
			showFrameError(o.message);
		}
	}
	
	
	function showProject(project) {
		currentProject = project;
		setFrameSize(WINDOW_SIZE[project.windowSize][0], WINDOW_SIZE[project.windowSize][1]);
		projectFrame.show();
		
		
		if(project.imageList.length > 0) {
			showProjectImage(project.imageList[0]);
		}else if(project.videoList.length > 0) {
			showProjectVideo(project.videoList[0]);
		}
		
		setProjectBrowsing();
	}

	function setProjectDescription(s) {
		projectDescription.html(s.replace(/\n/g, "<br />"));	
	}
	
	function showProjectImage(image) {
		if(image.description) {
			setProjectDescription(image.description);
		}
		projectImageView.find("img").attr("src", image.path).attr("width", image.width).attr("height", image.height).show();
		projectImageView.find("#videoFrame").empty().hide();
	}
	
	function showProjectVideo(video) {
		projectImageView.find("img").hide();
		
		if(video.description) {
			setProjectDescription(video.description);
		}
		
		var w = MEDIA_SIZE[currentProject.windowSize][0];
		var h = MEDIA_SIZE[currentProject.windowSize][1];
		var sourceId = video.source.substr(video.source.lastIndexOf("/")+1);
		var src = '<object width="'+w+'" height="'+h+'"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id='+sourceId+'&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id='+sourceId+'&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="'+w+'" height="'+h+'"></embed></object>';
		projectImageView.find("#videoFrame").show().html(src);
	}
	
	/*
	 * Checks to see which buttons for browsing to show
	 */
	function setProjectBrowsing() {
		projectImageBrowsing.empty();
		if(currentProject != null && currentProject.imageList != null && currentProject.imageList.length + currentProject.videoList.length > 1) {
			for(var i = 0; i < currentProject.imageList.length + currentProject.videoList.length; i++) {
				var html = i == currentImageIndex ? '<a class="active">' : '<a>';
				html += (i + 1)+"</a>";
				projectImageBrowsing.append($(html).click(selectProjectImage));
			}
			
			projectImageBrowsing.append($('<a class="prev">Previous</a>').click(previousProjectImage));
			projectImageBrowsing.append($('<a class="next">Next</a>').click(nextProjectImage));
		}
		

		
	}
	
	function selectProjectImage(e) {
		currentImageIndex = parseInt($(this).html()) - 1;
		showProjectMedia();
	}
	
	function previousProjectImage() {
		currentImageIndex = currentImageIndex == 0 ? currentProject.imageList.length + currentProject.videoList.length - 1 : currentImageIndex - 1;
		showProjectMedia()
	}
	
	function nextProjectImage() {
		currentImageIndex = currentImageIndex == currentProject.imageList.length + currentProject.videoList.length - 1 ? 0 : currentImageIndex + 1;
		showProjectMedia()
	}
	
	function showProjectMedia() {
		if(currentImageIndex < currentProject.imageList.length) {
			showProjectImage(currentProject.imageList[currentImageIndex]);
		}else{
			var index = currentImageIndex - currentProject.imageList.length;
			showProjectVideo(currentProject.videoList[index]);
		}
		setProjectBrowsing();
	}
	


	
	/*
	 * REST POPUPS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
	 */
		
	function showAbout(href) {
		showFrame();
		setFrameSize(903, 640);
		aboutFrame.show();
	}
	
	function showContact(href) {
		showFrame();
		setFrameSize(903, 640);
		contactFrame.show();
		
		if(href.indexOf('img') > -1) {
			var src = href.substr(href.indexOf("/img"));
			$("#contactimgtarget").attr("src", src);
			return false;
		}
		
	}

	
	return {
		init: init
	}	
}();