// DOM load page init
$(function(){
	initGalleryVideo();
});

// if Internet Explorer
ie = jQuery.browser.msie && jQuery.browser.version < 9;

// init gallery
function initGalleryVideo(){
	var waitAnimating = false;
	var g1 = new initGallery(jQuery('.gallery-section'),{
		list: 'ul.gallery',
		switcher: '.switcher-holder ul.switcher > li',
		effect: 'fade',
		autoRotation: 10000,
		conditionSwitcher: function(obj, index, callback){
			if(!waitAnimating) callback(index)
		},
		onStart: function(obj){
			resetElements(obj);
			slideTitle(obj);
			resizeImg(obj);
		},
		beforeChange: function(obj){
			initTimer(obj);
		},
		onChange: function(obj){
			slideTitle(obj);
		},
		switcherClick: function(obj){
			resetElements(obj);
		}
	});
	
	// on image resize
	function resizeImg(obj){
		if($(window).width() > 1920) {
			$('body').addClass('max-width');
		}
		else{
			$('body').removeClass('max-width');
		}
		$(window).unbind('resize').bind('resize', function(){
			resizeImg(obj);
		});
	};
	
	// reset
	function resetElements(obj){
		obj.switcher.eq(obj.active).find('.mask, .l').stop().end().find('.mask').css({left:0, width:0, right:'auto'}).end().find('.l').css({left:-3});
		var elem = obj.list.children().find('h2');
		var h = elem.height();
		if(ie) elem.children().hide();
		else {
			elem.children().css({
				'position':'relative',
				opacity:0,
				top:h/3
			});
		}
	}
	
	// title slide
	function slideTitle(obj){
		var elem = obj.list.children().eq(obj.active).find('h2');
		var h = elem.height();

		var i = 0;
		var count = elem.children().length;
		var eachSpan = setInterval(function(){
			waitAnimating = true;
			if(ie) elem.children().eq(i).show();
			else elem.children().eq(i).animate({opacity:1, top:0}, {queue:false, duration: obj.autoRotation/10});
			i++;
			if(i == count) {
				clearInterval(eachSpan);
				setTimeout(function(){
					waitAnimating = false;
				}, obj.autoRotation/10);
			}
		}, 200);
		setTimeout(function(){
			eachSpan = setInterval(function(){
				if(ie) elem.children().eq(i).hide();
				else elem.children().eq(i).animate({opacity:0, top:h/3}, {queue:false, duration: obj.autoRotation/10});
				i--;
				if(i < 0) clearInterval(eachSpan);
			}, 200);
		}, obj.autoRotation*(2/3));
	}
	
	// timer
	function initTimer(obj){
		obj.switcher.eq(obj.active).find('.mask').animate({left:2}, {queue: false, duration:obj.autoRotation/2});
		obj.switcher.eq(obj.active).find('.l').animate({left:0}, {queue: false, duration:obj.autoRotation/2});
		obj.switcher.eq(obj.active).find('span.mask').animate({width:'100%'}, {queue:false, duration:obj.autoRotation, complete: function(){
			var _this = $(this);
			$(this).css({left:'auto', right:-1});
			_this.animate({width:0}, {queue:false, duration:obj.autoRotation/6, complete:function(){
				$(this).css({left:0, right:'auto'});
			}});
			_this.parent().find('span.l').animate({left: '100%'}, {queue:false, duration:obj.autoRotation/6 + 50, complete: function(){
				$(this).css({'left': -3});
			}});
		}});
	}
}

// main gallery module
function initGallery(context, options){this.init(context, options)}
(function( $ ){
	initGallery.prototype = {
		autoRotation: false,
		disableBtn: false,
		disabledChild: false,
		list: 'ul.g1',
		switcher: false,
		prev: false,
		next: false,
		effect: false,
		event:'click',
		onStart: function(){},
		beforeChange: function(){},
		onChange: function(){},
		switcherClick: function(){},
		conditionSwitcher: false,
		activeSlide: 0,
		
		init: function(context, options){
			for ( var i in options ) this[i] = options[i]; 
			this.holder = $(context);
			if(this.holder == undefined) return;
			
			this.list = this.holder.find(this.list);
			this.animation = true, this.active = 0;
			this.prevActive = this.active, this.wait;
			this.count = this.list.children().length,
			this.w = this.list.children().eq(0).outerWidth(true);
			this.holdW = this.list.parent().width();
			this.visEl = Math.ceil(this.holdW/this.w);
			
			if(this.count <= this.visEl) this.animation = false;
			
			if(this.effect == 'fade') this.list.children().css('opacity', 0).eq(this.active).css('opacity', 1).addClass('active');
			else if(this.effect == 'slide') this.list.css('marginLeft', -this.w*this.active);

			this.initControls(this);
			
			this.toggleState.listItem(this);
			if(this.switcher) this.toggleState.switchItem(this);
			
			this.onStart(this, this.list, this.active);
			
			if(this.autoRotation && this.animation) this.runTimer(this);
		},
		initControls: function(_this){
			if(_this.prev && _this.next){
				_this.prev = _this.holder.find(_this.prev).attr('rel', 'prev').click(function(e){
					_this.beforeChange(_this, e);
					_this.refreshState(e);
					return false;
				});
				_this.next = _this.holder.find(_this.next).attr('rel', 'next').click(function(e){
					_this.beforeChange(_this, e);
					_this.refreshState(e);
					return false;
				});
			}
			if(_this.switcher){
				_this.switcher = _this.holder.find(_this.switcher);
				_this.toggleState.switchItem(_this);
				_this.switcher.bind(_this.event, function(){
					var ind = _this.switcher.index($(this));
					if(typeof _this.conditionSwitcher === 'function') {
						_this.conditionSwitcher(_this, ind, funcChange);
					}
					else {
						_this.switcherClick(_this);
						_this.refreshState(ind);
					}
					return false;
				});
				function funcChange(ind){
					_this.switcherClick(_this);
					_this.refreshState(ind);
				}
			}
			if(this.disableBtn) this.disabledConrtol();
		},
		toggleState:{
			listItem: function(_this){
				_this.list.children().eq(_this.prevActive).removeClass('active');
				_this.list.children().eq(_this.active).addClass('active');
			},
			switchItem: function(_this){
				_this.switcher.eq(_this.prevActive).removeClass('active');
				_this.switcher.eq(_this.active).addClass('active');
			}
		},
		disabledConrtol: function(){
			if(this.active == 0) {
				if(this.disabledChild){
					this.prev.attr('rel', 'stop').children().addClass('disabled');
					this.next.attr('rel', 'next').children().removeClass('disabled');
				}
				else{
					this.prev.attr('rel', 'stop').parent().addClass('disabled');
					this.next.attr('rel', 'next').parent().removeClass('disabled');
				}
			}
			else if(this.active == this.count-1 || (this.visEl > 2 && this.active + this.visEl == this.count)) {
				if(this.disabledChild){
					this.prev.attr('rel', 'prev').children().removeClass('disabled');
					this.next.attr('rel', 'stop').children().addClass('disabled');
				}
				else{
					this.prev.attr('rel', 'prev').parent().removeClass('disabled');
					this.next.attr('rel', 'stop').parent().addClass('disabled');
				}
				this.autoRotation = false;
			}
			else {
				if(this.disabledChild){
					this.prev.attr('rel', 'prev').children().removeClass('disabled');
					this.next.attr('rel', 'next').children().removeClass('disabled');
				}
				else{
					this.prev.attr('rel', 'prev').parent().removeClass('disabled');
					this.next.attr('rel', 'next').parent().removeClass('disabled');
				}
			}
		},
		runTimer: function(_this){
			_this.beforeChange(_this);
			this.wait = setTimeout(function(){_this.refreshState('next')}, this.autoRotation)
		},
		stop: function(){
			if(this.wait) clearTimeout(this.wait)
		},
		play: function(){
			if(this.wait) clearTimeout(this.wait);
			if(this.autoRotation) this.runTimer(this);
		},
		changeSlide:{
			fade:function(_this){
				_this.list.children().eq(_this.prevActive).animate({opacity:0}, {queue:false, duration:700});
				_this.list.children().eq(_this.active).animate({opacity:1}, {queue:false, duration:700, complete:function(){
					_this.play();
					_this.onChange(_this, _this.list, _this.active);
				}});
			},
			slide:function(_this){
				if(_this.active + _this.visEl > _this.count) _this.active = 0;
				_this.list.animate({marginLeft:-_this.w*_this.active}, {queue:false, duration:500, complete:function(){
					_this.play();
					_this.onChange(_this, _this.list, _this.active);
				}});
			}
		},
		refreshState: function(e){
			if(this.animation){
				this.prevActive = this.active;
				if(typeof e == 'string' && e == 'next') this.active++;
				else if(typeof e == 'number') this.active=e;
				else{
					if($(e.currentTarget).attr('rel') == 'next') this.active++;
					else if($(e.currentTarget).attr('rel') == 'prev') this.active--;
				}
				if(this.wait) clearTimeout(this.wait);
				if(this.active == this.count) this.active = 0;
				else if(this.active == -1) this.active=this.count - 1;
				
				this.toggleState.listItem(this);
				if(this.switcher) this.toggleState.switchItem(this);
				
				if(this.disableBtn) this.disabledConrtol();
				
				if(this.effect == 'fade') this.changeSlide.fade(this);
				else if(this.effect == 'slide') this.changeSlide.slide(this);
			}
		}	
	}
})( jQuery );