var position = 0;

  function update_button(position)
	{
     var id, selector;

		 for(i = 0; i <= 13; i++)
		 {
   	    id = i + 1;
        selector = "#i"+id;		 
		    if(i == position) {
					   $(selector).attr("src","../images/grey_dot.png"); 				   	 
				}	 
				else {
				     selector = 
	  			   $(selector).attr("src","../images/black_dot.png"); 
				}	 
		 } 	
	}


  function nav(pos) 
  {
     var ul = $('ul#website_list');        
     var left_amount = -1 * (433 * pos);     

     ul.animate(
        {
           marginLeft:left_amount
        },
        "slow"
     );
   
     update_button(pos);		 
		 position = pos;
  }			



  function prev()
  {
     position = position - 1;

     if(position < 0) {
         position = 0;
         return;
     }     

     nav(position);		 
  }



  function next()
  {
     position = position + 1;

     if(position > 13) {
         position = 13;
         return;
     }     

     nav(position);
  }

	  $(document).ready(function() 
		{
			   var state = 'me';			   

				 $("#me_pic").click(function()
				 {
					  $("#thanks").css("display","none");
				    $("#me").css( { 'display' : 'block' } );
				    $("#you").css( { 'display' : 'none' } );
				    $("#us").css( { 'display' : 'none' } );			

  				  state = 'me';

						$('#me_pic').attr("src","../images/me_hover.png"); 
  					$('#you_pic').attr("src","../images/you.png"); 
						$('#us_pic').attr("src","../images/us.png"); 								
				 });

				 $("#you_pic").click(function()
				 {				 
					  $("#thanks").css("display","none");
				    $("#me").css('display', 'none');
				    $("#you").css('display', 'block');
				    $("#us").css('display', 'none');	

  				  state = 'you';

						$('#me_pic').attr("src","../images/me.png"); 
  					$('#you_pic').attr("src","../images/you_hover.png"); 
						$('#us_pic').attr("src","../images/us.png"); 								
				 });				 

				 $("#us_pic").click(function()
				 {
					  $("#thanks").css("display","none");
						$("#submit").css("border","none");  // if we already hit the submit button
				    $("#me").css( { 'display' : 'none' } );
				    $("#you").css( { 'display' : 'none' } );
				    $("#us").css( { 'display' : 'block' } );	

            state = 'us';

						$('#me_pic').attr("src","../images/me.png"); 
  					$('#you_pic').attr("src","../images/you.png"); 
						$('#us_pic').attr("src","../images/us_hover.png"); 				
						$('#name').focus();
				 });				 				 

				 $("#me_pic").hover(
				    function()
            {
               $('body').css('cursor','pointer');							
							 $('#me_pic').attr("src","../images/me_hover.png"); 
							 $('#you_pic').attr("src","../images/you.png"); 
							 $('#us_pic').attr("src","../images/us.png"); 							 							 
				    },

				    function()
						{
               $('body').css('cursor','default');
						   if (state == 'me') {  // me_pic will already be in 'hover' position
						      return;
							 }								
							 else 
							 {
                  if (state == 'you') {
									    $('#you_pic').attr("src","../images/you_hover.png");
									}
                  else {   // (state == 'us')
									   $('#us_pic').attr("src","../images/us_hover.png");
									}
									$('#me_pic').attr("src","../images/me.png");									
							 }
				    }
				 );

 			 $("#you_pic").hover(
				    function()
            {
               $('body').css('cursor','pointer');							
							 $('#me_pic').attr("src","../images/me.png"); 
							 $('#you_pic').attr("src","../images/you_hover.png"); 
							 $('#us_pic').attr("src","../images/us.png"); 					
				    },

				    function()
						{
               $('body').css('cursor','default');
						   if (state == 'you') { // you_pic will already be in 'hover' position
						      return;
							 }							
							 else 
							 {
                  if (state == 'me') {
									    $('#me_pic').attr("src","../images/me_hover.png");
									}
                  else {   // (state == 'us')
									   $('#us_pic').attr("src","../images/us_hover.png");
									}
									$('#you_pic').attr("src","../images/you.png");									
							 }						 
				    }
				 );

				 $("#us_pic").hover(
				    function()
            {
               $('body').css('cursor','pointer');							
							 $('#me_pic').attr("src","../images/me.png"); 
							 $('#you_pic').attr("src","../images/you.png"); 
							 $('#us_pic').attr("src","../images/us_hover.png"); 	
				    },
				    function()
						{
               $('body').css('cursor','default');							
						   if (state == 'us') { // us_pic will already be in 'hover' position
						      return;
							 }								
							 else 
							 {
                  if (state == 'me') {
									    $('#me_pic').attr("src","../images/me_hover.png");
									}
                  else {   // (state == 'you')
									   $('#you_pic').attr("src","../images/you_hover.png");
									}
									$('#us_pic').attr("src","../images/us.png");
							 }
				    }
				 );		

				 

				$(".dot, .arrow").hover(
				   function() {
               $('body').css('cursor','pointer');
					 },
					 function() {
               $('body').css('cursor','default');
					 }
			  );

				 

				$("#i1").click(
				    function() {
						   nav(0);
						}
				); 		

   			$("#i2").click(
				    function() {
						   nav(1);
						}
				); 		

				$("#i3").click(
				    function() {
						   nav(2);
						}
				); 		

				$("#i4").click(
				    function() {
						   nav(3);
						}
				); 	

				$("#i5").click(
				    function() {
						   nav(4);
						}
				); 	

				$("#i6").click(
				    function() {
						   nav(5);
						}
				); 	

				$("#i7").click(
				    function() {
						   nav(6);
						}
				); 	

				$("#i8").click(
				    function() {
						   nav(7);
						}
				); 	

				$("#i9").click(
				    function() {
						   nav(8);
						}
				); 	

				$("#i10").click(
				    function() {
						   nav(9);
						}
				); 	

        $("#i11").click(
            function() {
						   nav(10);
						}
				); 	

				$("#i12").click(
				    function() {
						   nav(11);
						}
				); 		
				
				$("#i13").click(
				    function() {
						   nav(12);
						}
				); 				

				$("#i14").click(
				    function() {
						   nav(13);
						}
				); 
				
  			$("#left_arrow").click(
				    function() {
						    prev();
						}
				);																																						 				 
 
  			$("#right_arrow").click(
				    function() {
						    next();
						}
				);	
 
				$("#name, #email, #comments").click(

						function() {
							if(  $(this).attr("value") == "Required"  )
							{
								 //$("#name").css("color","white");
								 $(this).css("color","white");
                 $(this).attr("value","");
							}
				    }
			  );

      $("#submit_button").hover(
				    function() {
               $('body').css('cursor','pointer');			  
						},

				    function() {
               $('body').css('cursor','default');			  
						}						
 		   );



       $("#submit_button").click(

						function() {
     					 var name_value = $("#name").attr("value");
							 var email_value = $("#email").attr("value");
							 var comments_value = $("#comments").attr("value");
							 var submit_form = true;
 							 var pattern = /.*\w+.*/;

   						 if(name_value.search(pattern) == -1 || name_value == "Required")
							 {
 					        $("#name").css("color","orange");
							    $("#name").attr("value","Required");
  								submit_form = false;
							 }

							 if(email_value == "" || email_value == "Required")
							 {
 					        $("#email").css("color","orange");
							    $("#email").attr("value","Required");
  								submit_form = false;
							 }

							 if(comments_value == "" || comments_value == "Required")
							 {
 					        $("#comments").css("color","orange");
							    $("#comments").attr("value","Required");
						  		submit_form = false;
							 }														

							 if(submit_form == true) 
							 {								
   						    $("#submit_button").css("display","none");
	    				    $("#send_button").css("display","block");
  								var location = document.location + "";
  								var target;

                  if(location.search(/www/) == -1) {
							  	    target = "http://jamesjayjordan.com/scripts/email.php";
   								}
  								else {
                      target = "http://www.jamesjayjordan.com/scripts/email.php";
  								}										

                 $.post(target, 
	                    { 
 		    						   name: name_value,
				    				   email: email_value,
						    		   comments: comments_value
			  	            },
									function() {
 						           $("#submit_button").css("display","block");
    				           $("#send_button").css("display","none");	
                       $("#us").css("display","none");
                       $("#thanks").css("display","block");
     	 					  	   $("#name, #comments, #email").attr("value","");
                      });											
              }
				      return(false);
					}

        );

			}																																						 				 				

    );