// FoamCicleVideo v01
	// Ailantd & Additive Works 
	// www.ailantd.com & www.additiveworks.com

	// FoamCicleVideo()
	//------------------------------------------------------------
	//
	// METODOS
	//------------------------------------------------------------
	//
	//------------------------------------------------------------
	function CFoamCicleVideo( oMyDiv )
	{	
		//GET PROPERTIES
		//
		
		// DIV
		//
		this.Div = oMyDiv ;					// Base div
		this.Mask ;							// Video Mask
		this.Content ;						// Video Content

		this.Next ;							// Next
		this.Prev ;							// Previous
		this.Info ;							// Information

		this.vVideos = [] ;					// Video array
		this.actualItem ;					// Actual video
		
		//CALLBACK TRICK
		//
		var that 				= this ;	// Fix for callbacks
		
		//------------------------------------------
		// METODOS
		//------------------------------------------

		// CREATE
		//
		//-------------------------------------------------
		this.Create = function()
		{
			// RECOPILAR LA INFORMACION Y COMENZAR CARGA DE IMAGENES
			//
			var nMyItem ;
			var vVideo = this.Div.getElementsByTagName( "div" ) ;
			for ( var i=0 , n=vVideo.length ; i<n ; i++ )
			{
				if( vVideo[i].getAttribute("data-foam") == 'item' )
				{
					this.vVideos.push( { type:vVideo[i].getAttribute("data-type") , id:vVideo[i].getAttribute("data-id") , title:vVideo[i].getAttribute("data-title") , text:vVideo[i].getAttribute("data-text") } ) ;
				}
			}
			
			// IF NO VIDEOS LOADED RETUN
			//
			if( n == 0 ) return ;
			
			// CLEAR DIV
			// TODO: BEST CLEARING METHOD
			this.Div.innerHTML = "" ;
			this.Div.style.overflow = "visible" ;
			this.Div.style.display = "block" ;
			
			// MASK
			this.Mask = document.createElement( "div" ) ;
			this.Mask.className = "FoamScroll-Mask" ;
			this.Mask.style.position = "absolute" ;
			this.Mask.style.top = "0px" ;
			this.Mask.style.left = "0px" ;
			this.Mask.style.width = "100%" ;
			this.Mask.style.height = "100%" ;
			this.Mask.style.overflow = "hidden" ;
			this.Div.appendChild( this.Mask ) ;
						
			// CONTENT
			this.Content = document.createElement( "div" ) ;
			this.Content.className = "FoamCicleVideo-Content" ;
			this.Content.style.position = "absolute" ;
			this.Content.style.top = "0px" ;
			this.Content.style.left = "0px" ;
			this.Content.style.width = "100%" ;
			this.Content.style.height = "100%" ;
			this.Mask.appendChild( this.Content ) ;

			// INFO
			this.Info = document.createElement( "div" ) ;
			this.Info.className = "FoamCicleVideo-Info" ;
			this.Div.appendChild( this.Info ) ;
			
			if( n > 1 )
			{
				// NEXT / PREV CLICK
				this.Next = document.createElement( "div" ) ;
				this.Next.className = "FoamCicleVideo-Next" ;
				this.Div.appendChild( this.Next ) ;
				
				this.Prev = document.createElement( "div" ) ;
				this.Prev.className = "FoamCicleVideo-Prev" ;
				this.Div.appendChild( this.Prev ) ;			
			
			
				// EVENTS
				//
				
				// UP / DOWN CLICK
				//---------------------			
				this.Next.onclick = this.OnNext ;
				this.Prev.onclick = this.OnPrev ;
			}
			
			// START
			this.LoadItem( 0 ) ;									
		}

		// ON NEXT
		//
		//-------------------------------------------------		
		this.OnNext = function( e )
		{
			//alert( that.actualItem + " == " + ( that.vVideos.length -1 ) ) ;
			if( that.actualItem == that.vVideos.length -1 )
				that.LoadItem( 0 ) ;
			else
				that.LoadItem( that.actualItem + 1 ) ;
			
		}

		// ON PREV
		//
		//-------------------------------------------------		
		this.OnPrev = function( e )
		{	
			if( that.actualItem == 0 )
				that.LoadItem( that.vVideos.length - 1 ) ;	
			else
				that.LoadItem( that.actualItem - 1 ) ;					
		}

		// CHECK ID
		//
		//-------------------------------------------------		
		this.CheckId = function( nId )
		{
			if( nId < that._voPictures.length && nId >= 0 )
				return true ;
			
			return false ;
		}

		// LOAD ITEM
		//
		//-------------------------------------------------		
		this.LoadItem = function( id )
		{
			that.actualItem = id ;
			
			// CLEAR ACTUAL VIDEO
			that.Content.innerHTML = "" ;
			var vid = "" ;
			
			switch( that.vVideos[id].type )
			{
				case "youtube":
				case "YouTube":
					vid += "<object width='100%' height='100%' data='http://www.youtube.com/v/" + that.vVideos[id].id + "'>" ;
					vid += "<param name='movie' value='" + that.vVideos[id].id + "' />" ;
					vid += "<param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always' />" ;
					vid += "<embed src='http://www.youtube.com/v/" + that.vVideos[id].id + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='100%' height='100%' />" ;
					vid += "</object>" ;
					
					break ;

				case "vimeo":
				case "Vimeo":
					vid += "<iframe src='http://player.vimeo.com/video/" + that.vVideos[id].id + "?color=ffffff' width='100%' height='100%' frameborder='0'></iframe>" ;
					break ;
			}
			
			// LOAD VIDEO
			that.Content.innerHTML = vid ;	

			// INFO
			var info = "" ;
			info += ( id + 1 ) + "/" + ( that.vVideos.length + 1 ) ;
			info += " - " + that.vVideos[id].title + "<br/>" ;
			info += that.vVideos[id].text  ;
			
			that.Info.innerHTML = info ;
		}
		
		this.Create() ;
	}