jQuery(function($){		
	
	$('#LeftArrow').click(function(){
		api.prevSlide();
	});
	$('#RightArrow').click(function(){
		api.nextSlide();	
	});	
	// Update credits in (?) from title and thumb fields in supersized plugin.
	// The thumb and title fields are populated from the matrix fields of that entry
	$('.ArrowNav').click(function(){
		$('.Image-Description').html(api.getField('title'));
		$('.Image-Credits').html(api.getField('thumb'));	
	});		
	
	// Sets the arrow height, based on browser size
	$('.ArrowNav').height( $(window).height() / 5 );
	$('.ArrowNav').width( $(window).width() / 5 );
	$(window).resize(function() {
		$('.ArrowNav').height( $(window).height() / 5 );
		$('.ArrowNav').width( $(window).width() / 5 );
	});	

	function isiOS(){
		return (
			//Detect iPhone
			(navigator.platform.indexOf("iPhone") != -1) ||
			//Detect iPod
			(navigator.platform.indexOf("iPad") != -1)
		);
	}
	
	$('#Panel A, #Panel .Box, #WorkList').hover( function(){
		// If clicking on same button, then close button
		if($(this).parent().hasClass('Clicked')) { 
			$(this).parent().removeClass('Clicked'); 
			if( isiOS() ){
				$(this).parent().parent().blur();
			}
		} 
		// Else if different button, close all other buttons
		else {	
			$(this).parent()				// Navigate to LI
				.addClass('Clicked')  		// Mark LI.Clicked
				.siblings()					// Find other LI
				.removeClass('Clicked')		// Remove other .Clicked
				.parent()					// Go to UL
				.siblings()					// Find UL's siblings 
				.find('li')					// Find the sibling's LIs
				.removeClass('Clicked');	// Remove the .Clicked
		}
	});
	
	
	
	// To get around the image links having an underline
	$('.Entry IMG').parent().css( "border", "0 none" );



	
	function elementSupportsAttribute(element, attribute) {
		var test = document.createElement(element);
		if (attribute in test) {
			return true;
		} else {
			return false;
		}
	}
	if(!elementSupportsAttribute('input','placeholder')) {
		$('#FormName').val("Your name");
		$('#FormEmail').val("Your email");
		$('#FormText').val("Your message");
		$('#valid').val("Validation: What is 2+2?");
		$('.required').focus( function() {
	
		});
	}
	else {
		
	}
	
	
	
  $('#ContactForm').validate({
  messages: {
		name: "Must fill in area!",
		message: "Must fill in area!",
		email: "Must fill in area!",
		valid: "What is 1+3?"
	},
  	errorPlacement: function(error, element) {
		element.attr('placeholder', error.text());
		element.css("border", "1px solid #FF0000");
		element.css("outline", "none");
	}
	/*,
	rules: {
		valid: { 
        	required: true, 
        	equalTo: "#answer" 
        }
	}*/
  });

  $('#ContactForm').ajaxForm({ 
  target:"#hiddenDIV",     //set response to go into hidden div    
  beforeSubmit:function()  //before sending submit, give user notification...
  {
    $(".QuickForm").fadeOut();
    $("#msg").css('margin-top','5px');   
    $("#msg").html("Sending...");
  },
  success:function(response) {
   // the reason why im checking for the word "success" is that I've created an 
   // EE template called "includes/success" which just has the word "success" in it, and
   // it is the "return" variable in the exp:FreeForm:Form tag... eg: return="success"
    if(response == "success") {
      $("#msg").html("<p>Thank you for your message!</p>");
      $("#msg").delay(2000).fadeOut(400, function(){
		  $("#Extras LI").removeClass('Clicked');
		  $(this).blur().show();
      });
     }else{
        // there was an error, so grab the UL in the content ID from the ERROR HTML that comes back from EE
        // the reason why it is placed in hiddenDIV is because i set the target of the call to "hiddenDIV"
        // Here, i am grabbing the UL bullet list from the returned HTML content and placing it in my message box
        // then discarding the hiddenDIV since it messes up my main HTML page
		
      $("#msg").html(  $("#hiddenDIV #content ul").html() );
      $("#hiddenDIV").empty(); 

     }
   }
  }
);  
	
	
});