/**
 * Theme specification
 * -------------------
 * 
 * prev-btn.png, next-btn.png: 
 * 	the previous and next buttons. Size: 22 x 22 px
 * 
 * prev-panel.png, next-panel.png: 
 * 	the panel containing the previous and next buttons. Size 42 x 42 px
 * 
 */

(function($) {

$.widget("ui.vv_gallery", {

	init: function() {
		var instance = this;
		var el = instance.element;
		var o = instance.options;
		// build gallery
		instance._build();
		// initialize data
		var frames = el.find('div.gallery-frame');
		var id = el[0].id;
		if(!id)	id = el[0].id = o.id;
		instance.setData('id', id); // id must be assigned in case of multiple instances in the page
		instance.setData('numFrames', frames.length);
		instance.setData('iterator', 0);
		instance.setData('paused', false);
		instance._startAuto = instance._getStartAuto(instance);
		instance._pauseAuto = instance._getPauseAuto(instance);
		// start displaying
		frames.eq(0).show();
		el.css('visibility','visible');
		// start auto transition
		if(o.autoTransition && instance.getData('numframes') <= 1)
			o.autoTransition = false;
		if(o.autoTransition)
			$(document).everyTime(o.transitionInterval, o.id + 'play', instance._startAuto);
	},

// public methods:
	
	showItem: function(i) {
		var instance = this;
		var o = instance.options;
		var el = instance.element;
		// stop auto transition
		$(document).stopTime(o.id + 'play');
		// disable buttons
		var nextBtn = el.find('.gallery-btn-next');
		var prevBtn =  el.find('.gallery-btn-prev'); 
		nextBtn.unbind('click');
		prevBtn.unbind('click');
		el.find('div.gallery-frame').fadeOut(o.transitionSpeed)
			.eq(i).fadeIn(o.transitionSpeed, function() {
				// enable buttons
				nextBtn.bind('click', instance, instance._onClickNext);
				prevBtn.bind('click', instance, instance._onClickPrevious);
				// start auto transition
				if(o.autoTransition)
					$(document).everyTime(o.transitionInterval, o.id + 'play', instance._startAuto);
				instance.setData('iterator', i);
			});
	},
	
	showNextItem: function() {
		var instance = this;
		var iterator = instance.getData('iterator');
		if( ++ iterator == instance.getData('numFrames')) 
			iterator = 0;
		instance.showItem(iterator);
	},

	showPreviousItem: function() {
		var instance = this;
		var iterator = instance.getData('iterator');
		if(--iterator < 0) {iterator = instance.getData('numFrames') - 1;}
		instance.showItem(iterator);
	},
	

// private methods:

	_build: function() {
		var instance = this;
		var el = instance.element;
		var o = instance.options;
		o.width = parseInt(o.width, 10);	
		o.height = parseInt(o.height, 10);
		
		// set the stage panel
		el.css({
			visibility	: 'hidden', // prevent Flash of Unstyled Content (FoUC) in IE
			margin		: '0',
			width		: o.width + 'px',
			height		: o.height +'px'
		}).vv_makePositioned();
		// set the frame panels
		el.find('div.gallery-frame')
			.vv_setTotalWidth(o.width)
			.vv_setTotalHeight(o.height)	
			.css({
				position	: 'absolute',
				zIndex		: '1',
				top			: '0',
				left		: '0',
				display		: 'none',
				overflow	: 'hidden',
				background	: 'white'
			});
		// set the navigation buttons	
		if(o.hasNavigationButtons) {
			var path = o.resourcePath;
			if(o.theme)
				path += '/' + o.theme;
			
			$('<img />').addClass('gallery-btn-panel').attr('src', path + '/next-panel.png')
				.appendTo(el).css({
					position	: 'absolute',
					zIndex		: '1099',
					top			: ((o.height-42)/2) + 'px',
					right		: '0',
					width		: '42px',
					height		: '42px',
					display		: 'none'
				});

			$('<img />').addClass('gallery-btn-next').attr('src', path + '/next-btn.png')
				.appendTo(el).css({
					position	: 'absolute',
					zIndex		: '1100',
					cursor		: 'pointer',
					top			: ((o.height-22)/2) + 'px',
					right		: '10px',
					width		: '22px',
					height		: '22px',
					display		:'none'
				}).bind('click', instance, instance._onClickNext);
				
			$('<img />').addClass('gallery-btn-panel').attr('src', path + '/prev-panel.png')
				.appendTo(el).css({
					position	: 'absolute',
					zIndex		: '1099',
					top			: ((o.height-42)/2) + 'px',
					left		: '0',
					width		: '42px',
					height		: '42px',
					display		: 'none'
				});
				
			$('<img />').addClass('gallery-btn-prev').attr('src', path + '/prev-btn.png')
				.appendTo(el).css({
					position	: 'absolute',
					zIndex		: '1100',
					cursor		: 'pointer',
					top			: ((o.height-22)/2) + 'px',
					left		: '10px',
					width		: '22px',
					height		: '22px',
					display		:'none'
				}).bind('click', instance, instance._onClickPrevious);
		}
		$().bind('mousemove', instance, instance._onMouseMove);
	},
	
	// timed methods
	
	_getStartAuto: function (instance) {
		return function() {
			instance.showNextItem();
		}
	},
	
	_getPauseAuto: function (instance) {
		return function() {
			$(document).stopTime(instance.options.id + 'play');
			instance.setData('paused', true);
		}
	},

	// events management
	
	_onClickNext: function(e) {
		var instance = e.data;
		instance.showNextItem();
	},
	
	_onClickPrevious: function(e) {
		var instance = e.data;
		instance.showPreviousItem();
	},

	_getPos: function(el) {
		var instance = this;
		var left = 0, top = 0;
		var el_id = el.id;
		if(el.offsetParent)
			do {
				left += el.offsetLeft;
				top += el.offsetTop;
			} 
			while(el = el.offsetParent);
		
		// if el is the gallery itself, return it
		if(el_id == instance.options.id) 
			return {left: left, top: top} 
		
		// otherwise, get position of el relative to gallery
		var gPos = getPos(instance.element[0]);
		return {left: left - gPos.left, top: top - gPos.top};
	},

	_isMouseOverStage: function(x, y) {
		var instance = this;
		var o = instance.options;
		var pos = instance._getPos(instance.element[0]);
		var top = pos.top;
		var left = pos.left;
		return x > left && x < left + o.width && y > top && y < top +o.height;				
	},
	
	_onMouseMove: function(e){
		var instance = e.data;
		var o = instance.options;
		var el = instance.element;
		if (instance._isMouseOverStage(e.pageX, e.pageY)) {
		
			if (o.autoTransition && o.pauseOnHover) 
				$(document).oneTime(500, o.id + 'pause', instance._pauseAuto)
			el.find('.gallery-btn-next').fadeIn('fast');
			el.find('.gallery-btn-prev').fadeIn('fast');
			el.find('.gallery-btn-panel').fadeIn('fast');
		}
		else {
			if (o.autoTransition && o.pauseOnHover) {
				$(document).stopTime(o.id + 'pause');
				if (instance.getData('paused')) {
					$(document).everyTime(o.transitionInterval, o.id + 'play', instance._startAuto);
					instance.setData('paused', false);
				}
			}
			el.find('.gallery-btn-next').fadeOut('fast');
			el.find('.gallery-btn-prev').fadeOut('fast');
			el.find('.gallery-btn-panel').fadeOut('fast');
		}
	}
});

$.extend($.ui.vv_gallery, {
	getter: [],
	defaults: {
		id						: 'gallery',						// unique id. this.element[0].id must be defined and override this default. 
		resourcePath			: '/html/js/ext/images/gallery',	// path of images (do not end with '/')
		width					: 'auto',							// inner width of the stage panel ('auto' means: adapt to the gallery's first positioned parent container).
		height					: 'auto',							// inner height of the stage panel ('auto' means: adapt to the gallery's first positioned parent container).
		hasNavigationButtons	: true,								// use next and previous button 
		theme					: 'light',								// navigation theme path relative to resourcePath (must end with '/')
		autoTransition			: false,							// do automatic frames transition
		transitionInterval		: 5000,								// interval of time between frame transition (ms) when autoTransition is true
		transitionSpeed			: 1000,								// speed of frame transition (ms)
		pauseOnHover			: false								// if true, automatic transition is paused when 'mouse hovering'
		
	}
});

})(jQuery);