var menuStatus = 0;
var toggleStatus = false;
var paginationOffset = 1;
var paginateAt = 5;
var paginateEnd = 5;
var paginateStart = 0;
var notIE = 1;
if ($.browser.msie) {
	if($.browser.version.substr(0,1) <= 6) {
		notIE = 0;
	}
}

$("input").attr("checked", false);

function clearDesigners(){
	$("#designers").html('');
	$('.pagination').remove('');
}

function projectHovers() {
	// add special project hovers
	$(".projectList a").each(
		function() {
			var designer = $(this).parent().parent().parent().parent().attr("id").replace('Designer', '');
			var projectURL = $(this).attr('href');
			projectURL = projectURL.split("/");
			var project = projectURL[2];
			var smallThumb = $("#hiddenDesigners ." + designer + " ." + project + " .SmallThumb").html();
			$(this).append("<span class='hoverImg' />");
			$(".hoverImg", this).css({display: "none", position: "absolute", width: "190px", height: "84px", left: 0, top: 0, backgroundImage: "url("+smallThumb+")" }); 
		}
		
	);
	$(".projectList a").hover(
		function() {
			$(".hoverImg", this).fadeIn("slow");
		},function() {
			$(".hoverImg", this).fadeOut("slow");
		}
	).click(
		function() {
			// get designer id
			var designer = $(this).parent().parent().parent().parent().attr("id").replace('Designer', '');
			// get project id
			var projectURL = $(this).attr('href');
			projectURL = projectURL.split("/");
			var project = projectURL[2];
			// get current project id
			var oldProject = $('#Designer' + designer + ' .bigImg').attr("class").replace('bigImg ', '');
		
			$('#Designer' + designer + " .selectedProject").fadeTo('slow', 0, function() {
				// load new project details
				var large = $("#hiddenDesigners ." + designer + " ." + project + " .Large").html();
				var title = $("#hiddenDesigners ." + designer + " ." + project + " .title").html();
				var description = $("#hiddenDesigners ." + designer + " ." + project + " .description").html();
				var type = $("#hiddenDesigners ." + designer + " ." + project + " .type").html();
				$('#Designer' + designer + ' .bigImg span').css({ backgroundImage: "url("+large+")" });
				$('#Designer' + designer + ' .selectedProject h3').html(title);
				$('#Designer' + designer + ' .selectedProject .projectContent').html(description);
				$('#Designer' + designer + ' .selectedProject .type').html(type);
				$('#Designer' + designer + " .selectedProject").fadeTo('slow', 100);
			});
	
			// put the old project in the project list
			$(this).attr({ href : '/home/' + oldProject });
			var smallThumb = $("#hiddenDesigners ." + designer + " ." + oldProject + " .SmallThumb").html();
			var smallThumbBW = $("#hiddenDesigners ." + designer + " ." + oldProject + " .SmallThumbBW").html();
			$(".bwImage", this).css({ backgroundImage: "url("+smallThumbBW+")" });
			$(".bwImage img", this).attr({ src : smallThumbBW});
			$(".hoverImg", this).remove();
			$(this).append("<span class='hoverImg' />");
			$(".hoverImg", this).css({display: "none", position: "absolute", width: "190px", height: "84px", left: 0, top: 0, backgroundImage: "url("+smallThumb+")" });
			$('#Designer' + designer + ' .bigImg').removeClass(oldProject).addClass(project);
			return false;
		}
	);
}

function toggleFilters() {
	$("#filter fieldset legend").toggleClass("opened");
	if(!menuStatus) {
		$("#filter").css({ paddingBottom: "1.5em" });
		$("#filter fieldset:not(#region)").css({backgroundColor: "#fff"}).addClass('open').animate({ height: "189px"}, 'slow', function() {
				
		        $("#filter input, #filter label").css({ display: "inline" });
				$("#filter fieldset h3, #filter fieldset p:not(.region), #filter fieldset div").css({ display: "block" });
		      });
		menuStatus = 1;
	} else {
		$("#filter").css({ paddingBottom: "1.5em" });
		$("#filter input, #filter label, #filter fieldset p, #filter fieldset div").css({ display: "none" });
		$("#filter fieldset").removeClass('open').css({ backgroundColor: "transparent", height: "42px"});
		menuStatus = 0;
	}
}



function buildDisplayedDesigners() {
	$('#displayedDesigners').html();
	paginationOffset = 1;
	selectedDesigners = new Array();
	selectedTypes = new Array();
	selectedRegions = new Array();
	$("#region p input[type=checkbox]").each(
	  function() {
			if($(this).is(":checked")) {
				var regionTitle = $(this).attr('value');
				selectedRegions.push(regionTitle);
			}
	    }
	);
	$("#type input[type=checkbox]").each(
	  function() {
			if($(this).is(":checked")) {
				var typeTitle = $(this).attr('value');
				selectedTypes.push(typeTitle);
			}
	    }
	);
	$("#designer input[type=checkbox]").each(
	  function() {
			if($(this).is(":checked")) {
				var designerID = $(this).attr('value');
				selectedDesigners.push(designerID);
			}
	    }
	);
	
	// set filterlabels
	if(selectedDesigners.length || selectedTypes.length || selectedRegions.length) {
		$("#whichFilter").html("Filtered by: ");
	} else {
		$("#whichFilter").html("No filter selected");
	}
	
	if(selectedRegions.length) {
		// add filterLabel
		$("#whichFilter").append('<span class="regionsFilterLabel">Area <a href="">delete</a></span>');
		// rig button
		$('.regionsFilterLabel a').click(
			function(){
				$("fieldset#region input").attr("checked", false);
				toggleStatus = false;
				clearDesigners();
				buildDisplayedDesigners();
				renderDesigners();
				$(this).parent().remove();
				return false;
			}
		);
	}
	if(selectedTypes.length) {
		// add filterLabel
		$("#whichFilter").append('<span class="typesFilterLabel">Type <a href="">delete</a></span>');
		// rig button
		$('.typesFilterLabel a').click(
			function(){
				$("fieldset#type input").attr("checked", false);
				clearDesigners();
				buildDisplayedDesigners();
				renderDesigners();
				$(this).parent().remove();
				return false;
			}
		);
	}
	if(selectedDesigners.length) {
		// add filterLabel
		$("#whichFilter").append('<span class="designersFilterLabel">Expert <a href="">delete</a></span>');
		// rig button
		$('.designersFilterLabel a').click(
			function(){
				$("fieldset#designer input").attr("checked", false);
				clearDesigners();
				buildDisplayedDesigners();
				renderDesigners();
				$(this).parent().remove();
				return false;
			}
		);
	}
	
	
	// build the displayed list
	$("#displayedDesigners").html($("#hiddenDesigners").html());
	$("#displayedDesigners > li").each(
		function() {
			if(!selectedDesigners.length && !selectedTypes.length && !selectedRegions.length) {
				deleteDesigner = 0;
			} else {
				deleteDesigner = 1;
			}
			var myId = $(this).attr('class');
			
			// check designers
			if(selectedDesigners.length) { // if a designer is selected
				for(var designerCounter = 0; designerCounter < selectedDesigners.length; designerCounter++) {
					if(myId == selectedDesigners[designerCounter]) {
						deleteDesigner = 0;
					}
				}
			}
			
			// check types
			if(selectedTypes.length) { // if a type is selected
				
				$("#displayedDesigners ." + myId + " .references li").each(
					function() {
						for(var typeCounter = 0; typeCounter < selectedTypes.length; typeCounter++) {
							if($(".type" , this).html() == selectedTypes[typeCounter]) {
								deleteDesigner = 0;
							}
						}
					}
				);
			}
			
			// check region
			if(selectedRegions.length) { // if a type is selected
				// the regions for references
				$("#displayedDesigners ." + myId + " .references li").each(
					function() {
						for(var regionCounter = 0; regionCounter < selectedRegions.length; regionCounter++) {
							if($(".region" , this).html() == selectedRegions[regionCounter]) {
								deleteDesigner = 0;
							}
						}
					}
				);
			}
			
			// the regions for designers
			designerRegions = $("#displayedDesigners ." + myId + " .Regions").html().split(", ");
			for(var regionCounter = 0; regionCounter < selectedRegions.length; regionCounter++) {
				for(var designerRegionCounter = 0; designerRegionCounter < designerRegions.length; designerRegionCounter++) {
					if(designerRegions[designerRegionCounter] == selectedRegions[regionCounter]) {
						deleteDesigner = 0;
					}
				}
			}
			
			if(deleteDesigner) {
				$("#displayedDesigners ." + myId).remove();
			}
		}
	);
}

function renderDesigners() {
	var howManyDesigners = $("#displayedDesigners > li").size();
	var paginateCounter = 1;
	paginateEnd = paginationOffset * 5;
	paginateStart = paginateEnd - 5;
	// paginated loopen + pagination aanzetten
	$("#displayedDesigners > li").each(
		function() {
			if(paginateCounter > paginateStart && paginateCounter <= paginateEnd) {
				
				var currentId = $(this).attr("class");
				// basic details
				$("#designers").append('<li id="Designer' + currentId + '" class="vcard"><div class="headerAndProject"><div class="headerAndPhoto"><div class="nameAndLocation">');
				if($(".URL" , this).html() != "") {
					$("#designers #Designer" + currentId + " .headerAndPhoto .nameAndLocation").append('<h2 class="fn"><a href="' + $(".URL" , this).html() + '"><span class="given-name">' + $(".FirstName" , this).html() + '</span> <span class="family-name">' + $(".Surname" , this).html() + '</span></a></h2>');
				} else {
					$("#designers #Designer" + currentId + " .headerAndPhoto .nameAndLocation").append('<h2 class="fn"><span class="given-name">' + $(".FirstName" , this).html() + '</span> <span class="family-name">' + $(".Surname" , this).html() + '</span></h2>');
				}
				$("#designers #Designer" + currentId + " .headerAndPhoto .nameAndLocation").append('<h3><strong>Lives in:</strong> ' + $(".Country" , this).html() + '</h3>');
				$("#designers #Designer" + currentId + " .headerAndPhoto .nameAndLocation").append('<h3><strong>Works in:</strong> ' + $(".Regions" , this).html() + '</h3>');
				// profile picture
				var useExtraPicture = Math.floor(Math.random()*8);
				var ProfilePicture = $(".ProfilePicture" , this).html();
				var ExtraProfilePicture = $(".ExtraProfilePicture" , this).html();
				if(useExtraPicture == 2) { // try to use extraPicture
					if(ExtraProfilePicture != "") {
						$("#designers #Designer" + currentId + " .headerAndPhoto").append('<div class="designerPhoto"><span style="background-image: url(' + ExtraProfilePicture + ');"><img src="' + ExtraProfilePicture + '" /></span></div>');
					} else {
						if(ProfilePicture != "") {
							$("#designers #Designer" + currentId + " .headerAndPhoto").append('<div class="designerPhoto"><span style="background-image: url(' + ProfilePicture + ');"><img src="' + ProfilePicture + '" /></span></div>');
						} else {
							$("#designers #Designer" + currentId + " .headerAndPhoto").append('<div class="designerPhoto"><span style="background-image: url(/themes/conceptsverde/images/noImage.jpg);"><img src="' + ProfilePicture + '" /></span></div>');
						}
					}
				} else { // try to use defaultPicture
					if(ProfilePicture != "") {
						$("#designers #Designer" + currentId + " .headerAndPhoto").append('<div class="designerPhoto"><span style="background-image: url(' + ProfilePicture + ');"><img src="' + ProfilePicture + '" /></span></div>');
					} else {
						$("#designers #Designer" + currentId + " .headerAndPhoto").append('<div class="designerPhoto"><span style="background-image: url(/themes/conceptsverde/images/noImage.jpg);"><img src="' + ProfilePicture + '" /></span></div>');
					}
				}
				// selectedProject
				if($(".references li:first" , this).attr("class")) {
					$("#designers #Designer" + currentId + " .headerAndProject").append('<div class="selectedProject">');
			
					$("#designers #Designer" + currentId + " .headerAndProject .selectedProject").append('<div class="bigImg ' + $(".references li:first" , this).attr("class") + '"><span style="background-image: url(' + $(".references li:first .Large" , this).html() + ');"><img src="$Reference_Picture.Large.URL" /></span></div>');
					$("#designers #Designer" + currentId + " .headerAndProject .selectedProject").append('<p class="type">' + $(".references li:first .type" , this).html() + '</p>');
					$("#designers #Designer" + currentId + " .headerAndProject .selectedProject").append('<h3>' + $(".references li:first .title" , this).html() + '</h3>');
					$("#designers #Designer" + currentId + " .headerAndProject .selectedProject").append('<div class="projectContent">' + $(".references li:first .description" , this).html() + '</div>');
				}
				
				// designerInfo
				$("#designers #Designer" + currentId).append('<div class="designerDescription">' + $(".About" , this).html() + '</div>');
			
			
				var howManyProjects = $(".references" , this).children().size();
				if(howManyProjects > 1) {
					$("#designers #Designer" + currentId + " .designerDescription").append('<h3>Other Projects</h3><ul class="projectList"></ul>');
					for(var refCounter = 2; refCounter <= howManyProjects; refCounter++) {
						$("#designers #Designer" + currentId + " .designerDescription .projectList").append('<li><a href="/home/' + $(".references li:nth-child(" + refCounter + ")" , this).attr("class") + '"><span class="bwImage" style="background-image: url(' + $(".references li:nth-child(" + refCounter + ") .SmallThumbBW" , this).html() + ');"><img src="' + $(".references li:nth-child(" +  refCounter + ") .SmallThumbBW" , this).html() + '" alt="$Title" /></span></a></li>');
					}
				}
			
				projectHovers();
			}
			paginateCounter++;
			
			
		}
	);
	if(howManyDesigners > paginateAt) {
		renderPagination();
	}
}

function renderPagination() {
	$("body").append('<div class="pagination"><div id="paginationContent">');
	var howManyPages = Math.ceil($("#displayedDesigners > li").size() / 5);
	// backButton
	if(paginationOffset == 1) {
		$("#paginationContent").append('<span class="backDisabled">Back</span>');
	} else {
		$("#paginationContent").append('<a href="#" class="back">Back</a>');
	}
	// numberListing
	for(var paginateNumbers = 1; paginateNumbers <= howManyPages; paginateNumbers++) {
		if(paginationOffset == paginateNumbers) {
			$("#paginationContent").append('<span class="selected">' + paginateNumbers + '</span>');
		} else {
			$("#paginationContent").append('<a href="' + paginateNumbers + '">' + paginateNumbers + '</a>');
		}
	}
	// forwardButton
	if(paginationOffset == howManyPages) {
		$("#paginationContent").append('<span class="forwardDisabled">Forward</span>');
	} else {
		$("#paginationContent").append('<a href="#" class="forward">Forward</a>');
	}
	// rig buttons
	$('a.back').click(
		function() {
			clearDesigners();
			paginationOffset--;
			renderDesigners();
			return false;
		}
	);
	$('a.forward').click(
		function() {
			clearDesigners();
			paginationOffset++;
			renderDesigners();
			return false;
		}
	);
	
	$('#paginationContent a:not(.forward, .back)').click(
		function() {
			paginationOffset = $(this).attr("href");
			clearDesigners();
			renderDesigners();
			return false;
		}
	);
}

$(document).ready(function(){
	// load the designers in a hidden list
	$("body").append('<ul id="hiddenDesigners" style="display: none">');
	$("#hiddenDesigners").load('$URLSegment/ajaxdesigners', function() {
		
		projectHovers();

		// show filter menu
		//$("#designers").css({paddingTop: "6em"});
		//$("#filter").css({left: "50%"});
		
		// keep filter menu visible when scrolling
		$(window).scroll(function () {
			if(notIE) {
				if($(window).scrollTop() > $("#mainHeader").height()) {
					$("#filter").addClass("fixer");//css({ position: "fixed", top: "0", left : "50%", marginLeft: "-476px"  });
				} else {
					$("#filter").removeClass("fixer");//.css({ position: "static", margin: "0" });
				}
			}
		});
		
		// open and close filter menu
		$("#filter legend").click(
			function() {
				toggleFilters();
			}
		);
		
		if ($.browser.msie) {
		  $("#filter input").click(function() {
		    this.blur();
		    this.focus();
		  });
		}
		
		
		// toggle status for regions (subitems for continents)
		$("#filter h3 input").change(
			function() {
				$(this).parent().parent().find('p input').attr("checked",!toggleStatus);
				toggleStatus = !toggleStatus;
				buildDisplayedDesigners();
			}
		);
		
		// alter the displayedDesigners when user makes differen selections
		$("#filter input").change(
			function() {
				clearDesigners();
				buildDisplayedDesigners();
				renderDesigners();
			}
		);
		
		$("#filter h3 label").click(
			function() {
				var status = $(this).parent().parent().find('p:first').css("display");
				if(status == "none") {
					$(this).parent().parent().find('p').css({ display : 'block'});
					$(this).css({ backgroundPosition : '3px -15px' });
				} else {
					$(this).parent().parent().find('p').css({ display : 'none'});
					$(this).css({ backgroundPosition : '3px 5px' });
				}
			}
		);
		// build displayedDesigners Array
		$("body").append('<ul id="displayedDesigners" style="display:none">');
		
		
	});// close load function - everything inside here only happens when the hiddenDesigners is built
});