(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = Math.ceil((ph-ah) / 2);
	$(this).css('margin-top', mh);
	});
};
})(jQuery);


var StudiosSlideShow = function() {

	var $preloader 				= $('DIV.preloader');
	var $preloaderImg 			= $preloader.find('IMG');

	var $slideshowOuter 		= $('DIV#slideshow_outer');
	var $slideshowInner 		= $('DIV#slideshow_inner');
	var $slideDescriptions		= $(".slide > .left", $slideshowInner);
	var $slides 				= $slideshowInner.children(".slide");

	var $arrows					= $(".slideshow_controls_outer, .slideshow_controls_inner");
	var $arrowsOuter			= $(".slideshow_controls_outer");
	var $arrowsInner			= $(".slideshow_controls_inner");

	var $videoOverlay 			= $(".video_background_overlay");
	var $videoContainer 		= $(".video_container", $slideshowInner);
	var $watchVideo 			= $('A.watch', $slideshowInner);

	
	var current = 0;
	

	var arrows = {
		
		sticking: null,
		hidden: false,
		
		init: function(){
			this.check();
			$(window).resize(function(){
			    arrows.check();
			});
		},
		
		hide: function(){
			this.hidden = true;
			$arrows.css("display", "none");
		},
		
		show: function(){
			this.hidden = false;
			this.sticking = null;
			this.check();
		},
		
		check: function(){
			var width = $(window).width();
			
			if(width <= 1400 && arrows.sticking !== true && !arrows.hidden) { 
				arrows.stick();
			} 
			if(width > 1400 && arrows.sticking !== false  && !arrows.hidden) {
				arrows.unstick();
			}
		},
		
		stick: function(){
			arrows.sticking = true;
			$arrowsOuter.css("display", "");
			$arrowsInner.css("display", "none");
		},
		
		unstick: function(){
			arrows.sticking = false;
			$arrowsOuter.css("display", "none");
			$arrowsInner.css("display", "");
		}
		
	};
	
	
	var video = {
		
		hidden: true,
		
		show: function(event){
			$slideshowInner.cycle('stop');
			event.preventDefault();
			video.hidden = false;
			arrows.hide();
			$($slides[current]).find(".video_background_overlay, .video_container").fadeIn('slow');
		},
		
		hide: function(){
			if(!video.hidden){
				$($slides[current]).find(".video_background_overlay, .video_container").fadeOut('slow');
				arrows.show();
				video.hidden = true;
			}
			
		}
		
	};


	var _preload = function(images, callback) {
	
		var src		= [];
		var total	= images.length;
		var loaded	= 0;
		var done	= function() {
			loaded++;
			if (loaded === total) {
				if (typeof callback === 'function') callback();  
			}			
		};
		
		// Get a list of all image paths we need to preload		
		images.each(function() {
			src.push($(this).attr('src'));		
		});

		// Create new images nodes to track loading, doesn't always work if we attach to original DOM
		for (var i=0; i<total; i++) {
			var img = new Image();
			$(img).bind('load error', function(e) {
				done();
				$.data(this, 'loaded', ('error'==e.type)?false:true);
			});
			$(img).attr('src', src[i]);
		}

	};
	
	
	var hideLoading = function() {
	
		$slideshowInner.cycle({ 
		    fx:     	'scrollHorz', 
		    prev:   	'.slideshow_prev', 
		    next:   	'.slideshow_next', 

			speed: 		"slow",
		    timeout: 	5000,
//			timeout: 	0,

			before:     video.hide,
			onPrevNextEvent: function() {
				$slideshowInner.cycle('pause');
			},
			after: 		function(curr,next,opts){
				current = opts.currSlide;
			},

			pager:  	'div#slideshow_dots',
			pagerAnchorBuilder: function(idx, slide) { 
			    return '<div class="dot"><a href="#"><img src="/assets/img/dot.png" /></a></div>'; 
			} 

		});
		
		setTimeout(function(){
			$preloaderImg.fadeOut('slow', function(){
				$preloader.fadeOut('slow');
			});
		},  150);
	
	};


	var init = function() {

		$slideDescriptions.each(function(){
			$(this).vAlign();
		});
	
		arrows.init();
		
		$watchVideo.bind('click', video.show);
		$videoOverlay.bind('click', video.hide);
				
		$preloaderImg.show();
		_preload($('IMG', $slideshowOuter), hideLoading);
		
	};

	init();

};