/*
	galleryList
	largeIMG
*/

jQuery.fn.gallery = function(_options){
	
	var _options = jQuery.extend({
		galleryList: 'ul li a',
		largeIMG: 'div.img-hold img',
		btNext: 'a.next-photo',
		btPrev:'a.prev-photo',
		btFirst:'a.first-photo',
		btLast:'a.last-photo',
		play:'a.play',
		loadIMG:'div.img-hold img.load',
		holderEl:'div',
		moveEl:'ul',
		simpleEl:'li',
		duration: 400,
		slideTime : 4000
	},_options);
	
	return this.each(function(){
		var _THIS = $(this);
		var _galleryList = jQuery(_options.galleryList, _THIS);
		var _btNext = jQuery(_options.btNext, _THIS);
		var _btPrev = jQuery(_options.btPrev, _THIS);
		var _btFirst = _options.btFirst ? jQuery(_options.btFirst, _THIS) : false;
		var _btLast = _options.btLast ? jQuery(_options.btLast, _THIS) : false;
		var _btPlay = _options.play ? jQuery(_options.play, _THIS) : false;
		var _largeIMG = jQuery(_options.largeIMG, _THIS);
		var _loadIMG = jQuery(_options.loadIMG, _THIS);
		var _duration = _options.duration;
		var _img = new Image();
		var _holderEl = jQuery(_options.holderEl, _THIS);
		var _moveEl = jQuery(_options.moveEl, _THIS);
		var _simpleEl = jQuery(_options.simpleEl, _THIS);
		var _holderWidth = _holderEl.outerWidth();
		var _simpleElWidth = _simpleEl.outerWidth();
		var _moveElwidth = _simpleElWidth*_simpleEl.length;
		var _margin = 0;
		
		var _step = _simpleElWidth;
		
		// preload
		var _imagesG = [];
		_galleryList.each(function(i, el){
			if (jQuery(el).attr('rel') != '') {
				_imagesG[i] = new Image();
				var _rel = jQuery(this).attr('rel');
				_imagesG[i].src = _rel;
			}
		});
		_loadIMG.hide();
		_largeIMG.filter('.next').hide();
		
		// click gallery
		_galleryList.click(function(){
			if (jQuery(this).attr('rel') != '' && !jQuery(this).is('.active')) {
				_galleryList.removeClass('active');
				var _rel = jQuery(this).attr('rel');
				_loadIMG.show();
				_img.onload = function(){
					showImg(_rel);
					_img.onload = function(){};
				};
				_img.src = _rel;
				
				jQuery(this).addClass('active');
				showTitle(_galleryList.filter('.active'));
			}
			return false;
		});
		function showImg(rel) {
			_loadIMG.hide();
			_largeIMG.filter('.active').removeClass('active').addClass('temp').fadeOut(_duration);
			_largeIMG.filter('.next').fadeIn(_duration).removeClass('next').addClass('active').attr('src',rel);
			_largeIMG.filter('.temp').removeClass('temp').addClass('next');
		}
		var _timerPlay = false;
		if (_btPlay) {
			_btPlay.click(function(){
				if ($(this).is('.pause')) {
					$(this).removeClass('pause');
					if (_timerPlay) clearTimeout(_timerPlay);
				} else {
					$(this).addClass('pause');
					_timerPlay = setTimeout(function(){nextSlide()}, _options.slideTime/2);
				}
				return false;
			})
		}
		// Next/Prev
		if (_btNext) {
			_btNext.click(function(){
				nextSlide.apply(this);
				return false;	
			});
		}
		function nextSlide(){
			if (!_loadIMG.is(':visible')) {
				if ($(_btPlay).is('.pause')) _timerPlay = setTimeout(function(){nextSlide()}, _options.slideTime);
				moveNext();
			}			
		}
		var _title = $('div.box-images-text', _THIS);
		_title.filter(':first').addClass('show');
		_title.not(':first').css('bottom',-51);
		function showTitle(_active){
			var _id = _active.attr('href');
			_id = _id.substr(_id.indexOf('#'));
			_title.filter('.show').animate({bottom:-51}, {queue:false, duration:200, complete:function(){
				$(_id).animate({bottom:0}, {queue:false, duration:200}).addClass('show');
				var _href = $(_id).find('a').attr('href');
				_largeIMG.parent().attr('href', _href);
			}}).removeClass('show');
		}
		if (_btPrev) {
			_btPrev.click(function(){
				if (!_loadIMG.is(':visible')) {
					movePrev();
				}
				return false;
			});
		}
		if (_btFirst) {
			_btFirst.click(function(){
				if (!_loadIMG.is(':visible')) {
					var _indexActive = 0;
					_galleryList.removeClass('active');
					_galleryList.eq(_indexActive).addClass('active');
					var _rel = _galleryList.filter('.active').attr('rel');
					
					_img.src = _rel;
					_loadIMG.show();
					_img.onload = function(){
						showImg(_rel);
						_img.onload = function(){};
					};
					_margin = 0;
					_moveEl.animate({marginLeft:-_margin},{queue:false,duration:_duration});
				}
				return false;	
			});
		}
		if (_btLast) {
			_btLast.click(function(){
				if (!_loadIMG.is(':visible')) {
					var _indexActive = _galleryList.length - 1;
					_galleryList.removeClass('active');
					_galleryList.eq(_indexActive).addClass('active');
					var _rel = _galleryList.filter('.active').attr('rel');
					
					_img.src = _rel;
					_loadIMG.show();
					_img.onload = function(){
						showImg(_rel);
						_img.onload = function(){};
					};
					_margin = _moveElwidth-_holderWidth;
					_moveEl.animate({marginLeft:-_margin},{queue:false,duration:_duration});
				}
				return false;	
			});
		}
		
		function moveNext() {
			if (_margin == _moveElwidth-_holderWidth) {
				_margin = 0;
			} else if (_margin+_step*6 > _moveElwidth-_holderWidth) {
				_margin = _moveElwidth-_holderWidth;
			}
			else _margin += _step*6;
			_moveEl.animate({marginLeft:-_margin},{queue:false,duration:_duration*2});
		}
		function movePrev() {
			if (_margin == 0 ){
				_margin = _moveElwidth-_holderWidth;
			} else if (_margin-_step*6 < 0) {
				_margin = 0;
			}
			else _margin -= _step*6;
			_moveEl.animate({marginLeft:-_margin},{queue:false,duration:_duration*2});
		}
	});
}
$(document).ready(function(){
	$('div.box-images').gallery({
		galleryList:'#carusel ul a',
		largeIMG: '.box-images-pict img',
		loadIMG:'img.load',
		btNext: 'a.link-next',
		btPrev:'a.link-prev',
		btFirst: false,
		btLast: false,
		play: false,
		holderEl:'#carusel div',
		moveEl:'#carusel div ul',
		simpleEl:'#carusel div li'
	})
});