// draggable header images

jQuery(document).ready(function($) {
	
	var i = 0, total = 6, easeType = 'easeInOutCirc';	
	
	$('a#refresh').click(function() {
		
		/*$('div#fade-container').fadeOut(300, function(){
			loadPhotos();	
		});*/
		
		$('div#fade-container').animate({
			left: "1024px",
			opacity:0
		}, 800, easeType, function() {
			loadPhotos();
		});
		
		return false;	
	})
	.focus(function() { $(this).blur(); });
	
	function loadPhotos() {
		i = (i >= total) ? 1 : i+1;
		$('div#fade-container')
			.css({ left: "-1024px" })
				.load(skinpath+'polaroids.html #group'+i, loadComplete);
	}
	
	function loadComplete() {
		
		/*$('div.headerphoto', 'div.photogroup').each(function(index) {
			var img = $('img', this);
			var x = generateNumber(0,756) + 'px';
			var y = generateNumber(0,288) + 'px';
			var rotation = generateNumber(-9,9) + 'deg';
			// position and rotate the image
			$(this).css({ top: y, left: x	}).children(img).transform({ rotate: rotation });
		});*/
		
		
		$('div.headerphoto').each(function(index) {
			var img = $('img', this);
			 
			var x = generateNumber(0,756) + 'px';
			var y = generateNumber(0,288) + 'px';
			
			
			var rotation = generateNumber(-9,9) + 'deg';
			// position and rotate the image
			//$(this).css.({'top': y, 'left': x });
			$(this).css('margin-top', y);
			$(this).css('margin-left', x);
			$(this).find("img").css('margin-top','2px');
			$(this).find("img").css('margin-left','2px');
			
			$(this).transform({ rotate: rotation });
		});
			
		$('div.headerphoto').draggable({
			containment: 'div#header-photos',
			scroll: false,
			stack: 'div.headerphoto',
			start: function(event, ui) {
				$(this).find("img").css({
						width: "250px",
						height: "261px"
					}),
					
				$(this).css({
						width: "254px",
						height: "265px"
					})
				
			},
			stop: function(event, ui) {
				$(this).find("img").animate({
						width: "188px",
						height: "196px"
					}, 200),
					
				$(this).animate({
					width: "192px",
					height: "200px"
				}, 200)
				
				
			}			
			
			
		});	
		
		//$('div#fade-container').fadeIn(300);
		$('div#fade-container').animate({
			left: "0px",
			opacity:1
		}, 800, easeType);		
	}
	
	

	
	
	loadPhotos();	
	
});




/*$('.headerphoto img').live('hover', function() {
		$(this).animate({
			width: '188px',
			height: '196px'			
		}, 500);
 		} , function() {
		$(this).animate({
			width: '120px',
			height: '125px'
   	}, 400);
 	});*/

// will return a number between a specified range - can be negative or positive
// used to get degrees for rotate on header images
function generateNumber(min,max) {
	
	if (max < min) {
			var i = max;
			max = min;
			min = i;
		
	}
	return Math.floor(Math.random() * (max - min) + min);
}