$(function() {
	
	$(window)._scrollable();
	
	aboutOpened = false;
	$('#aboutbtn').click(function(e) {
		if (aboutOpened == false) {
			aboutOpened = true;
			var newH = $('#about .case').height() + 30;
			$('#about').stop().animate({height: newH}, 1000);
		} else {
			aboutOpened = false;
			if (jQuery.browser.msie) {
				$('#about').stop().animate({height: 1}, 1000);
			} else {
				$('#about').stop().animate({height: 0}, 1000);
			}
		}
		e.preventDefault();
	});
	
	$('#about .closebtn').click(function(e) {
		aboutOpened = false;
		if (jQuery.browser.msie) {
			$('#about').stop().animate({height: 1}, 1000);
		} else {
			$('#about').stop().animate({height: 0}, 1000);
		}
		e.preventDefault();
	});
	
	projects.init();

});

/*
1) Add item name to an array each time an item is loaded
2) Start a timeout to check for item name being in loaded array
3) When it is, animate and delete timeout
4) Ideally we would load that one first. Perhaps we can run the address first and get the load statement in first.
*/

var projects = {
	opened: false,
	animating: false,
	openNext: false,
	loadedArr: new Object(),
	initCalled: new Boolean(),
	curr: "",
	next: "",
	oldTop: 0,
	oldLeft: 0,
	tooltipsReady: false,
	transTime: .5 * 1000,
	numTransTime: .25 * 1000,
	closebtn: '<div class="closebtn"><a href="#/" rel="address:/">X</a></div>',
	init: function() { // initialize
		
		initCalled = true;
		
		// Event handlers
	    $.address.init(function(event) {
			if (typeof(event.pathNames[0]) != "undefined") {
				var thing = '<img src="' + $('#'+event.pathNames[0]).children().children().children().children(':first').html() + '" class="tipme" title="' + $('#'+event.pathNames[0]).children().children().children('.description:first').children('h4:first').text() + '" alt="" />';
				$('#'+event.pathNames[0]).children().children().children().children(':first').html(thing);
				$('#'+event.pathNames[0]).children().children().children().children(':first').children('img').load(function() {
					var newL = - ($('#'+event.pathNames[0]).children().children().children().children().children(':first').width() - 300) / 2;
					var newT = - ($('#'+event.pathNames[0]).children().children().children().children().children(':first').height() - 150) / 2;
					var newM = $(this).height();
					$('#'+event.pathNames[0]).children().children().children('.description:first').css("margin-top", newM);
					$('#'+event.pathNames[0]).children().children().children().children().children(':first').css("left", newL);
					$('#'+event.pathNames[0]).children().children().children().children().children(':first').css("top", newT);
					$('#'+event.pathNames[0]).children().children().children().children().children(':first').css("opacity", 0);
					$('#'+event.pathNames[0]).children().children().children().children().children(':first').animate({opacity: 1}, 250, function() {
						$(this).parent().removeClass('loading');
					});
					projects.loadedArr[event.pathNames[0]] = true;
					projects.next = event.pathNames[0];
					projects.open();
					projects.load();
				});
			} else {
				projects.load();
			}
	    }).change(function(event) {
			if (event.value == '/') {
				// do nothing
			} else {
				// open object, but the click() function is taking care of this.
			}
	    }).internalChange(function(event) {
	        // alert('internalChange: ' + event.value);
	    }).externalChange(function(event) {
	        // alert('externalChange: ' + event.value);
			if (initCalled == false) {
				$('#'+event.pathNames[0]).children('.case').children('.innercase').children('.content').children('a:first').trigger("click");
				initCalled = false;
			} else { 
				initCalled = false;
			}
	    });
	
		$('.item .case .content a').each(function() {
			$(this).click(function(e) {
				projects.openNext = false;
				if ($(this).parent().hasClass('loading') == false && projects.animating == false && projects.curr !== $(this).parents('.item').attr('id')) {
					if (projects.opened == true) { // a project is already opened
						projects.next = $(this).parents('.item').attr('id');
						projects.openNext = true;
						projects.close();
					} else { // no projects are currenty open
						projects.next = $(this).parents('.item').attr('id');
						projects.open();
					}
				}
			});
		});
		
	},
	load: function() {
		$('.loading').each(function() {
			if($(this).children(':first').hasClass('tipme')) {
				// image is already loaded
			} else if ($(this).hasClass('loading-swf')) {
				var thing = '<object title="' + $(this).parent().parent().children('.description:first').children('h4:first').text() + '" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="375" id="' + $(this).parent().parent().parent().parent().children('.number:first').text() + '" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="' + $(this).html() + '" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="' + $(this).html() + '" quality="high" bgcolor="#000000" width="500" height="375" name="' + $(this).parent().parent().parent().parent().children('.number:first').text() + '" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></object>';
				$(this).html(thing);
				$(this).children(':first').load(function() {
					var newL = - ($(this).parent().children(':first').width() - 300) / 2;
					alert(newL);
					var newT = - ($(this).parent().children(':first').height() - 150) / 2;
					var newM = $(this).height();
					$(this).parent().parent().parent().children('.description').css("margin-top", newM);
					$(this).css("left", newL);
					$(this).css("top", newT);
					$(this).css("opacity", 0);
					$(this).animate({opacity: 1}, 1000, function() {
						$(this).parent().removeClass('loading');
					});
				});
			} else {
				var thing = '<img src="' + $(this).html() + '" class="tipme" title="' + $(this).parent().parent().children('.description:first').children('h4:first').text() + '" alt="" />';
				$(this).html(thing);
				$(this).children('img').load(function() {
					var newL = - ($(this).parent().children(':first').width() - 300) / 2;
					var newT = - ($(this).parent().children(':first').height() - 150) / 2;
					var newM = $(this).height();
					$(this).parent().parent().parent().children('.description').css("margin-top", newM);
					$(this).css("left", newL);
					$(this).css("top", newT);
					$(this).css("opacity", 0);
					$(this).animate({opacity: 1}, 1000, function() {
						$(this).parent().removeClass('loading');
					});
				});
			}
		});
		
		// START TOOLTIPS
		$('.tipme').tooltip({
			track: true,
			delay: 0,
			showURL: false,
			showBody: false,
			fade: 500
		});
	},
	open: function() {
		this.opened = true;
		this.openNext = false;
		this.animating = true;
		this.curr = this.next;
		var theContent = $('#'+this.curr).children('.case').children('.innercase').children('.content');
		
		// change page title
		$('head title').text("IAMYOURFAVORITE (365 days of creativity) - " + theContent.parent().children('.description').children('h4').text());
		
		// set oldTop and oldLeft so we know where to return to
		this.oldTop = theContent.children(':first').children(':first').css("top");
		this.oldLeft = theContent.children(':first').children(':first').css("left");
		
		// turn off hand cursor
		theContent.css("cursor", "default");
		
		// bring next to top
		$('#'+this.curr).css("z-index", 5000);
		
		// fade out number
		$('#'+this.curr).children('.number').animate({opacity: 0}, this.numTransTime);
		
		// set and apply width to description before height to avoid odd text wrapping issues
		var newWidth = theContent.children(':first').children(':first').width();
		var padding = parseInt(theContent.parent().children('.description').css("padding-left")) + parseInt(theContent.parent().children('.description').css("padding-right"));
		theContent.parent().children('.description').css("width", newWidth - padding); // subtract 20 to account for 10 padding on either side
		
		// set height and animate
		var newHeight = theContent.parent().children('.description').height() + theContent.children(':first').children(':first').height() + padding;
		theContent.children(':first').children(':first').animate({top: 0, left: 0}, this.transTime-50);
		theContent.parent().animate({width: newWidth, height: newHeight}, this.transTime, function() {
			projects.animating = false;
		});
		
		// animate everything to the left if we are in the third column
		if ($('#'+this.curr).hasClass('col-3')) {
			var newL = $('#'+this.curr).width() - theContent.children(':first').children(':first').width();
			$('#'+this.curr).children('.case').animate({left: newL}, this.transTime);
		}
		
		$(window).scrollTo('#'+this.curr, 1000, {top:-20});
		
		// add our close button to the opened item
		theContent.append(this.closebtn);
		theContent.children('.closebtn').css("opacity", 1);
		theContent.mouseenter(function() {
			$(this).children('.closebtn').stop().animate({opacity: 1}, 300);
		});
		theContent.mouseleave(function() {
			$(this).children('.closebtn').stop().animate({opacity: 0}, 300);
		});
		theContent.children('.closebtn').click(function() {
			$.address.value($(this).attr('href'));
			projects.close();
		});
	},
	close: function() {
		projects.animating = true;
		var theContent = $('#'+this.curr).children('.case').children('.innercase').children('.content');
		
		// fade out number
		$('#'+this.curr).children('.number').animate({opacity: 1}, this.transTime);
		if ($('#'+this.curr).hasClass('col-3')) {
			$('#'+this.curr).children('.case').animate({left: 0}, this.transTime);
		}
		var oldWidth = $('#'+this.curr).width();
		var oldHeight = $('#'+this.curr).height();
		var oldTop = -(theContent.children(':first').children(':first').height() - 150) / 2;
		var oldLeft = -(theContent.children(':first').children(':first').width() - 300) / 2;
		theContent.children(':first').children(':first').animate({top: oldTop, left: oldLeft}, this.transTime);
		theContent.parent().animate({width: oldWidth, height: oldHeight}, this.transTime, function() {
			//$.tooltip.block();
			$('head title').text("IAMYOURFAVORITE (365 days of creativity)");
			projects.opened = false;
			projects.animating = false;
			$('#'+projects.curr).css("z-index", 500);
			theContent.css("cursor", "pointer");
			projects.curr = "";
			
			if (projects.openNext == true) {
				projects.open();
			}
		});
		theContent.children('.closebtn').remove();
	}
};