// JavaScript Document

$(document).ready(function(){
	$("#content-container > ul").tabs(
		{
			fx: {
				height: 'toggle',
				opacity: 'toggle',
				duration: 'normal'
			}
		})
		.find("li:first").hide();
	$("#content-container div:first").css("padding", 0);
	
	$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
		if($(ui.tab).text() == "PRINT"){
			$("#portfolio-categories a").unbind();
			portfolio.categories();
		}
		if($(ui.tab).text() == "WEB"){
			$(".icon-container a").unbind();
			portfolio.init();
		}
	});
});

var portfolio = {
	init: function(){
		$(".icon-container a").click(function(){
			var url = $(this).attr("href");
			$(this).fadeTo("slow", .3);
			$(".portfolio-piece").fadeOut("slow", function(){
				$(this).load(url, function(){
					$(this).fadeIn("slow");
					portfolio.views();
				});
			});
			this.blur();
			return false;
		}).each(
			function(){
				var imgSrc = $("img",$(this)).attr("src").replace(".gif", ".jpg").replace("icons", "portfolio");
				$.preloadImages(imgSrc)
			}
		);
		
		portfolio.views();
	},
	
	categories: function(){
		$("#portfolio-categories a").click(function(){
			var tabContainer = $(this).parent().parent().parent();
			var href = $(this).attr("href");
			$(tabContainer).fadeTo("slow", 0, function(){
				$(this).load(href, function(){
					$(this).animate({opacity: 1.0}, "slow", function(){
						portfolio.categories();
						portfolio.init();
					});
				});
			});

			this.blur();
			return false;
		});
		
		$("#portfolio-categories.small a").hover(function(){
				var position = $(this).offset();
				var top = position.top + 55;
				var left = position.left;
				$("<div id='portfolio-category-label' style='position:absolute;left:"+left+"px;top:"+top+"px;z-index:4;'>"+ $("span", $(this)).text() +"</div>").appendTo("body");
			},
			function(){
				$("#portfolio-category-label").remove();
			}
		);
	},
	
	views: function(){
		$(".views-container a").click(function(){
			var href = $(this).attr("href");
			$(this).fadeTo("slow", .3);
			$(".pic-container").fadeTo("slow", 0.0, function() {
					var container = $(this);
					var img = $("img", $(container));
					$(img).remove();//.attr("src", href);
					$(container).html("<img src='" + href + "'>");
					setTimeout(function(){$(container).fadeTo("slow", 1.0)}, 500);
			});
			this.blur();
			return false;
		}).each(function(){$.preloadImages($(this).attr("href"))});
	}
}

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