/**
 * @author Simon Hanukaev
 */
$(function(){
	var $worksRightButton = $("#worksRightButton");
	var $worksLeftButton = $("#worksLeftButton");
	var $workSlidesList = $("#workSlidesList");
	var $anchors = $workSlidesList.find("a");
	var animationRunning = false;
	var isIE6 = /MSIE 6\.0/.test(navigator.userAgent);
	
	// Attach fading animation
	$anchors.bind("mouseenter", function(event) {
		var $anchor = $(this);
		if ($anchor.hasClass("noThumbnail")) {
			return;
		}
		$anchor.stop();
		var state = $anchor.data("state");
		if (state == undefined) {
			state = "fadingInThumb";
		}
		if (state == "fadingInThumb") {
			$anchor.data("state", "fadingOutThumb");
			$anchor.animate({"opacity": "0"}, {
				"complete": function() {
					$anchor.addClass("hideThumbnail");
					$anchor.data("state", "fadingInInfo");
					$anchor.animate({"opacity": "1"}, {
						"duration": "fast"	
					});
				},
				"duration": "fast"
			});
		} else { // state == "fadingOutInfo"
			$anchor.data("state", "fadingInInfo");
			$anchor.animate({"opacity": "1"}, {
				"duration": "fast"	
			});
		}
	});
	$anchors.bind("mouseleave", function(event) {
		var $anchor = $(this);
		if ($anchor.hasClass("noThumbnail")) {
			return;
		}
		$anchor.stop();
		var state = $anchor.data("state");
		if (state == "fadingInInfo") {
			$anchor.data("state", "fadingOutInfo");
			$anchor.animate({"opacity": "0"}, {
				"complete": function() {
					$anchor.removeClass("hideThumbnail");
					$anchor.data("state", "fadingInThumb");
					$anchor.animate({"opacity": "1"}, {
						"duration": "fast"	
					});
				},
				"duration": "fast"
			});
		} else { // state == "fadingOutThumb"
			$anchor.data("state", "fadingInThumb");
			$anchor.animate({"opacity": "1"}, {
				"duration": "fast"	
			});
		}
	});
	
	// If workSlidesList larger than worksSlidesWrapper, then we should roll
	var totalProjects = $workSlidesList.find("li").length;
	var slidesInView = 5;
	if (totalProjects > slidesInView) {
		
		var projectIndex = 0;
		var stepLength = 5;
		
		$worksRightButton.bind('click', function(event) {
			event.preventDefault();
			event.stopPropagation();
			
			if (projectIndex + slidesInView == totalProjects) {
				// Rewind
				projectIndex = 0;
			} else {
				if (projectIndex + slidesInView + stepLength <= totalProjects) {
					// Forward stepLength
					projectIndex += stepLength;
				} else {
					// Forward residue
					projectIndex = totalProjects - slidesInView;
				}
			}
			var left = projectIndex * -180;
			$workSlidesList.animate({"left": left + "px"}, {
				"duration": "normal"
			});
			
			return false;
		});
		
		$worksLeftButton.bind('click', function(event) {
			event.preventDefault();
			event.stopPropagation();
			
			if (projectIndex == 0) {
				// Forward
				projectIndex = totalProjects - slidesInView;
			} else {
				if (projectIndex - stepLength >= 0 ) {
					// Rewind stepLength
					projectIndex -= stepLength;
				} else {
					// Rewind residue
					projectIndex = 0;
				}
			}
			var left = projectIndex * -180;
			$workSlidesList.animate({"left": left + "px"}, {
				"duration": "normal"
			});
			
			return false;
		});
	}
	
	// More Projects Right Box Widget
	var $moreProjects = $("#moreProjects");
	if (projectsData && $moreProjects.length) {
		var $li = $moreProjects.find("li");
		var indexes = [];
		var numOfLiElements = $li.length;
		for (var i = 0; i < numOfLiElements; i++) {
			indexes.push(i);
		}
		
		// Preload Project Thumbnails
		for (var i = 0; i < projectsData.length; i++) {
			if (projectsData[i]['thumbnail']) {
				projectsData[i].thumbnailImage = new Image();
				projectsData[i].thumbnailImage.src = baseUrl + '/images/projects/' + projectsData[i]['thumbnail'];
			}
		}
		
		$li.each(function(liElementIndex, liElement) {
			var projectIndex = indexes[liElementIndex];
			var $li = $(liElement);
			var $a = $li.find("a");
			var $thumbnail = $li.find(".thumbnail");
			var $projectTitle = $li.find(".projectTitle");
			window.setTimeout(function() {
				window.setInterval(function() {
					$a.animate({'opacity':'0'}, {
						'complete': function() {
							projectIndex = (projectIndex + numOfLiElements) % projectsData.length;
							var projectData = projectsData[projectIndex];
							$a.attr("href", baseUrl + '/project/' + projectData['id'] + '/' + projectData['urlTitle']);
							if (projectData.thumbnailImage) {
								$thumbnail.attr("src", projectData.thumbnailImage.src);
								$thumbnail.attr("alt", projectData['title']);
							} else {
								$thumbnail.css("display", "none");
							}
							$projectTitle.text(projectData['title']);
							$a.animate({'opacity':'1'});
						}
					});
				}, 5000);
			}, liElementIndex * 2500);
		});
	}
	
	// Services Page
	if ($("#page.services #pageContent .expandableBox").length) {
		var $expandableBoxes = $("#page.services #pageContent .expandableBox");
		$expandableBoxes.each(function(index, domElement) {
			var $expandableBox = $(this);
			var expandableBoxInnerHeight = $expandableBox.innerHeight();
			var expandableBoxHeight = $expandableBox.height();
			var headerInnerHeight = $expandableBox.find("h2, h3, h4, h5").innerHeight();
			$expandableBox.append('<div class="expandableBoxBackground"></div>');
			var $expandableBoxBackground = $expandableBox.find(".expandableBoxBackground");
			$expandableBoxBackground.height(expandableBoxInnerHeight + "px");
			
			$expandableBox.prepend('<span class="minmaxButton"><span class="minmaxButtonImage"></span></span>');
			$expandableBox.find("h3").wrapInner('<a href="#"></a>');
			$expandableBox.find("h3 a").bind("click", function(event) {
				event.preventDefault();
				event.stopPropagation();
				
				if ($expandableBox.hasClass("hidden")) {
					$expandableBoxBackground.height(expandableBoxInnerHeight + "px");
					$expandableBox.animate({"height": expandableBoxHeight + "px"}, {
						"step": function() {
							if (isIE6) {
								$("#footer").css("bottom", "");
								$("#footer").css("bottom", "0px");
							}
						}
					});
					$expandableBox.removeClass("hidden");
				} else {
					$expandableBox.animate({"height": headerInnerHeight + "px"}, {
						"step": function() {
							if (isIE6) {
								$("#footer").css("bottom", "");
								$("#footer").css("bottom", "0px");
							}
						},
						"complete": function() {
							$expandableBoxBackground.height($expandableBox.innerHeight() + "px");
						}
					});
					$expandableBox.addClass("hidden");
				}
				
				return false;
			});
			if (index > 0) {
				$expandableBox.height(headerInnerHeight);
				$expandableBoxBackground.height($expandableBox.innerHeight() + "px");
				$expandableBox.addClass("hidden");
			}
		});
	}
	
	// Add target="_blank"
	// -------------------
	$("a[rel='external']").attr("target","_blank");
	
	// Add Transparent White Background
	// --------------------------------
	$("a.shadowOnHover").bind("mouseenter", function(event) {
		$(this).find(".shadow").css("display", "block");
	});
	$("a.shadowOnHover").bind("mouseleave", function(event) {
		$(this).find(".shadow").css("display", "none");
	});

	// Fix Double Underline Png in IE6
	// -------------------------------
	if (isIE6) {
		$(".doubleUnderlineTitle").each(function(index, Element) {
			$(this).append('<span class="doubleUnderline"></span>');
		});
	}
	
	// Contact Submit
	var $contactForm = $(".contactForm");
	if ($contactForm.length) {
		var $statusMessageTop = $contactForm.find("#statusMessageTop");
		var $statusMessageBottom = $contactForm.find("#statusMessageBottom");
		var $submitButton = $contactForm.find(".submitButton");
		
		$submitButton.bind("click", function(event) {
			event.preventDefault();
			event.stopPropagation();
			
			$statusMessageBottom.removeClass("success");
			$statusMessageTop.removeClass("error");
			$statusMessageBottom.css("display", "none");
			$statusMessageTop.css("display", "none");
			
			var params = $contactForm.serialize();
			jQuery.ajax({
				url:		baseUrl + "/contact/submit",
				data:		 params,
				dataType:	"json",
				type:		"POST",
				success:	function(data) {
					if (!data.error) {
						$statusMessageBottom.text("Thank you for contacting us");
						$statusMessageBottom.addClass("success");
						$statusMessageBottom.css("display", "block");
					} else {
						$statusMessageTop.text("Error: " + data.error);
						$statusMessageTop.addClass("error");
						$statusMessageTop.css("display", "block");
					}
				}
			});
			
			return false;
		});
	}
});