// JavaScript Document

//*	
	var imgs;
		
	$(document).ready(function () {
	var drag = {};
		$('#images').append('<li id="instructions"><h4>Click and drag the images to check out my work!</h4></li>');
		
		imgs = $("#images li");

		imgs.draggable({ 
			stack : { group : '#images li', min : 1},
			start : function () {
				$this = $(this);
				if($this.attr('id') === 'instructions') { $this.fadeOut().remove(); }
				imgs.each(function () {
					var $this = $(this);
					if($this.width() !== 375) {
						$this.stop().animate({width : 375 }).removeClass('top');
					}
				});
				
				drag.startTime = new Date();
				drag.startPos = $this.position();
			},
			stop : function () {
				var $this = $(this), top, left, time;
				drag.endTime = new Date();
				drag.endPos = $this.position();
				drag.leftOffset = drag.endPos.left - drag.startPos.left;
				drag.topOffset  = drag.endPos.top  - drag.startPos.top;

				time = (drag.endTime.getTime() - drag.startTime.getTime()) /60;
				
				top  = (drag.topOffset / time).toString();
				left = (drag.leftOffset / time).toString();
				
				$this.animate({
					top : '+=' + top, 
					left: '+=' + left 
				});
			}
		});

		imgs.click(function () {
			var $this = $(this);
		
			if ($this.attr('id') == 'instructions') {
				$this.fadeOut(500, function () { $(this).remove(); });
			}
			
			return false;
		});
		
	});

$(window).load(function () {
	$w = $(window);
	imgs.css({
			position : 'absolute',
			left : $w.width() / 2 - imgs.width(),
			top  : $w.height() / 2- imgs.height()
		});
	for(var i = 0; imgs[i]; i++ ) {
		var randomHoriz = Math.random()* 800 - 200;
		$(imgs[i]).animate({
				left : '+=' + randomHoriz,
				top  : '+=' + Math.random()*400
			});
	}
});//*/