$.fn.reverse = Array.prototype.reverse;
$.fn.sort = Array.prototype.sort;

$(window).load(function() {
	var $slider = $('.slider');
	
	$slider.show().cycle({
		pager: '#nav',
		pause: true
	});
	$("#nav").each(function() {
		var $playStopButton = $('<div class="navplaystop"></div>');
		
		$playStopButton.click(function() {
			$(this).toggleClass("play");
			$(".slider").cycle("toggle");
		});
		
		$(this).append($playStopButton); 
	});
	$('#slider_wrapper').css('background', 'none');
});
  
$(document).ready(function() {
	$("form.validate").each(function() {
		var $form = $(this);
		
		$(this).validate({
		});
		
		$form.find(".referrer_specific").rules("add", {
			required: function() {
				return $form.find(".referrer").val().indexOf("specify")>=0;
			}
		});
	});
	
	

	//same height for product items
	$(window).ready(equalHeights);
	equalHeights();
	
	function equalHeights() {
		var maxHeight = 0;
		$(".products .item").each(function() {
			maxHeight = Math.max(maxHeight, $(this).height());
		});
		
		$(".products .item").each(function() {
			$(this).height(maxHeight);
		});
	}
	
	$("#case_study_options").bind("change", function(e) {
		//go to the page of the selected value, unless the selected value is empty
		var targetCasestudy = $(this).val();
		
		if (targetCasestudy!=="") {
			window.location = targetCasestudy;
		}
	});
	
	//do not animate the menu for the selected category
	var $contentHolders = $(".content:not(.category_about_us .first .content, .category_products .second .content, .category_services .third .content)");
	
	$contentHolders.each(function() {
		var $contentHolder = $(this);
		var $overlay = $contentHolder.find(".overlay");
		
		$overlay.css({left: $contentHolder.width()});
		
		$contentHolder.mouseenter(function() {
			$overlay.stop(true, false).animate({
				left: 0
			}, 1000);
		}).mouseleave(function() {
			$overlay.stop(true, false).animate({
				left: $(this).width()
			}, 1000);
		});
	});
	
	//animate the home page in a special manner, just slide it in and make it stick
	$(".page_home .section.first .content").each(function() {
		var $contentHolder = $(this);
		var $overlay = $contentHolder.find(".overlay");
		
		$overlay.css({left: $contentHolder.width()}).stop(true, false).animate({
			left: 0
		}, 2000);
	});
	
	//remove the placeholder text for the search box if the box is clicked on
	var placeholder = "Search our site...";
	var $searchText = $("#search_text");
	
	if ($searchText.val()!="") {
		$searchText.val(placeholder);
	}
	
	$searchText.focus(function() {
		if ($searchText.val()==placeholder) {
			$searchText.val("");
		}
	});
	
	$searchText.blur(function() {
		if ($searchText.val()=="") {
			$searchText.val(placeholder);
		}
	});
	
	/** For dropdown inside the slider **/
	$('.hover_me').find('.top').hover(function() {
		$('.hover_me').find('.dropdown').clearQueue().animate({
			height: 252,
			paddingTop: 10,
			paddingBottom: 10
		});
	}, function() {
		$('.hover_me').find('.dropdown').clearQueue().animate({
			height: 0,
			paddingTop: 0,
			paddingBottom: 0
		});
	});
	
	/* For meet the team animation */
	// bind radiobuttons in the form
	var $filterType = $('#filter button');

	// get the first collection
	var $applications = $('.applications');
	$applications.wrap('<div id="applications_wrap"></div>');
	
	//mix up the div elements so they are all over the place (gives the animation its effect)
	var $newApplicationOrder = $applications.clone().find(".team_member").sort(function(a, b) {
		var text1 = $(a).find(".team_member_name").text();
		var text2 = $(b).find(".team_member_name").text();
		
		if (text1>text2) {
			return 1; 
		} else {
			return -1;
		}
	});
	
	//rearrange the dom to match the new list
	$applications.html("").append($newApplicationOrder);
	
	//apply the filter to a clone of the applications, which we can use as reference to position our elements
	var $newApplications = $applications.clone();
	$applications.before($newApplications);
	$newApplications.css({ opacity: 0.0, position: "absolute", top: 0, left: 0 });	
  
  //rather than use some plugin thing, just simply hide and show the objects on a model and animate absolute our original objects
  $filterType.click(function(e) {
     if ($(this).val() == 'all') {
		var filterSelector = '.team_member[data]';
    } else {
		var filterSelector = '.team_member[data=' + $(this).val() + ']';
    }
    
    var $visibleElements = $newApplications.find(filterSelector);
    $visibleElements.show();
    $newApplications.find(".team_member").not($visibleElements).hide();
    
    //before we animate, we need to convert all of the divs to absolute and set the height of the container
	$applications.animate({height: $newApplications.height()}, 1000, function() {
		//$(this).css({height: "auto", overflow: "visible"});
    });
    
    var $applicationElements = $applications.find(".team_member");
    var $newApplicationElements = $applications.find(filterSelector);
    
    $applicationElements.reverse().each(function() {
		$(this).css({left: $(this).position().left, top: $(this).position().top, position: "absolute"});
	});
	
	//once that is done, we fade out the divs that will no longer appear
	$applicationElements.not($newApplicationElements).each(function() {
		$(this).animate({opacity: 0.0}, 500, function() {
			$(this).css({display: "none"});
		});
	});
	
	//then we animate the other div positions until they match the new positions
	$newApplicationElements.each(function(i) {
		//get the related div for the application
		var newPosition = $($visibleElements.get(i)).position();
		
		$(this).animate({
			left: newPosition.left,
			top: newPosition.top
		}, 1000, function() {
			//fade in the div if it is not already visible
			$(this).css({display: "block"}).animate({opacity: 1.0}, 500);
		});
	});
  });
});