// JavaScript Document
$(document).ready(function(){


// Hover ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(".work").hover(
      function () {
		var my_width = $(this).width();
		var my_height = $(this).width();
		var id = $(this).attr("id"); // retrieve the id
		$(".work_details" ). filter("#" + id). css("position", "relative");
		$(".work_details" ). filter("#" + id). width(my_width);
		$(".work_details" ). filter("#" + id). show("slow");
		$(".work" ). filter("#" + id).animate({ 
   			 width: my_width+ 15,
			 height: my_height+10,
   			 opacity: 1.0,
   			 fontSize: "18px", 
   			 borderWidth: "14px"
 			 }, 500 );
		$(this) . children("a"). children(".main_image") . width(my_width+ 12) ;
	    $(this) . children("a"). children(".main_image") . height (my_height+8);
      }, 
      function () {	  
		var id = $(this).attr("id"); // retrieve the id
		var my_width = $(this).width();
		var my_height = $(this).width();
		//$(".work_details" ). filter("#" + id). css("position", "absolute");
		//COMMENTED OUT to always show the titles  //$(".work_details" ). filter("#" + id). hide("slow");
		// Added size change
		
		$(".work" ). filter("#" + id).animate({ 
   			 width: my_width - 15,
			 height: my_height - 10,
   			 opacity: 0.8,
   			 fontSize: "14px", 
   			 borderWidth: "5px"
 			 }, 1500 );
	  
	  	$(this) . children("a"). children(".main_image") . width(my_width - 12) ;
	    $(this) . children("a"). children(".main_image") . height (my_height - 8);
	  }
	  
	    
    ); // end hover
	
	
$(".thumb").hover(
      function () {
		
		var title = $(this).attr("id"); // retrieve the id
		$(".image_description") . filter("#" + title) . show("slow");	  	
      }, 
      function () {	  
		var title = $(this).attr("id"); // retrieve the id
		$(".image_description") . filter("#" + title) . hide("slow");

	

      }
    ); // end hover

//End Hover ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



// Dragger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~			
	$('#dragger')
		.bind('dragstart',function( event ){
			//if ( !$(event.target).is('.handle') ) return false;
			return $( this ).css('opacity',.5)
				.clone().addClass('active')
				.insertAfter( this );
			})
		.bind('drag',function( event ){
			$( event.dragProxy ).css({
				top: event.offsetY,
				left: event.offsetX
				});
			var eye_size = $(this).width() / 2;
			//console.log("Eye size: "  + eye_size);
			var d = $('.active');
			var position = d.position();
			var art_x = $("#spectrum").position().left + 390 - eye_size ;
			var art_y = $("#spectrum").position().top + 56 - eye_size;
			var art_distance = Math.sqrt( Math.pow(art_x - position.left, 2) + Math.pow(art_y - position.top, 2) );
			
			var science_x = $("#spectrum").position().left + 240 - eye_size;
			var science_y = $("#spectrum").position().top + 150 - eye_size ;
			var science_distance = Math.sqrt( Math.pow(science_x - position.left, 2) + Math.pow(science_y - position.top, 2) );
			var concept_x = $("#spectrum").position().left + 615 - eye_size;
			var concept_y = $("#spectrum").position().top + 145 - eye_size;
			var concept_distance = Math.sqrt( Math.pow(concept_x - position.left, 2) + Math.pow(concept_y - position.top, 2) );
			var product_x = $("#spectrum").position().left + 175 - eye_size;
			var product_y = $("#spectrum").position().top + 45 - eye_size;
			var product_distance = Math.sqrt( Math.pow(product_x - position.left, 2) + Math.pow(product_y - position.top, 2) );
			var new_x = $("#spectrum").position().left  - eye_size;
			var new_y = $("#spectrum").position().top + 115 - eye_size;
			var new_distance = Math.sqrt( Math.pow(new_x - position.left, 2) + Math.pow(new_y - position.top, 2) );
			var old_x = $("#spectrum").position().left + 555  - eye_size;
			var old_y = $("#spectrum").position().top + 45 - eye_size;
			var old_distance = Math.sqrt( Math.pow(old_x - position.left, 2) + Math.pow(old_y - position.top, 2) );
			//console.log("old distance: "  + old_distance);
	
	
			$('.work').each(function () {
				
        		var art =      3000 / (( $(this).attr("art") + art_distance) + 1) ;
				var science =  3000 / (( $(this).attr("science") + science_distance) + 1) ;
				var concept =  3000 / (( $(this).attr("concept") + concept_distance) + 1) ;
				var product =  3000 / (( $(this).attr("product") + product_distance) + 1) ;
				var int_date = Math.floor($(this).attr("date_created"));
				var recent =   3000 /  (( 5*int_date + new_distance) + 1) ;
				var old_int = Math.abs(int_date - 5);
				var old =   3000 /  (( 5*old_int + old_distance) + 1) ;

				var new_width = science + concept + art + product + recent + old;
				var new_height = (science + concept + art + product + recent + old)*(2/3);
				$(this) . width (new_width);
				$(this) . height (new_height);
				
				$(this) . children("a"). children(".main_image") . width(new_width) ;
				$(this) . children("a"). children(".main_image") . height (new_height);
      		});
	
			
			})
		.bind('dragend',function( event ){
			$( event.dragProxy ).remove();			
			if ( event.pageY < 250 ) {
				$( this ).animate({	
					top: event.offsetY,
					left: event.offsetX,
					opacity: 1
				})
			} else {
				$( this ).animate({
					opacity: 1
				})
			}
			
		})
		
	  .hover(
      function () {
		$("#drag_instructions") . show("slow");	  	
      }, 
      function () {	  
		$("#drag_instructions") . hide("slow");

	

      }
    ); // end hover
	
		
// End dragger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



	
	
	
}); // doc.ready