$(function() {                     
	
	$(window).load(function () {
		
		var
			speed = 1000,  // animation speed
			$wall = $('#wrapper').find('#grid')
		;

	    var defaultSize = [690, 750]; // expanded box size: [width , height]
	    $wall.masonry({
	        singleMode: false,
	        columnWidth: 235,
	        resizeable: true,
	        itemSelector: '.post:not(.invis)',
	        animate: true
	    });
	
		function restoreBoxes() {
            var len = $('.expanded').length - 1;
            $('.expanded').each(function (i) {
                var box = $(this).data('size');
                $(this).find('.expandable').hide('slow');
                $(this).find('.hideable').show('slow');
                $(this).animate({
                    width: (box[0] || 100),
                    height: (box[1] || 'auto')
                }, function () {
				$(this).css('background', '#ffffff');
                    if (i >= len) {
                        $wall.masonry();
                    }
                }).removeClass('expanded');
            })
        }

		$(document).ready(function() {
			var totalHeight = $('.main_reel').find('.post_main_content').height();
            var size = ($('.main_reel').attr('data-size')) ? $('.main_reel').attr('data-size').split(',') : defaultSize;
			$('.main_reel').css('background', 'transparent');
            $('.main_reel')
            // save original box size
            .data('size', [$('.main_reel').width(), $('.main_reel').height()]).animate({
                width: size[0],
                height: totalHeight
            }, function () {
                // show hidden content when box has expanded completely
                $('.main_reel').find('.expandable').show('slow');
                $('.main_reel').find('.hideable').hide('slow');
                $wall.masonry();
            });
            restoreBoxes();
            $('.main_reel').addClass('expanded');
		});
		
		$('.switcher_link').click(function() {
			$switcherNumber = $(this).attr("id").slice(9);
			if($(this).find('.switcher_block').css('background') != "#0099cc") {
				$(this).parents('.post').find('.switcher_block').css('background', '#666666');
				$(this).parents('.post').find('#switcher_' + $switcherNumber + ' .switcher_block').css('background', '#0099cc');
				$(this).parents('.post').find('.video').fadeOut(50).css('display', 'none');
				$(this).parents('.post').find('#video_' + $switcherNumber).fadeIn('fast');
			}
		})
		
		$('#logo_link').click(function() {
			if(!$('.main_reel').is('.expanded')) {
				$('#work_list a').removeClass('current');
				$('#work_list .all').parent().addClass('current');
				$('#nav_list a').css('color', '#666');
				$('#work_link').css('color', '#ffff00');
				$('.section').not('invis').find('.section_content').fadeOut('slow');
				$('.section').not('invis').addClass('invis').fadeOut(speed);
				$('.section').not('.invis').addClass('invis').fadeOut(speed);
				$('.section').find('.section_content').fadeOut('slow');
				$wall.children('.invis')
					.not("#contact_div").toggleClass('invis').fadeIn(speed);
				$('.expanded').css('background', '#ffffff');
	            $('.expanded').find('.expandable').hide('slow');
	            $('.expanded').find('.hideable').show('slow');
	            $('.expanded').animate({
	                width: "220px",
	                height: "290px"
				});
				var totalHeight = $('.main_reel').find('.post_main_content').height();
	            var size = ($('.main_reel').attr('data-size')) ? $('.main_reel').attr('data-size').split(',') : defaultSize;
				$('.main_reel').css('background', 'transparent');
	            $('.main_reel')
	            // save original box size
	            .data('size', [$('.main_reel').width(), $('.main_reel').height()]).animate({
	                width: size[0],
	                height: totalHeight
	            }, function () {
	                // show hidden content when box has expanded completely
	                $('.main_reel').find('.expandable').show('slow');
	                $('.main_reel').find('.hideable').hide('slow');
	                $wall.masonry();
	            });
	            restoreBoxes();
	            $('.main_reel').addClass('expanded');
			}
		});

	    $('.work').click(function () {
			$('#nav_list a').css('color', '#666');
			$('#work_link').css('color', '#ffff00');
			//var scrollHeight = $(this).offset();
			//$('html, body').animate({scrollTop: scrollHeight}, 'fast');
	        if (!$(this).is('.expanded')) {
				$('.section').not('.invis').addClass('invis').fadeOut(speed);
				$('.section').find('.section_content').fadeOut('slow');
	            var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize;
				$(this).css('background', 'transparent');
				if($(this).has('.board_photo')) {
					$postID = $(this).attr('ID');
					$numberOfBoards = ('#' + $postID + ' .board_photo').length / 2;
					for(var i = 1; i < $numberOfBoards; i++) {
						var $photoSource = $('#' + $postID + ' .board_source' + i).text();
						$('#' + $postID + ' .board_photo' + i).append('<img src="' + $photoSource + '" alt="board" />');
					}
				}
				var totalHeight = $(this).find('.post_main_content').height();
	            $(this)
	            // save original box size
	            .data('size', [$(this).width(), $(this).height()]).animate({
	                width: size[0],
	                height: totalHeight
	            }, function () {
	                // show hidden content when box has expanded completely
	                $(this).find('.expandable').show('slow');
	                $(this).find('.hideable').hide('slow');
					$wall.masonry();
					var $divOffset = $(this).offset().top - 20;
					$('html, body').animate({scrollTop : $divOffset + 'px'}, 'slow');
	            });
	            restoreBoxes();
	            $(this).addClass('expanded');
	        }
	    });
	
		// When using the .children() function of jQuery, 
		// the element to which it is applied must be the 
		// direct parent of the child element. For example, 
		// if there was a div called #post within a div called #content
		// within a div called #wrapper, calling $('#wrapper').child('#post')
		// would turn up nothing. $('#content').child('#post') would work, however.
		// To quote the jquery API: 
		// 		"The .find() and .children() methods are similar, 
		// 		except that the latter only travels a single level down the DOM tree."
	
		$('#work_list a').click(function(){
			restoreBoxes();
			$('#nav_list a').css('color', '#666');
			$('#work_link').css('color', '#ffff00');
			$('.section').addClass('invis').fadeOut(speed);
			$('.section').find('.section_content').fadeOut('slow');
			var $workClass = '.' + $(this).attr('class');
			if($workClass=='.all') {
				// show all hidden boxes
				$wall.children('.invis')
					.not("#contact_div").toggleClass('invis').fadeIn(speed);
			} else {  
			 	// hide visible boxes 
			 	$wall.children().not($workClass).not('.invis')
			    	.toggleClass('invis').fadeOut(speed);
			    // show hidden boxes
			  	$wall.children($workClass+'.invis')
			    	.toggleClass('invis').fadeIn(speed);
			}
			$('#work_list li').removeClass('current');
			$('#work_list ' + $workClass).parent().addClass('current');
			$wall.masonry();
		});
		
		$('.section_link').click(function() {
			$('#work_list li').removeClass('current');
			$('#work_list .all').parent().addClass('current');
			$('#nav_list a').css('color', '#666');
			$(this).css('color', '#ffff00');
			var $linkElement = $(this).attr("id").slice(0, -5);
			$wall.children('.invis')
				.not('.section').toggleClass('invis').fadeIn(speed);
			if($('.expanded').size()) {
				var size = ($('.expanded').attr('data-size')) ? $('.expanded').attr('data-size').split(',') : defaultSize;
				var box = $('.expanded').data('size');
				$('.expanded')
	            // save original box size
	            .data('size', [$('.expanded').width(), $('.expanded').height()]).animate({
	                width: (box[0] || 100),
	                height: (box[1] || 'auto')
	            }, function () {
	                // show hidden content when box has expanded completely
		            $('.expanded').find('.expandable').hide('slow');
		            $('.expanded').find('.hideable').show('slow');
					$('.expanded').css('background', '#ffffff');
					$('.expanded').removeClass('expanded');
					$('.section').not('invis').find('.section_content').fadeOut('slow');
					$('.section').not('invis').addClass('invis').fadeOut(speed);
					$('#' + $linkElement + "_div").removeClass('invis').fadeIn(speed);
					$('#' + $linkElement + "_div").find('.section_content').fadeIn(speed);
					$wall.masonry();
	            });
			} else {
				$('.section').not('invis').find('.section_content').fadeOut('slow');
				$('.section').not('invis').addClass('invis').fadeOut(speed);
				$('#' + $linkElement + "_div").removeClass('invis').fadeIn(speed);
				$('#' + $linkElement + "_div").find('.section_content').fadeIn(speed);
				$wall.masonry();
			}
		});
		
		$('.work .close_box').click(function() {
			var box = $(this).parents('.post').data('size');
            $(this).parents('.post').find('.expandable').hide('slow');
            $(this).parents('.post').find('.hideable').show('slow');
            $(this).parents('.post').animate({
                width: (box[0] || 100),
                height: (box[1] || 'auto')
            }, function() {
				$(this).parents('.post').css('background', '#ffffff');
				$('.post').removeClass('expanded');
				$wall.masonry();
			});	
		});
		
		$('.section .close_box').click(function() {
			$('#nav_list a').css('color', '#666');
			$('#work_link').css('color', '#ffff00');
			$(this).parents('.post').addClass('invis').fadeOut(speed);
			$(this).parents('.post').find('.section_content').fadeOut('slow');
			$wall.masonry();
		});
		
		$('#work_link').click(function() {
			$('#nav_list a').css('color', '#666');
			$('#work_link').css('color', '#ffff00');
			$('.section').addClass('invis').fadeOut(speed);
			$('.section').find('.section_content').fadeOut('slow');
			$wall.masonry();
		});
	});
});