jQuery(document).ready(function($){

	//set initial state of all contents
	
	$('article[class*=post]').hide();
	$('div[class*=teaser]').show();
	$.each($('div[class*=teaser]'), function(index, value){
		$(value).css({width:smallWidth, height:smallHeight});
	})
	$('div#teasersFilters').hide();
	
	var loadingSpinner = $('div#completeLoadingSpinner');
	
	
	//interactive bindings
	$('div[class*=teaser]').mouseout(function (){
		$(this).find('h5').stop(true, false);
		$(this).find('h5').css({opacity:1});
		$(this).find('h5').animate({opacity:"0"}, {duration:350, easing:"easeOutCubic", queue:false}); 
	});
	$('div[class*=teaser]').mouseover(function (){
		$(this).find('h5').stop(true, false);
		$(this).find('h5').css({opacity:0});
		$(this).find('h5').show();
		$(this).find('h5').animate({opacity:"1"}, {duration:600, easing:"easeOutCubic", queue:false}); 
	});
	$('div[class*=teaser]').click(function (e){
		e.preventDefault();
		if(!$(this).data("selected")){
			resetSelectedStatesOnTeasers();
			$(this).data("selected", true);
			$(this).addClass("teaser-selected");
			$(this).find("div.cat-base").addClass("cat-selected");
			var teaserID = this.id.replace("post-", "").replace("-teaser", "");
			loadCompleteArticle(teaserID);
		}else{
			$(this).data("selected", false);
			$(this).removeClass("teaser-selected");			
			$(this).find("div.cat-base").removeClass("cat-selected");
			removeCompleteArticle();
		}
	});
	// filters and shuffle
	$('a#filtersTitle').click(function(e){
		e.preventDefault();
		if($('div#teasersFilters').css('display') == 'none'){
			$(this).find('span').html("-");
			$('div#teasersFilters').show();
		}else{
			$(this).find('span').html("+");
			$('div#teasersFilters').hide();
		}
		layoutTeasers();
	});
	$('button#shuffleTeasersButton').click(function(){
		e.preventDefault();
		console.log("shuffle teasers");
	})
	$('div#teasersFilters li a').click(function(e){
		e.preventDefault();
		var cats = new Array();
		switch(this.id){
			case "devFilter":
				cats.push("cat-flash");
				cats.push("cat-webdev");
				break;
			case "digiMarketingFilter":
				cats.push("cat-email");
				cats.push("cat-banners");
				break;
			case "vidAnimFilter":
				cats.push("cat-video");
				cats.push("cat-animation");
				break;
			case "designFilter":
				cats.push("cat-design");
				break;
		}
		var display;
		if($(this).find('span').html() == "hide"){
			$(this).find('span').html("show");
			display = false;
		}else{
			$(this).find('span').html("hide");
			display = true;
		}

		for(var i=0; i<cats.length; i++){
			if(display){
				$('div.'+cats[i]).parent().show();
			}else{
				$('div.'+cats[i]).parent().hide();
			}
		}
		layoutTeasers(true);
	});
	//relayout teasers on a browser resize
	$(window).resize(function() {
		layoutTeasers();
	});
	
	
	function resetSelectedStatesOnTeasers(){
		$.each($('div[class*=teaser]'), function(index, value){
			$(value).data("selected", false);
			$(value).removeClass("teaser-selected");			
			$(value).find("div.cat-base").removeClass("cat-selected");
		});
	}
	
	//set vars for default dimensions
	var smallWidth = 100;
	var smallHeight = 100;
	var spacer = 20;	
	var origin;
	var containerWidth;	
	var rows;
	
	function layoutTeasers(animate){
		var playAnimation = (typeof animate != "undefined" && animate == true) ? true : false;
		var teasers = $('div[class*=teaser]');			
		//get overall container width
		containerWidth = $('div#teasersHolder').width();

		//set the origin 
		origin = $('div#teasersHolder').position();
		var leftPos = origin.left;
		var topPos = origin.top;
		//convert the array of teasers to a matrix for processing
		var results = convertTeaserArrayToMatrix(teasers);		
		rows = results.matrix;
		var maxCols = results.maxCols;
		
		for(var r=0; r < rows.length; r ++ ){		
			for(var c=0; c < rows[r].length; c++){
				if(c > 0){
					leftPos += smallWidth + spacer;
				}else{
					leftPos = origin.left;					
				}				
				if(r > 0 && c == 0){
					topPos += smallHeight + spacer;
				}
				$(rows[r][c]).data("newX", leftPos);
				$(rows[r][c]).data("newY", topPos);
			}
		}
		animateIn(playAnimation);	
	}
	
	function animateIn(playAnimation){
		var originY = $(rows[0][0]).data("newY");	
		var originX = $(rows[0][0]).data("newX");
		var maxHeight = 0;
		var delay = 0;
		var duration = 200;
		for(var r=0; r < rows.length; r ++ ){		
			for(var c=0; c < rows[r].length; c++){
				if(playAnimation){
					var leftPos = $(rows[r][c]).data("newX");
					var topPos =  (r>0) ? $(rows[r][c]).data("newY")-$(rows[r][c]).width()/2 : $(rows[r][c]).data("newY");
					$(rows[r][c]).stop(true, false);
					$(rows[r][c]).css({top: topPos, opacity:"0"});
					
					$(rows[r][c]).delay(delay).animate(
						{top: $(rows[r][c]).data('newY') , left: $(rows[r][c]).data('newX'), opacity:"1"},
						{duration:duration, easing:"easeOutCubic", queue:false}
					);	
					 delay += 25;
					 duration += 25;
				 }else{				 
				$(rows[r][c]).css({top: $(rows[r][c]).data('newY') , left: $(rows[r][c]).data('newX')});
				}
				maxHeight = $(rows[r][c]).data('newY');
			}
		}
		$('div#teasersHolder').height(maxHeight-origin.top+smallHeight+2);
	}
	
	function convertTeaserArrayToMatrix(teasers){ //takes in the raw array of items and returns an object with the matrix 
		var rowCounter = 0;
		var colCounter = 0;
		var accWidth = 0;
		
		var totalItems = 0;
		var rows = new Array();
		var cols = new Array();
		for( var i = 0; i < teasers.length; i ++){
			var currentTeaser = $(teasers[i]);
			if(currentTeaser.css('display') == "block"){
				accWidth += smallWidth + spacer;				
				if(accWidth > smallWidth+spacer && accWidth -spacer < containerWidth){
					colCounter += 1;
				}else if(accWidth -spacer >= containerWidth){
					cols = new Array();
					accWidth = smallWidth+spacer;
					colCounter = 0;
					rowCounter += 1;
				}			
				
				if(!rows[rowCounter]){
					rows[rowCounter] = cols;
				}
				cols[colCounter] = currentTeaser;
			}
		}
		
		var maxCols = rows[0].length;		
		return {matrix:rows, maxCols:maxCols};
	}
	

	
	function loadCompleteArticle(id){
		var contentUrl = "?p="+id; 
		jQuery.ajax({
			url: contentUrl,
			beforeSend: function(){  showArticleLoading(); },
			success: function(result){
				populateCompleteArticle(result);
			},
			error: function(){
				//error handling
			}
		});
	}
	
	function showArticleLoading(show){
		loadingSpinner.css({display:'block', opacity:'0'});
		loadingSpinner.show();
		loadingSpinner.animate(
			{opacity:'1'}, {duration:300}
		);
		//$('div#completeHolder').html(loadingSpinner);	
		spinLoader();
		layoutTeasers(false);
	}
	
	function populateCompleteArticle(data){
		loadingSpinner.hide();
		$('div#completeHolder').html(data);		
		setupCompleteMediaPresentation();
		$('div#completeHolder').css({opacity:'0'});
		$('div#completeHolder').show();
		$('div#completeHolder button.#closeComplete').click(function(){
			removeCompleteArticle();			
		});
		$('div#completeHolder').animate(
			{opacity:'1'}, {duration:300}
		);
		layoutTeasers(true);
		spinLoader(true);
	}		
	
	function setupCompleteMediaPresentation(){
		var mediaItems = $('#slides  #images').children();
		if(mediaItems.length > 1){
			$('#slides  #images').cycle({ 
				timeout:0,
				pager: '#slideNav',
				pagerAnchorBuilder: function(index, element){
					var navItem;
					if(index == 0){
						navItem = '<a class="activeSlide" href="#">'+$(element).attr('title')+'</a>';
					}else{
						navItem = '<a href="#">'+$(element).attr('title')+'</span>';
					}
					return navItem;
				},
				before:function(){
					$('div#slideCaption').html(this.alt);
				}
			});
		}else{
			layoutTeasers();
		}
	}


	
	function removeCompleteArticle(){
		$('#slides #images').cycle('destroy');
		resetSelectedStatesOnTeasers();
		$('div#completeHolder').html("");
		$('div#completeHolder').hide();
		layoutTeasers(true);
	}


	function spinLoader(stopSpinning){
		if(typeof stopSpinning != "undefined" && stopSpinning === false){
			$('div#completeLoadingSpinner img').rotate({
				duration:1200,
				angle:0, 
				animateTo:360, 
				callback: spinLoader,
				easing: function (x,t,b,c,d){// t: current time, b: begInnIng value, c: change In value, d: duration
				  return c*(t/d)+b;
				}
		   });
	   }else{
			$('div#completeLoadingSpinner img').rotate({
				duration:600,
				angle:0, 
				animateTo:360, 
				easing: function (x,t,b,c,d){// t: current time, b: begInnIng value, c: change In value, d: duration
				  return c*(t/d)+b;
				}
		   });
	   
	   }
	}

	
	layoutTeasers(true);
	
	
})