/*
 * jQuery eXPanding Gallery plugin
 *
 * Fier Concept & Design B.V. Utrecht
 * Auteur: G. Stevens
 *
 * versie: 0.2 -  9 november 2009 
 * 
*/

var oFontSize;
var oMarginTop;
var oMarginTopNum;
var oDivWidth; 
var oDivHeight;
var oDivWidthNum;
var oDivHeightNum ;
var oImgWidth;
var oImageWidthNum;
var oImgHeight;
var oImageHeightNum;
	
var mpx;
var mpx_img;
var mpx_fontSize;
var duration_in;
var duration_out;

jQuery.fn.xpg = function(options) {
	var defaults = {
		mpx: 2, // multiplier for element size
		mpx_img: 2, // multiplier for contained image size
		mpx_fontSize: 2, // multiplier for font size
		duration_in: 300,
		duration_out: 300
	};  
	// Extend our default options with those provided.
	var opts = jQuery.extend(defaults, options);
	
	mpx = opts['mpx'];
	mpx_img = opts['mpx_img'];
	mpx_fontSize = opts['mpx_fontSize'];
	duration_in = opts['duration_in'];
	duration_out = opts['duration_out'];	  
		
	oFontSize = jQuery(".element").css('font-size');
	oMarginTop = jQuery(".element").css('margin-top');
	oMarginTopNum = parseFloat(oMarginTop, 10);
	
	// Original dimensions of container div
	oDivWidth = jQuery(".element").css('width');
	oDivHeight = jQuery(".element").css('height');
	oDivWidthNum = parseFloat(oDivWidth, 10);
	oDivHeightNum = parseFloat(oDivHeight, 10);
	
	// Original dimensions of image
	oImgWidth = jQuery(this).find(".element img.resize").css('width');
	oImageWidthNum = parseFloat(oImgWidth, 10);			
	oImgHeight = jQuery(this).find(".element img.resize").css('height');
	oImageHeightNum = parseFloat(oImgHeight, 10);					

	// Attach hover event to each ".element" in container
	jQuery(this).find('.element').hover(function(e) {	
		var currentFontSize = jQuery(this).css('font-size');  				
		var currentFontSizeNum = parseFloat(currentFontSize, 10);  
		var newFontSize = currentFontSizeNum * mpx_fontSize; 			
		// Als er een element is dat d.m.v. auto-ration omhoog is gekomen,
		// en het is niet het huidige element, laat dit element dan
		// zakken.
		var $active = jQuery('.xpg-container .active');
		if (!jQuery(this).hasClass('active')) {
			$active = jQuery('.xpg-container .element.active');
			shrink($active);
		}		
		jQuery(this)		
		//stops the event from happening in case of an abrupt mouseOut
		.stop()
		//custom animation effect to change the width and height of the img
		.animate({		
			width: (oDivWidthNum * mpx) +'px',
			height: (oDivHeightNum * mpx) +'px',
			fontSize: newFontSize,
			marginTop: (oMarginTopNum - 35) + 'px'

			//space the animation out over 1 sec (deals in milliseconds)
		},{ queue:false, duration:duration_in })				
		// JQuery will set overflow to hidden during animation.
		// Let's overide that, because our top left icon (positioned partially outside div) must
		// remain visible.
		.css('overflow', 'visible')				
		.find("img.resize").animate({
			width: (oImageWidthNum * mpx_img) + 'px',
			height: (oImageHeightNum * mpx_img) + 'px'				
		}, { queue:false, duration:duration_in });		
		stopped = true;					
	}, function() {		
		var currentFontSize = jQuery(this).css('font-size');  
		var currentFontSizeNum = parseFloat(currentFontSize, 10);  
		var newFontSize = currentFontSizeNum*0.5; 			
		// If element is currently beying animated, igonre event
		//if ($('.element:animated').length > 0) return;		
		jQuery(this)
		//stops the event from happening in case of an abrupt mouseOut
		.stop()
		//this animation shrinks the image back to original size
		.animate({
			 width: oDivWidth,
			 height: oDivHeight,
			 fontSize: oFontSize,
			 marginTop: oMarginTop
		},{ queue:false, duration:duration_out })
		
		// same as for mouse in: override overflow:hidden
		.css('overflow', 'visible')			
		.find("img.resize").animate({
			height: oImgHeight, 
			width: oImgWidth
		}, { queue:false, duration:duration_out });	
		stopped = false;		
	});		
	// Continue the chain without modifying this element
	return this;		  
};


var timerId;
var stopped = false;

function startAutoRotation() {
	stopped = false;		
}

function stopAutoRotation() {	
	var $active = jQuery('.xpg-container .active');
	jQuery($active)
	//stops the event from happening in case of an abrupt mouseOut
	.stop()
	//this animation shrinks the image back to original size
	.animate({
		 width: oDivWidth,
		 height: oDivHeight,
		 fontSize: oFontSize,
		 marginTop: oMarginTop
	},{ queue:false, duration:300 })
	// same as for mouse in: override overflow:hidden
	.css('overflow', 'visible')	
	.find("img.resize").animate({
		height: oImgHeight, 
		width: oImgWidth
	}, { queue:false, duration:300 });	
}

function slideSwitch() {
	var $active = jQuery('.xpg-container .element.active');
	
	// If lightwindow active - stop slide switch
	if (jQuery('#lightwindow_iframe').length > 0) {
		shrink($active);
		return;
	}
	
	if (stopped == true) return;
	
	if (!$active.length) {
		// no current active element, make first element active
		$active = jQuery('.xpg-container .element:first');
		grow($active);
		$active.addClass('active');
	} else {
		$next = $active.next();

		$next.addClass('active');
		$active.removeClass('active');		
	
		shrink($active);
		grow($next);				
	}		
}

function center() {
	// Center
	//var p_width = jQuery('.wrap').css('float', 'left').width();
	//jQuery('.wrap').css({float : 'none', width : p_width, margin : '0 auto'});
}

function shrink($element) {
		var currentFontSize = jQuery($element).css('font-size');  
		var currentFontSizeNum = parseFloat(currentFontSize, 10);  
		var newFontSize = currentFontSizeNum*0.5; 	
		
		// If element is currently beying animated, igonre event
		//if ($('.element:animated').length > 0) return;		
		
		jQuery($element)

		//stops the event from happening in case of an abrupt mouseOut
		.stop()

		//this animation shrinks the image back to original size
		.animate({
			 width: oDivWidth,
			 height: oDivHeight,
			 fontSize: oFontSize,
			 marginTop: oMarginTop
		},{ queue:false, duration:duration_out })
		
		// same as for mouse in: override overflow:hidden
		.css('overflow', 'visible')
			
		.find("img.resize").animate({
			height: oImgHeight, 
			width: oImgWidth
		}, { queue:false, duration:duration_out });	
		
		center();
}

function grow($element) {
		var currentFontSize = jQuery($element).css('font-size');  				
		var currentFontSizeNum = parseFloat(currentFontSize, 10);  
		var newFontSize = currentFontSizeNum * mpx_fontSize; 	
		
		jQuery($element)
		
		//stops the event from happening in case of an abrupt mouseOut
		.stop()

		//custom animation effect to change the width and height of the img
		.animate({		
			width: (oDivWidthNum * mpx) +'px',
			height: (oDivHeightNum * mpx) +'px',
			fontSize: newFontSize,
			marginTop: (oMarginTopNum - 35) + 'px'

			//space the animation out over 1 sec (deals in milliseconds)
		},{ queue:false, duration:duration_in })
		
		
		// JQuery will set overflow to hidden during animation.
		// Let's overide that, because our top left icon (positioned partially outside div) must
		// remain visible.
		.css('overflow', 'visible')
				
		.find("img.resize").animate({
			width: (oImageWidthNum * mpx_img) + 'px',
			height: (oImageHeightNum * mpx_img) + 'px'				
		}, { queue:false, duration:duration_in });		
	
		center();
}