/* Slider
 *  (c) 2010 Andrey Nebogin anebogin@gmail.com
 *
 *  jQuery is used.
 *  Description: fade in-out the gallery
*/

function Slider( el, opts )
{
	var self = this;
	
	var el = $(el);
	var container = null;
	
	var timer = null;
	var animationRun = false;
	
	var VERSION = "1.0.0";
	
	this.options = {
		path: '/js/slider/', // path where slider is
		flowplayer_path: '/js/flowplayer/', // path where flowplayer is
		get_items_ajax_url: null, // url to get slides data, AJAX method is used
		
		slide_duration: 400,
		slide_easing: 'swing',
		slide_id_prefix: 'slider_player', // prefix of the id of the slide player ( flv, mov or stream )
		
		onClick: null,
		onLoadedFirst: null,
		onPlay: null,
		afterPlay: null,
		
		autoPlay: true,
		autoPlayInterval: 2000,
		
		showIdx: 0
	};
	
	this.isLoadedFirst = false; //flag shows if the first slide was loaded
	this.isLoadedAll = false; //flag shows if the all slides were loaded
	this.slidesData = null; // copy of the slides data which received using get_items_ajax_url
	this.slides = []; // created divs and addition data
	this.currentIdx = 0;
	
	var loadedFirst = function( func )
	{
		var thisTimer;
		thisTimer = setInterval( function()
		{
			if( self.isLoadedFirst == true )
			{
				clearInterval( thisTimer );
				func();
			}
		}, 20);
	};
	
	this.loadedFirst = function( func )
	{
		loadedFirst( func );
		return self;
	};
	
	var loadedAll = function( func )
	{
		var thisTimer;
		thisTimer = setInterval( function()
		{
			var loaded = true;
			for( var i=0; i<self.slides.length; i++ )
			{
				if( !self.slides[i].loaded )
				{
					loaded = false;
					break;
				}
			}
			if( loaded )
			{
				self.isLoadedAll == true;
				clearInterval( thisTimer );
				func();
			}
		}, 20);
	};
	
	this.loadedAll = function( func )
	{
		loadedAll( func );
		return self;
	};
	
	var getSizeCss = function( value )
	{
		var retval = value;
		
		var exp1 = /^.+px\s*$/i;
		var exp2 = /^.+%\s*$/i;
		if( exp1.test(value) ) retval = value;
		else if( exp2.test(value) ) retval = value;
		else retval = parseInt(value) +'px';
		
		return( value );
	};
	
	var createSlides = function( data )
	{
		self.slidesData = data.slides;
		
		container = $('<div id="slides_container"></div>').css({
			'position': 'absolute',
			'width': getSizeCss(data.width),
			'height': getSizeCss(data.height)
		});
		el.append( container );
		
		for( var i=0; i<data.slides.length; i++ )
		{
			
			if( typeof(data.slides[i]) == 'object' )
			{
				var opts = {
					"width": data.width,
					"height": data.height,
					"data_path": data.data_path
				};
				createSlide( container, data.slides[i], i, opts );
			}
		}
	};
	
	var getExt = function( filename )
	{
		return filename.split('.').pop();
	};
	
	/*
		slide:
			id - ID of the slide
			small - small version of the original image
			original - original image or vide file
			url - stream video
	*/
	var createSlide = function( element, slide, idx, opts )
	{
		if( typeof(slide) == 'object' )
		{
			var id = slide.id;
			
			var w = el.width();
			var h = el.height();
			var div = $('<div id="slide_item"></div>').css({
				'position': 'absolute',
				'display': 'block',
				'left': '10000px',
				'top': '0px',
				'width': w +'px',
				'height': h +'px',
				'float': 'left',
				'opacity': 0.2,
				'clear': 'none'
			});
			
			element.append( div );
			
			var loader = null;
			if( idx == 0 )
			{
				loader = $("<div><img src='"+ self.options.path +"loader.png' border='0'/></div>").css({
					"position": "absolute",
					"z-index": 100,
					"width": '118px',
					"height": '90px',
					"background": 'transparent url('+ self.options.path +'loader.gif) no-repeat 50% 100%',
					"top": (div.height()/2 - 45) +"px",
					"left": (div.width()/2 - 59) +"px"
				});
				el.append( loader );
			}
			
			var filename  = null;
			var ext = null;
			var streamUrl = slide.url;
			if( slide.small )
			{
				filename = opts.data_path + slide.small;
				ext = getExt( slide.small ).toLowerCase();
			}
			else
			{
				filename = opts.data_path + slide.original;
				ext = getExt( slide.original ).toLowerCase();
			}
			
			self.slides.push( {
				'id': id,
				'idx': idx,
				'ext': ext,
				'loaded': false,
				'div': div
			} );
			
			if( ext == "flv" )
			{
				//var w = el.width();
				var w = 875;
				var h = el.height();
				
				var player = $("<div id='"+ self.options.slide_id_prefix + id +"'></div>").css({
					"width": w +'px',
					"height": h +'px',
					"position": "absolute",
					"z-index": 10
				});
				if( loader ) loader.remove();
				div.append( player );
				if( idx == 0 ) self.isLoadedFirst = true;
				self.slides[idx].loaded = true;
				
				if( self.options.onClick != null )
				{
					player.bind( 'click', function( event ) {
						self.options.onClick( el, self, event );
					} );
				}
				
				var playlist = new Array();
				if( slide.cover ) playlist.push( {url:opts.data_path + slide.cover,scaling:'fit',autoPlay:true} ); 
				playlist.push( {url:filename,autoBuffering:true} );
				
				var fp = flowplayer( self.options.slide_id_prefix + id, { src: self.options.flowplayer_path+"flowplayer.swf", wmode: "transparent" }, {
					key: '#@23c8474051f0be3777d',
					logo: null,
					clip: {
						autoPlay: false,
						scaling: 'fit',
						title: '',
						onPause : function() {
						}
					},
					playlist: playlist,
					canvas: {
						backgroundColor: 'transparent',
						backgroundGradient: 'none'
					},
					play: {
						replayLabel: '',
						url: self.options.path+'play.png',
						width: 79,
						height: 79
					},
					plugins: {
						controls: null
					}
				});
				//fp.play();
			}
			if( ext == "flvold" )
			{
				//var w = el.width();
				var w = 875;
				var h = el.height();
				
				var player = $("<div id='"+ self.options.slide_id_prefix + id +"'></div>").css({
					"position": "absolute",
					"z-index": 10
				});
				if( loader ) loader.remove();
				div.append( player );
				if( idx == 0 ) self.isLoadedFirst = true;
				self.slides[idx].loaded = true;
				
				var flashvars = {
					"flv": filename,
					"controlbar": "none",
					"autoplay": "true",
					"autoreplay": "false"
				};
				var params = {
					"allowscriptaccess": "always",
					"allowfullscreen": "false",
					"wmode": "transparent"
				};
				var attributes = {};
				var swf = swfobject.embedSWF( self.options.path +"player.swf", self.options.slide_id_prefix + id, w, h, "9.0.0", "expressInstall.swf", flashvars, params, attributes );
			}
			else if( ext == "mov" )
			{
				//var w = el.width();
				var w = 875;
				var h = el.height();
				
				var player = $("<div id='"+ self.options.slide_id_prefix + id +"'></div>").css({
					"position": "absolute",
					"z-index": 10
				});
				if( loader ) loader.remove();
				div.append( player );
				if( idx == 0 ) self.isLoadedFirst = true;
				self.slides[idx].loaded = true;
				
				var qt = QT_GenerateOBJECTText( filename, w, h, "", 'autoplay', 'true', "wmode", "transparent", "bgcolor", "black" );
				player.html( qt );
			}
			else if( streamUrl != '' && swfobject.getFlashPlayerVersion().major > 0 )
			{
				//var w = el.width();
				var w = 875;
				var h = el.height();
				
				var player = $("<div id='"+ self.options.slide_id_prefix + id +"'></div>").css({
					"width": w +'px',
					"height": h +'px',
					"position": "absolute",
					"z-index": 10
				});
				if( loader ) loader.remove();
				div.append( player );
				if( idx == 0 ) self.isLoadedFirst = true;
				self.slides[idx].loaded = true;
				
				if( self.options.onClick != null )
				{
					player.bind( 'click', function( event ) {
						self.options.onClick( el, self, event );
					} );
				}
				
				var playlist = new Array();
				if( slide.cover ) playlist.push( {url:opts.data_path + slide.cover,scaling:'fit',autoPlay:true} ); 
				playlist.push( {url:streamUrl,autoBuffering:true} );
				
				var fp = flowplayer( self.options.slide_id_prefix + id, { src: self.options.flowplayer_path+"flowplayer.swf", wmode: "transparent" }, {
					key: '#@23c8474051f0be3777d',
					clip: {
						autoPlay: false,
						scaling: 'fit',
						title: 'DIST',
						onPause : function() {
						}
					},
					playlist: playlist,
					canvas: {
						backgroundColor: 'transparent',
						backgroundGradient: 'none'
					},
					play: {
						replayLabel: '',
						url: self.options.path+'play.png',
						width: 79,
						height: 79
					},
					plugins: {
						controls: null/*{
							url: self.options.flowplayer_path+'flowplayer.controls.swf'
						}*/
					}
				});
				//fp.play();
			}
			else if( streamUrl != '' && navigator.userAgent.match(/iPad/i) != null )
			{
				//var w = el.width();
				var w = 875;
				var h = el.height();
				
				var player = $("<div id='"+ self.options.slide_id_prefix + id +"'></div>").css({
					"position": "absolute",
					"z-index": 10
				});
				if( loader ) loader.remove();
				div.append( player );
				if( idx == 0 ) self.isLoadedFirst = true;
				self.slides[idx].loaded = true;
				
				var qt = QT_GenerateOBJECTText( streamUrl, w, h, "", 'autoplay', 'true', "wmode", "transparent", "bgcolor", "black" );
				player.html( qt );
			}
			else if( streamUrl != '' && swfobject.getFlashPlayerVersion().major==0 && supportHTML5Video() )
			{
				//var w = el.width();
				var w = 875;
				var h = el.height();
				
				var player = $("<div id='"+ self.options.slide_id_prefix + id +"'></div>").css({
					"width": w +'px',
					"height": h +'px',
					"position": "absolute",
					"z-index": 10
				});
				if( loader ) loader.remove();
				div.append( player );
				if( idx == 0 ) self.isLoadedFirst = true;
				self.slides[idx].loaded = true;
				
				player.html( "<video width='"+ w +"' height='"+ h +"' poster='' preload='' autobuffer='' src='"+ streamUrl +"'><source width='"+ w +"' height='"+ h +"' src='"+ streamUrl +"'/></video>" );
			}
			else
			{
				var img = $("<img id='"+ self.options.slide_id_prefix + id +"' src='"+ filename +"' border='0'/>").css({
					"position": "absolute",
					"z-index": 10
				}).load(function(){
					if( loader ) loader.remove();
					div.append( img );
					if( idx == 0 ) self.isLoadedFirst = true;
					self.slides[idx].loaded = true;
				});
				if( $.browser.msie )
				{
					img.css({
						"opacity": 0.2
					});
				}
			}
		}
	};
	
	var supportHTML5Video = function()
	{
		return( !!document.createElement('video').canPlayType );
	};
	
	var show = function( idx )
	{
		if( self.slides.length > 0 )
		{
			self.currentIdx = idx;
			var s = self.slides[idx].div;
			animationRun = true;
			s.animate( {"opacity": 1}, function() { animationRun = false; } );
			if( $.browser.msie ) s.children('img').animate( {'opacity': 1}, function() {} );
			
			//if( self.slides[idx].ext == 'flv' )
			//{
			//	$f(self.options.slide_id_prefix+self.slides[idx].id).play();
			//}
		}
	};
	
	this.prev = function()
	{
		if( !animationRun && self.slides.length > 1 && self.currentIdx-1 >= 0 )
		{
			var prevIdx = self.currentIdx;
			self.currentIdx --;
			//if( self.currentIdx < 0 ) self.currentIdx = self.slides.length - 1;
		
			play( self.currentIdx, prevIdx, -1 );
		}
	};
	
	this.next = function()
	{
		if( !animationRun && self.slides.length > 1 && self.currentIdx+1 < self.slides.length )
		{
			var prevIdx = self.currentIdx;
			self.currentIdx ++;
			//if( self.currentIdx >= self.slides.length ) self.currentIdx = 0;
		
			play( self.currentIdx, prevIdx, 1 );
		}
	};
	
	this.play = function( idx )
	{
		if( !animationRun )
		{
			var prevIdx = self.currentIdx;
			self.currentIdx = idx;
			if( self.currentIdx >= self.slides.length ) self.currentIdx = 0;
			
			var direction = ( idx > prevIdx )? 1 : -1;
			if( idx != prevIdx ) play( self.currentIdx, prevIdx, direction );
		}
	};
	
	/* direction = 1 -next, -1 -prev */
	var play = function( idx, prevIdx, direction )
	{
		if( !animationRun )
		{
			if( self.slides[prevIdx].ext == 'flv' || self.slides[prevIdx].ext == 'url' )
			{
				$f(self.options.slide_id_prefix+self.slides[prevIdx].id).stop();
			}
			
			clearTimeout( timer );
			
			animationRun = true;
			self.slides[prevIdx].div.animate( {'opacity': 0.2}, function() {} );
			
			if( $.browser.msie ) self.slides[prevIdx].div.children('img').animate( {'opacity': 0.2}, function() {} );
			
			var left = 0;
			if( direction == 1 )
			{
				for( var i=prevIdx; i<idx; i++ )
				{
					left -= self.slides[i].div.width();
				}
			}
			else
			{
				for( var i=idx; i<prevIdx; i++ )
				{
					left += self.slides[i].div.width();
				}
			}
			left += self.slides[idx].div.parent().position().left;
			self.slides[idx].div.parent().animate( {'left': left }, function() {
				if( self.options.onPlay != null ) self.options.onPlay( self, self.slidesData[idx] );
				self.slides[idx].div.animate( {'opacity': 1}, function() {
					if( self.options.afterPlay != null ) self.options.afterPlay( self, self.slidesData[idx] );
					if( self.slides[idx].ext == 'flv' || self.slides[idx].ext == 'url' )
					{
						$f(self.options.slide_id_prefix+self.slides[idx].id).play();
					}
				});
				if( $.browser.msie ) self.slides[idx].div.children('img').animate( {'opacity': 1}, function() {} );
					
				//alert( left );
				//alert( self.slides[idx].div.parent().position().left );
				//alert( self.slides[idx].div.position().left );
				
				self.slides[idx].div.parent().css( {'left': left+'px' } );
				if( self.slides[idx].div.parent().position().left != left )
				{
					self.slides[idx].div.parent().css( {'left': (left-1)+'px' } );
				}
				animationRun = false;
			} );
			
			if( self.options.autoPlay )
			{
				var duration = self.options.autoPlayInterval;
				
				timer = setTimeout( function() {
					self.next();
				}, duration );
			}
		}
	};

	var initialize = function( opts )
	{
		if( typeof(opts) != "undefined" )
		{
			for(var key in opts) self.options[key] = opts[key];
		}
		
		if( self.options.get_items_ajax_url )
		{
			$.ajax(
			{
				type: 'POST',
				dataType: "json",
				url: self.options.get_items_ajax_url,
				data: null,
				success: function( data )
				{
					createSlides( data );
					
					loadedAll( function() {
						var parentW = 0;
						for( var i=0; i<data.slides.length; i++ )
						{
							var w = self.slides[i].div.children().first().width();
							parentW += w;
							self.slides[i].div.css({
								'left': (parentW-w) +'px',
								'width': w +'px',
								'height': self.slides[i].div.children().first().height() +'px'
							});
						}
						self.slides[0].div.parent().css({
							'width': parentW +'px'
						});
					});
					
					loadedFirst( function() {
						if( self.options.onLoadedFirst != null ) self.options.onLoadedFirst( self, self.slidesData[self.options.showIdx] );
						self.slides[self.options.showIdx].div.css({
							'left': '0px'
						});
						show( self.options.showIdx );
						if( self.options.autoPlay )
						{
							var duration = self.options.autoPlayInterval;
							
							timer = setTimeout( function() {
								self.next();
							}, duration );
						}
					} );
				},
				error: function( XMLHttpRequest, textStatus, errorThrown ) { alert('error get data: '+textStatus ); try {} catch (e) {} }
			});
		}
	};
	
	initialize( opts );
};