var portfolios = [];
var totalPortfolios;
jQuery (document).ready (function (){	
	totalPortfolios = 0;	
	jQuery ("div.work-item-box").click (onWorkItemClick);
	jQuery("div#collapse-button").click (onWorkItemCollapse);
	jQuery("div.work-item-box div.inner-shadow").mouseover (onWorkItemRollover);
	jQuery("div.work-item-box div.inner-shadow").mouseout (onWorkItemRollout);
	jQuery("h1#works-header").click ( worksClickHandler );
	jQuery ("div.hover").hide();	
	jQuery ( "a#work-a" ).click ( onWorkHeaderClick );
	jQuery ("div#view-box").mouseover (viewBoxRoll);
	jQuery ("div#view-box").mouseout (viewBoxRout);
	jQuery ("a#load-more").click( onLoadMoreClick );
	parsePreload();
});

function onLoadMoreClick () {
	jQuery ("div.load-more-container").append ('<div class="loading-animation"></div>');
	jQuery ("div.load-more-container div.loading-animation").hide();
	jQuery ("div.load-more-container div.loading-animation").fadeTo (500, 1);
	jQuery ( "a#load-more" ).hide();
	
	var baseurl = jQuery("link[rel=canonical]").attr( "href" );
	if ( baseurl )  {
		baseurl = baseurl.split ("?")[0];
	}
	
	var nextPage = Math.floor (portfolios.length / 6) + 1;
	var loadCount = 6;
	
	var param = "";	
	param += "json=get_recent_posts&post_type=portfolio&custom_fields=portfolio_screenshot,portfolio_description,portfolio_url,portfolio_thumbnail&count="+loadCount+"&page=" + nextPage;	
	
	jQuery.ajax (
		{
			url: baseurl + "?" + param,
			dataType: 'json',
			success: onLoadNextPagePortfolio
		}
	);
}

function onLoadNextPagePortfolio (data) { 	
	for ( var i=0, len = data.posts.length; i<len; i++ ) { 
		var newpvo = new PortfolioVO ();	
		var currentPost = data.posts[i];		
		newpvo.id = currentPost.id;
		newpvo.title = currentPost.title;
		newpvo.description = currentPost.content;
		
		var parseTags = [];
		for ( var tags_i = 0, tags_len = currentPost.tags.length; tags_i < tags_len; tags_i++ ) { 
			parseTags.push ({title:currentPost.tags[tags_i].title});			
		}
		newpvo.tags = parseTags;		
		var ssArr = currentPost.custom_fields.portfolio_screenshot[0].split (",");
		newpvo.screenshot = ssArr;	
		newpvo.thumbnail = currentPost.custom_fields.portfolio_thumbnail[0];
		newpvo.url = currentPost.custom_fields.portfolio_url[0];		
		
		portfolios.push ( newpvo );			
	}	
	appendWorkItems ();	
}
function appendWorkItems () { 	
	//show load more button
	jQuery ("div.load-more-container div.loading-animation").fadeTo (500, 0, function () { 		
		if (portfolios.length < Number (totalPortfolios) ) {
			jQuery ("a#load-more").fadeTo (500, 1);			
		} 
		jQuery (this).remove ();		
	});	
	for (var i =0, len = portfolios.length; i < len; i++ ) { 		
		var pvo = portfolios[i];
		if (!jQuery ('div.work-item-box[data='+pvo.id+']').exists() ) { 
			//apend this item;
			var str = '';			
			 str += '<div class="work-item-box"  data="' +pvo.id+ '">';
			 str += '<div style="background: url(\''+pvo.thumbnail+'\') no-repeat left top;position:absolute; width:100%; height:100%;"></div>';
			 str += '<div class="hover" style="background:url(\''+pvo.thumbnail+'\') no-repeat left bottom;position:absolute;width:100%;height:100%; display:none;"></div>';					
			 str += '<div class="inner-shadow" data="' + pvo.id + '"></div>';
			 str +='</div>';
			 jQuery ("div#works-container div.clearfix").before (str);
			 var selector = "div.work-item-box[data=" + pvo.id + "]";
			jQuery (selector).hide ();
			jQuery (selector).fadeTo (500, 1);			
			//map events
			jQuery ("div.work-item-box[data="+pvo.id+"]").click (onWorkItemClick);
			jQuery ("div.work-item-box[data="+pvo.id+"] div.inner-shadow").mouseover (onWorkItemRollover);
			jQuery ("div.work-item-box[data="+pvo.id+"] div.inner-shadow").mouseout (onWorkItemRollout);
		}
	}		
}
function viewBoxRoll () {		
	jQuery ("div#view-box div.controlNav").stop();
	jQuery ("div#view-box div.controlNav").fadeTo (500, 1);	
	return false;
}

function viewBoxRout() { 	
	jQuery ("div#view-box div.controlNav").stop();
	jQuery ("div#view-box div.controlNav").fadeTo (500, 0);	
	return false;
}
function parsePreload () { 
	totalPortfolios = Number(jQuery ("p#preload-portfolio-count").attr ("data"));	
	
	var nodes = jQuery ("div.preload");
	for ( var i=0, len=nodes.length; i < len; i++ ) {
		var p_id = jQuery (nodes[i]).attr ("data");		
		var tags = jQuery ("p#preload-portfolio-tags-" + p_id).html();				
		var newpvo = new PortfolioVO ();	
		newpvo.id = p_id;
		newpvo.title = jQuery ("p#preload-portfolio-title-" + p_id).html();			
		var tagsplit = tags.split (",");
		var tagsarr = [];		
		for  (var tags_i = 0, tags_len = tagsplit.length; tags_i<tags_len;tags_i++ ) { 
			tagsarr.push ({title:tagsplit[tags_i]});
		}		
		newpvo.tags = tagsarr;		
		var ssArr = [];				
		var sses = jQuery ("img.preload-portfolio-screenshot-" + p_id);
		for ( var ss_i = 0, ss_len = sses.length; ss_i < ss_len; ss_i++ ) { 
			ssArr.push (jQuery (sses[ss_i]).attr ("src"));			
		}		
		newpvo.screenshot = ssArr;		
		newpvo.url = jQuery ("p#preload-portfolio-url-" + p_id).html();
		newpvo.description = jQuery ("p#preload-portfolio-description-" + p_id).html();
		newpvo.thumbnail = jQuery ("img#preload-portfolio-thumbnail-" + p_id).attr ("src");		
		portfolios.push (newpvo);
	}	
}
function onWorkHeaderClick () { 	
	var target_offset = $("div#works-container").offset();
	var scrollTo = target_offset.top;	
	if ( navigator.userAgent.indexOf("Opera") ==-1 )  {
		jQuery ('html, body').animate ( {scrollTop:scrollTo}, 800, "easeInOutExpo" );
	}	else {
		jQuery ('html, body').scrollTop (scrollTo);
	}
}
function worksClickHandler () { 

}

function onWorkItemClick () {		
	
	//load on demand
	
	var p_id = jQuery(this).attr("data");
	
	var baseurl = jQuery("link[rel=canonical]").attr( "href" );
	if ( baseurl )  {
		baseurl = baseurl.split ("?")[0];
	}
	
	var param = "";	
	param += "json=get_post&id="+p_id+"&post_type=portfolio&custom_fields=portfolio_screenshot,portfolio_url";	
	
	var exist = false;
	for ( var i = 0, len = portfolios.length; i < len; i++ )  { 
		var pvo = portfolios[i];				
		if (pvo.id == p_id )  {
			exist = true;			
			openExpandedPortfolio ( pvo );			
		}
	}
	if ( !exist ) { 
		jQuery.ajax (
			{
				url: baseurl + "?" + param,
				dataType: 'json',
				success: onLoadPortfolio
			}
		);
	}
}
function onLoadPortfolio (data) {	
	//With the new preloader, this method might be deprecated.	
	var newpvo = new PortfolioVO ();		
	newpvo.id = data.post.id;
	newpvo.title = data.post.title;
	newpvo.description = data.post.content;	
	newpvo.tags = data.post.tags;	
	var ssArr = data.post.custom_fields.portfolio_screenshot.split (",");
	newpvo.screenshot = ssArr;		
	newpvo.url = data.post.custom_fields.portfolio_url[0];
	portfolios.push ( newpvo );	
	openExpandedPortfolio ( newpvo );
}
function controlNavClickListener () { 	
	var id = jQuery (this).attr ("rel" );
	
	if ( id != activeScreenshot ) { 
		jQuery ("img#portfolio-screenshot-" +activeScreenshot ).stop();
		jQuery ("img#portfolio-screenshot-" +activeScreenshot ).fadeTo (300, 0, "easeInExpo", function () { 		
			jQuery ("div#view-box img#portfolio-screenshot-" + id).fadeTo (800, 1, "easeOutExpo");
		});
		jQuery(this).addClass ("active");
		jQuery ("div.controlNav a.control[rel='"+activeScreenshot+"']").removeClass ("active");
		activeScreenshot = id;
	}
}

var activeScreenshot;
function openExpandedPortfolio (pvo) { 		
	jQuery ("ul#portfolio-tags").fadeTo ("fast", 0, function () { 
		jQuery ("ul#portfolio-tags").empty();
		for ( var i = 0, len = pvo.tags.length; i < len; i++ ) { 
			jQuery ("ul#portfolio-tags").append ("<li>"+pvo.tags[i].title+"</li>");				
		}
		jQuery ("ul#portfolio-tags").fadeTo ("fast", 1);
	} );
	//clear all children, we'll rebuild them later.	
	jQuery ("div#view-box").empty();
	
	var ssArr = pvo.screenshot;	
	var controlsStr = "";
	
	for ( var i = 0, len = ssArr.length; i < len; i++ ) { 
		jQuery ("div#view-box").append ('<img class="portfolio-screenshot" id="portfolio-screenshot-'+i+'" src="'+ssArr[i]+'" />' );				
		var controlClass = "control";
		if ( i == 0 ) { 
			controlClass += " active";
		}
		controlsStr += '<a class="' + controlClass + '" rel="'+i+'">'+(i+1)+'</a>';		
	}
	activeScreenshot = 0;
	var controlStyle = "";
	if ( len == 1 )  {
		controlStyle = "display:none;";
	}
	//append innershadow and slider controls
	jQuery ("div#view-box").append ('<div class="view-box-inner-shadow"></div>');
	jQuery ("div#view-box").append ('<div class="controlNav" style="'+controlStyle+'">');
	jQuery ("div#view-box div.controlNav").append (controlsStr);
	jQuery ("div#view-box div.controlNav a.control").click (controlNavClickListener);
	
	jQuery ("div#view-box div.controlNav").hide();	
	jQuery ("div#view-box img.portfolio-screenshot").hide();		
	
	jQuery ("div#view-box img#portfolio-screenshot-0").fadeTo (1200, 1, "easeOutExpo");
	
	jQuery("h1#portfolio-title").stop();
	jQuery("h1#portfolio-title").fadeTo("fast", 0, function () { 
		jQuery("h1#portfolio-title").html ('<a href="'+pvo.url+'" target="_blank" title="'+pvo.title+'" id="external-link">'+pvo.title+'</a>');
		jQuery("h1#portfolio-title").fadeTo ("fast", 1);
	});
	
	jQuery("p#work-details").stop();
	jQuery("p#work-details").fadeTo("fast", 0, function () {
		jQuery("p#work-details").html (pvo.description);
		jQuery("p#work-details").fadeTo ("fast", 1);
	});
	
	jQuery ("a#external-link").stop();
	jQuery ("a#external-link").fadeTo("fast", 0, function () { 
		//jQuery ("a#external-link").html(pvo.url);
		if ( pvo.url != "" ) {
			jQuery ("a#external-link").fadeTo ("fast", 1);
			jQuery("a#external-link").attr ("href", pvo.url);
		}
	});		
	
	//expand
	if ( jQuery("div#expanded").css ("height") != "580px" ) {
		jQuery ("div#expanded").stop();
		jQuery("div#ribbon-container").stop();
		jQuery("div#expanded-work-item").stop();
		
		var viewportwidth;
		 
		if (typeof window.innerWidth != 'undefined')
		{		
			viewportwidth = window.innerWidth
		}
		
		var expandedHeightProp;
		
		if (viewportwidth < 639) { 
			expandedHeightProp = "380px";
		} else { 
			expandedHeightProp = "580px";
		}
		
		jQuery ("div#expanded").animate ({height:expandedHeightProp}, 1000, "easeInOutExpo", function () {			
				if ( navigator.userAgent.indexOf("Opera") ==-1 )  {
					jQuery ('html, body').animate ( {scrollTop:116}, 500, "easeInOutExpo", function() {
						
					});
				}	else {
					jQuery ('html, body').scrollTop (116);
					
				}
				//jQuery ('html, body').animate ( {scrollTop:116}, 500, "easeInOutExpo" );			
		});			
		jQuery("div#ribbon-container").animate ({top:0}, 1100, "easeInOutExpo");	
		
	} else { 
		if ( navigator.userAgent.indexOf("Opera") ==-1 )  {
			jQuery ('html, body').animate ( {scrollTop:116}, 500, "easeInOutExpo", function () {
				
			});
		}	else {
			jQuery ('html, body').scrollTop (116);			
		}		
	}
}
function showContent (pvo) { 
	
}
function onWorkItemCollapse () {
	jQuery ("div#expanded").stop();
	jQuery("div#ribbon-container").stop();
	jQuery("div#expanded-work-item").stop();
	jQuery ("div#expanded").animate ({height: "0px"}, 1000, "easeInOutExpo");
	
	jQuery ("div#ribbon-container").animate ({top:-600}, 1100, "easeInOutExpo");		
	//jQuery("div#expanded-work-item").animate ({top:0}, 1200, "easeInOutExpo");
	
}
function onWorkItemRollover (e) {		
	var dataTarg = jQuery(e.target).attr ("data");
	var node = jQuery ("div.work-item-box[data="+dataTarg+"]");	
	if ( node ) { 
		var hoverChild =  jQuery(node).children ("div.hover");						
		jQuery (hoverChild).stop();
		jQuery (hoverChild).fadeTo (300, 1);
	}
}
function onWorkItemRollout (e) {
	var dataTarg = jQuery(e.target).attr ("data");
	var node = jQuery ("div.work-item-box[data="+dataTarg+"]");
	
	if ( node ) { 
		var hoverChild =  jQuery(node).children ("div.hover");						
		jQuery (hoverChild).stop();
		jQuery (hoverChild).fadeTo (300, 0);
	}
}