$(document).ready(function() {

	// Initialize scrollable together with the autoscroll and navigator plugin
	//$("#scroller")
	//.scrollable({circular: true, initialIndex: 0}) // Set to wraparound
	//.navigator(); // Add navigator – dots in this case
	
	// Keep track of mouse position so later we can see later if the mouse is
	// over the enlarged video box to prevent them from being stuck when
	// convered by another box.
	var xMouse;
	var yMouse;
	
	// Continually update mouse position.
	$(document).mousemove(function(e){
		xMouse = e.pageX;
		yMouse = e.pageY;
	});
	
	// Magnify scrollable item upon hover
	var enlargeFactor = 1.5;
	
	jQuery('.scrollable-item a img')
	// On mouse enter get the small video box width & height, large box
	// width & height, and large box top & left.
	.mouseenter(function(e) {
		var self = jQuery(this);	
		var width = self.width();
		var height = self.height();
		var position = self.offset(); // Get the absolute position of the video box
		
		var lgWidth = Math.round(width * enlargeFactor);
		var lgHeight = Math.round(height * enlargeFactor);
		var newTop = position.top - Math.round((lgHeight - height) / 2);
		var newLeft = position.left - Math.round((lgWidth - width) / 2);
		
		//console.log('width = ' + width + ' height = ' + height);
		
		var propertiesNormal = {'width': width, 'height': height, 'left': position.left, 'top': position.top};
		var propertiesBig = {'width': lgWidth, 'height': lgHeight, 'left': newLeft, 'top': newTop};
		
		// Create an link to attach cloned image to.
		var url = self.parent().attr('href');
		//console.log(url);
		url = "javascript:launchIt('"+url+"')";
		//console.log(url);
		var link = jQuery('<a class="launchyt" id="scrollable-link" >').attr('href', url).appendTo('body');
		
		// Clone the video box image
		self.clone()
		.attr({'class': "enlarged-scrollable"})
		.css(propertiesNormal)
		.bind({ // Bind the method for the large video box to disappear when the mouse leaves
			mouseleave: function(e) {
				jQuery(this)
				.animate(
					propertiesNormal, 
					{
						duration:200, 
						easing:'swing', 
						complete: function(){
							jQuery(this).remove();
							link.remove();
						} 
					});
			}
		})
		.appendTo(link)	// Append to the link so it'll be clickable
		.stop()         // Stop any currently running animation
		.animate(       // Animate the video box to the larger size
			propertiesBig,
			{
				duration: 200,
				easing: 'swing',
				complete: function(){
					var offset = jQuery(this).offset(); // Get the absolute position of the large box
					
					// If the mouse is not over the large video box animate to small
					// size and delete because it's an orphan
					if ((xMouse < offset.left) || (xMouse > (offset.left + lgWidth)) ||
						(yMouse < offset.top)  || (yMouse > (offset.top + lgHeight)))
						{
							jQuery(this)
							.animate( // Animate to the smaller size
								propertiesNormal, 
								{
									duration:50, 
									easing:'swing', 
									complete: function(){ // When the animation is finished
										jQuery(this).remove(); // Remove the video box image
										link.remove();    // Remove the associated link
									} 
								});
						}
				}
			});
	});

});