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

//IMAGE ROLLOVERS FUNCTION PLUGIN

jQuery.fn.addRollover = function (activeLink) {
//function addRollover(myImg) {
	//get image width and length


	var myImg = $(this);
	//check element exists
	if(myImg.length) {
   

	var imgWidth = myImg.width();
	var imgHeight = myImg.height();
	//console.log(imgWidth);
	//console.log(imgHeight);
	
	//insert span to act as container for rollover effect
	myImg.after('<span class="img-wrapper"></span>');
	
	//format container span
	$('.img-wrapper').css({
		'height':imgHeight,
		'width':imgWidth,
		'display':'block',
		'position':'absolute',
		'top':'0px',
		'left':'0px',
		'overflow': 'hidden'	
		
	});
	
	//add span to act as container for actual efect we will set its background image
	//need to only do this to parent image div
	var myImgWrapper = myImg.parent().find('.img-wrapper');
	myImgWrapper.append('<span class="img-rollover"></span>');
	//$('.img-wrapper').append('<span class="img-rollover"></span>');
	
	//format container span
	$('.img-rollover').css({
		'height':imgHeight,
		'width':imgWidth,
		'display':'block',
		'position':'relative',
		//add left property to start the span off the screen
		'left':-imgWidth
	});
	
	//ANIMATE IMG ROLLOVERS
	activeLink.hover(
	function () {
	$(this).css('cursor','pointer').find('span.img-rollover').stop().animate({
		left: 0 }, 400, function() {
    		// Animation complete.
				
  			});
	 }, 
	function () {
		//get image width to roll back to
		var imgWidth = $(this).find('span.img-rollover').width();
		//console.log(imgWidth);
		$(this).css('cursor','auto').find('span.img-rollover').stop().animate({
		left: -imgWidth }, 400, function() {
    		// Animation complete.
				
  			});						   
 });
	
	
	
	
	
	}//end if(myImg.length) 

	
};




//setup rollovers
//home
$("#home-taste img").addRollover($("#home-panels a"));
$("#home-schools img").addRollover($("#home-panels a"));
$("#home-studios img").addRollover($("#home-panels a"));
//audience
$("#guest-two img").addRollover($("#coming-soon a"));
$("#guest-three img").addRollover($("#coming-soon a"));
$("#guest-four img").addRollover($("#coming-soon a"));


//end of document ready
});