/* *************************
 * nerd.of.steel portfolio script
 * @author: Rocco Augusto
 * @url: http://www.nerdofsteel.com 
** ************************/

var slid = false;
var active = false;
var view = false;
var itemsLength = 0;
var j = 0;
var img = [];

jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments[0].length; i++)
  {
    jQuery("<img>").attr("src", arguments[0][i]);
  }
}


var showcase = {
	init: function(){
		var portfolio = $('#portfolio li');
		
		portfolio.each(function(i){
			var left = $(this).position().left,
				width = $('#portfolio li:eq(' + i + ')').width(),
				x = (1000-parseInt(width))/2;
				
			slide = false;
				
			if(i == 0) $(this).animate({ 'left': '-=' + x + 'px' }, 500);		
			if(i == 2) $(this).animate({ 'left': '+=' + x + 'px' }, 500, function() { slid = true; active = false; });
		});
	},
	preLoad: function(){
		$.getJSON('/parse.php?u=json', function(x){ 
			var items = x.items;
			
			for(i=0;i<items.length;i++)
			{
				img.push(items[i].image.replace("<img src='",'').replace("' alt='' />",''));
				
				if(i == items.length-1) 
				{
					$.preloadImages(img);
					showcase.loadImages();
				}
			}
		});
	},
	loadImages: function(){
		$.getJSON('/parse.php?u=json', function(x){ 
			var portfolio = $('#portfolio');
			var items = x.items;
			var html = '';
			
			itemsLength = parseInt(items.length-1);
			
			for(i=j;i<j+3;i++)
			{
				switch(i)
				{
					case (i=j+0):
						html += '<li id="front" style="width:' + items[i].width + 'px"><a href="' + items[i].link + '" rel="' + i + '">' + items[i].image + '</a></li>';
						break;
					case (i=j+1):
						html += '<li id="middle" style="width:' + items[i].width + 'px"><a href="' + items[i].link + '" rel="' + i + '">' + items[i].image + '</a></li>';
						break;
					case (i=j+2):
						html += '<li id="back" style="width:' + items[i].width + 'px"><a href="' + items[i].link + '" rel="' + i + '">' + items[i].image + '</a></li>';
						break;
					default:
						break;
				}
			}
			
			//apply HTML markup for portfolio
			portfolio.html(html);
			
			//center showcase images
			portfolio.children('li').each(function(i){
				var width = $('#portfolio li:eq(' + i + ')').width(),
					x = (1000-parseInt(width))/2;
		
					$(this).css('visibility','hidden').animate({ 'left': '+=' + x + 'px' }, 10, function() { 
						$(this).css('visibility', 'visible');
					});
			});
		});
	
		//slideshow animation
		setTimeout(function() { showcase.init(); }, 1000);
	},
	hover: function(x,pos,on){
		var portfolio = x,
			pos = (pos == 'front') ? '-' : '+';
			
		if(active == false) {
			active = true;
			if($('#portfolio li:eq(2)').attr('class') == 'selected' && portfolio.attr('id') == 'middle') {
				$('#portfolio li:eq(2)').animate({ 'left': '+=150px' }, 'fast', 
					function() {
						pos = (pos == '+') ? '-' : '+';
						
						$('#portfolio li').removeClass('selected');
						portfolio.addClass('selected');
						$('#portfolio li:eq(2)').animate({ 'left': '-=150px' }, 'fast', function(){ active = false; });
				});
			}
			else if($('#portfolio li:eq(0)').attr('class') == 'selected' && portfolio.attr('id') == 'middle') {
				$('#portfolio li:eq(0)').animate({ 'left': '-=150px' }, 'fast', 
					function() {
						pos = (pos == '+') ? '-' : '+';
						
						$('#portfolio li').removeClass('selected');
						portfolio.addClass('selected');
						$('#portfolio li:eq(0)').animate({ 'left': '+=150px' }, 'fast', function(){ active = false; });
				});
			}
			else if(portfolio.attr('id') == 'front' && $('#portfolio li:eq(2)').attr('class') == 'selected')
			{
				$('#portfolio li:eq(2)').animate({ 'left': '+=150px' }, 'fast', function() { $('#portfolio li:eq(2)').animate({ 'left': '-=150px' }, 'fast')});
				$('#portfolio li:eq(0)').animate({ 'left': '-=150px' }, 'fast', 
					function() {						
						$('#portfolio li').removeClass('selected');
						portfolio.addClass('selected');
						$('#portfolio li:eq(0)').animate({ 'left': '+=150px' }, 'fast', function(){	active = false;	});
				});
			}
			else if(portfolio.attr('id') == 'back' && $('#portfolio li:eq(0)').attr('class') == 'selected')
			{
				$('#portfolio li:eq(0)').animate({ 'left': '-=150px' }, 'fast', function() { $('#portfolio li:eq(0)').animate({ 'left': '+=150px' }, 'fast')});
				portfolio.animate({ 'left': '+=150px' }, 'fast', 
					function() {						
						$('#portfolio li').removeClass('selected');
						portfolio.addClass('selected');
						portfolio.animate({ 'left': '-=150px' }, 'fast', function(){ active = false; });
				});
			}
			else {
				$('#portfolio li:eq(1)').animate({ 'left': pos + '=150px' }, 'fast', 
					function() {
						pos = (pos == '+') ? '-' : '+';
						
						$('#portfolio li').removeClass('selected');
						portfolio.addClass('selected');
						$('#portfolio li:eq(1)').animate({ 'left': pos + '=150px' }, 'fast', function(){  active = false; });
				});
			}
		}
	},
	navigate: function(x) {
		var portfolio = $('#portfolio li');
		
		// "0" = prev and "1" = next
		if (x == 0) 
		{
			j = j-3; 
			if(j<0) j = itemsLength-2;
		} 
		else 
		{
			j = j+3;
			if(j>itemsLength-2) j = 0;
		}
		
		//center showcase images
		portfolio.each(function(i){
			var width = $('#portfolio li:eq(' + i + ') img').width(),
				pos = $(this).position().left;
				x = (1000-parseInt(width))/2;
				v = i;
				
			active = true;
	
			if(pos > x) 
			{
				$(this).animate({ 'left': '-=' + parseInt(pos-x) + 'px' }, 500, function() { 
					$(this).fadeOut('fast', function(i) {
						if($(this).attr('id') == 'back') showcase.loadImages();							 
					});  
				});
			}
			else
			{
				$(this).animate({ 'left': '+=' + parseInt(x-pos) + 'px' }, 500, function(i) { 
					$(this).fadeOut('fast', function(i) { 
						if($(this).attr('id') == 'back') showcase.loadImages();	 
					}); 
				});
			}
		});
	},
	view: function(i,n,p) {
		var name = $('#portfolio #' + n),
			preview = $('#preview');
		
		name.addClass('portfolio-view');
		
		$.getJSON('/parse.php?u=json', function(data){
			var items = data.items[i],
				html = '';
				
				html += '<div id="right">';
				html += '  <h2>' + items.title + '</h2>';
				html += '  <div class="description">' + items.description;
				html += '  <p><strong>URL:</strong> <a href="' + items.link + '" target="_blank">' + items.link + '</a></p>';
				html += '  </div>';
				html += '  <button rel="' + p + '">go back</button>';
				html += '</div>';
				
				preview.empty().html(html).fadeIn('fast');
		});
	},
	goBack: function(p){
		$('#preview').fadeOut('fast', function(){
			var id = $('#portfolio .portfolio-view').attr('id');	
	
			$('#portfolio #' + id).animate({ 'left': '+=' +  p + 'px'}, 500, function(){
				$(this).removeClass('portfolio-view');
				$('#portfolio li[id!=' + id +']').animate({ 'opacity': 1 }, 500);
				$('#showcase #prev, #showcase #next').css('display','block');
				
				active = false;
				view = false;
			});
		});
	}
}

$(function() {
	var portfolio = $('#portfolio li'),
		buttons = $('#showcase #next, #showcase #prev');
	
	
	//IE Fixes
	if($.browser.msie && $.browser.version < '8.0') {
		$('#portfolio').css({ position: 'absolute', width: '100%', marginLeft: '-75px' });
		$('#about p').css('margin-top','0');
	}
	
	//slideshow z-index
	$('#portfolio li:first-child').css('z-index','20');
	$('#portfolio li:last-child').css('z-index','10');
	
	//portfolio item select
	$('#portfolio a').live('click', function(){
		var id = $(this).parent('li').attr('id'),
			pos = $(this).parent('li').position().left,
			rel = $(this).attr('rel');
		
		$('#portfolio li[id!=' + id + ']').each(function(i) {
			var i = i;
			
			if(!view) {
				$(this).animate({ 'opacity': 0 }, 500, function(){
					if(i==1) {
						$('#' + id).animate({ 'left': '-=' + pos }, 500, function(){ showcase.view(rel,id,pos) });
						view = true;
						active = true;
					}
				});
				$('#showcase #prev, #showcase #next').css('display','none');
			}
		});
		
		return false;											  
	});
	
	//portfolio go back
	$('#preview button').live('click', function(){ showcase.goBack($(this).attr('rel')); });
	
	//image hover
	portfolio.live('mouseover', function(){
		if(slid) {
			if($(this).attr('id') == 'front' && $(this).attr('class') != 'selected')
				showcase.hover($(this),'back',true);
				
			if($(this).attr('id') == 'middle' && $(this).attr('class') != 'selected')
				showcase.hover($(this),'middle',true);
			
			if($(this).attr('id') == 'back' && $(this).attr('class') != 'selected')
				showcase.hover($(this),'front',true);
		}	
	});
	
	//scroll through portfolio
	$('#showcase #next').live('click', function() {	if(active == false) showcase.navigate(1); return false; });
	$('#showcase #prev').live('click', function() { if(active == false) showcase.navigate(0); return false;	});
	
	buttons.hover(function() { buttons.stop().animate({ 'opacity': 1 }, 200); }, function() { buttons.stop().animate({ 'opacity': 0 }, 200); });
	
	//slideshow animation
	setTimeout(function() { buttons.animate({ 'opacity': 0 }, 200); }, 2000);
	
	//load images
	showcase.preLoad();
});