var heights = new Array();
var titleheights = new Array();
var itemHeight = 84;
var titleHeight = 20;

$(document).ready( function () {
	//save original height of each item
	$(".Item").each(function(index) {
		heights[index] = $("#Item"+index).height();
		});
	//save original height of each item title
	$(".Item").each(function(index) {
		titleheights[index] = $("#Item"+index+" .ItemTitle").height();
		});

	//make all Items small, but only if there's more than one
	if(heights.length > 1) {
		$(".Item").css('height', itemHeight);
		$(".ItemTitle").css('height', titleHeight);
		$(".MinusButton span.PlusMinus").hide();
	} else {
		$(".PlusButton span").text('[-]');
		$(".PlusButton").addClass('turnedMinus');//for css background img
	}

	//remove all plus/minus spans from the dom when the item has everything in view already
	for(i=0;i<heights.length;i++) {
		//get all heights, paddings, margins and borders that can add height to the item that shows up 'empty'
		minbutheight = $("#Item"+i+" .MinusButton span").height();
		minbutmargin = parseInt($("#Item"+i+" .MinusButton span").css('margin-top'));
		minbutpadding = parseInt($("#Item"+i+" .MinusButton span").css('padding-bottom')) + parseInt($("#Item"+i+" .MinusButton span").css('padding-top'));
		textpadding = parseInt($("#Item"+i+" .ItemText").css('padding-bottom'));
		itemborder = parseInt($("#Item"+i).css('borderBottom-width'));

		total = minbutheight + minbutmargin + minbutpadding + textpadding + itemborder;

		compare = itemHeight + total;
//alert(heights[i] +' <= '+compare);
		// when the actual height is smaller than the smallest itemHeight + paddings and such
		// remove the plus/minus buttons and make the title and image un-clickable
		if(heights[i] <= compare ) {
			$("#Item"+i).find(" .PlusButton").remove();
			$("#Item"+i+" .MinusButton").remove();
			$("#Item"+i+" .ItemTitle").removeClass('Unfold');
			$("#Item"+i+" .ItemImage").removeClass('Unfold');
		}
	}
	
	
	$(".Unfold").click(
		function () {
			oldheight = $(this).parent().height();
			//it might be that the title is clicked, in which case the .parent step
			//is redundant, but it might have been the image that has been clicked
			titleoldheight = $(this).parent().find('.ItemTitle').height();
			//collapse all items
			$(".Item").css("height",itemHeight);
			$(".ItemTitle").css('height',titleHeight);
			$(".PlusButton span").text('[+]');
			$(".PlusButton").removeClass('turnedMinus');//for css background img
			$(".MinusButton span.PlusMinus").hide();
			
			//expand the item that was clicked and collapsed
			if(parseInt(oldheight) == itemHeight) {
				parentid = $(this).parent().attr('id');
				id = parseInt(parentid.replace(/Item/, ""));
				
				//get the original height for both Item and ItemTitle
				newheight = parseInt(heights[id]);
				newtitleheight = parseInt(titleheights[id]);
				//when the original heights are smaller than the
				//collapsed heights, make them the collapse heights
				if(newheight < itemHeight)
					newheight = itemHeight;
				if(newtitleheight < titleHeight)
					newtitleheight = titleHeight;
				
				//set the heights, make plusbutton minus and show the bottom minus button
				$(this).parent().css('height', newheight);
				$(this).parent().find('.ItemTitle').css('height', newtitleheight);
				$(this).parent().find(".PlusButton span").text('[-]');
				$(this).parent().find(".PlusButton").addClass('turnedMinus');//for css background img
				$(this).parent().find(".MinusButton span.PlusMinus").show();
			}
		}
	);

	//on click of the bottom minus button
	$(".MinusButton span").click(
		function() {
			//collapse all items
			$(".Item").css("height",itemHeight);
			$(".ItemTitle").css('height',titleHeight);
			//make plusbutton plus again
			$(".PlusButton span").text('[+]');
			$(".PlusButton").removeClass('turnedMinus');//for css background img
			//hide all botom minusbuttons
			$(".MinusButton span.PlusMinus").hide();
		}
	);
	
	//mouse in/out for minus and plus buttons
	$(".PlusMinus").hover(
		function() {
			$(this).css("color","#999999")
		},
		function() {
			$(this).css("color", "#ffffff");
		}
	);

});