//Calesita v0.6 navigator, ctrlButton enabled/disabled, 960/520px items, tooltips, urls	
		function scrollWindow(params)
			//Propiedades default del carousel
			{	this.props = {
							 target : $('body'),
						   autoPlay : false,
						      index : 0,
							   mode : 'bounce',
							  timer : null,
						  itemsFile : '',
						  direction : 'right',
						itemsNumber : 0,
							  speed : 500,
						   interval : 3000,
							   size : 960,
					   narrowOffset : '220px',
						previewSize : 75,
					   previewSpeed : 80,
						   tooltips : true
						  		}
			//extiende con las propiedades de la instancia
			$.extend(this.props, params);
			
			var obj=this;
			this.api = null;
			this.getProps = function(){return this.props;}
			this.getApi = function(){return this.api;}
			
			this.init = function(){ this.loadItems();//carga los items
									this.getProps().target = $(".viewPort").scrollable({circular: false}).autoscroll({ autoplay: this.getProps().autoPlay, autopause:false }).navigator();//carga carousel y navigator jQuery Tools
									//agrega la tapa del navegador y de los botones de control (para los momentos en los que se desactivan los controles)
									$('.botonera').append($('<div id"tapanavegador"></div>').addClass('navTop'));
									$('.navTop').css({'width':$('.navi').css('width')});
									$('.scrWindow').append($('<div id="topPrev"></div>').addClass('ctrlButtonTop'));
									$('.scrWindow').append($('<div id="topNext"></div>').addClass('ctrlButtonTop'));
									
									//formatea los items según tamaño especificado
									switch (this.getProps().size)
											{
												case 'wide':
															$('.scrWindow').css({'width':'960px'});
															this.getProps().size=960;
															break;

												case 'narrow':
															$('.carouselItem').addClass('carouselItem narrow');
															$('.wrapItem').addClass('wrapItem narrow');
															this.getProps().size=520;
															break;
											}

									//almacena el api en una variable para acceso más fácil
									this.api=this.getProps().target.data('scrollable');
									this.api.stop();
									
									$('.viewPort').bind('onSeek',{obj:this},
										function(e){//cuando el carousel termina de moverse
														e.data.obj.ready=false//desactiva carousel
														
														if (e.data.obj.lastItem())//si es el último ítem desactiva el botón next
															{$('#ctrlNext').hide();
															}
															else {$('#ctrlNext').show()}

														if (e.data.obj.firstItem())//si es el primer ítem desactiva el botón prev
															{$('#ctrlPrev').hide();
															}
															else {$('#ctrlPrev').show()}
														e.data.obj.enaNav();//activa navegador
														e.data.obj.enaCtrlBtn();//activa controles
														//fadeIn al item actual para que se vea en primer plano
														
														
														if ($.browser.msie)
														{	e.ready=true//activa el carousel y los controles al finalizar la animación
															$('#topNext').hide();
															$('#topRight').hide();
														}
														else {
															$('#carouselItem' + e.data.obj.getApi().getIndex()).fadeTo(100, 1.0), 
																					function()
																							{	e.ready=true//activa el carousel y los controles al finalizar la animación
																								$('#topNext').hide();
																								$('#topRight').hide();
																							};
															}
														
														
														
														previewedNext:false;
														previewedPrev:false;
														//los botones ya fueron presionados
														$('#wrapRightBtn').removeClass('clicked');
														$('#wrapLeftBtn').removeClass('clicked');
													});

									$('.viewPort').bind('onBeforeSeek',{obj:this},
										function(e){//cuando el carousel va a moverse
														e.data.obj.ready=false//desactiva el carousel y los controles
														e.data.obj.disNav();
														e.data.obj.disCtrlBtn();
														
														if ($.browser.msie)
														{e.ready=true
														}
														else {
															$('.wrapItem').fadeTo(100, 0.5, function(){e.ready=true});//atenúa los items del stripe antes del movimiento
															}
														//e.ready=true
													});
																		
									if (this.getProps().tooltips)
									{	this.tooltips();
									}
									
									//define links url sobre imagen, 
									//deben definirse la imagen a la que se asigna, las dimensiones del rectángulo, la posición y el destino. *** no olvidar comenzar con "http://" ***
									// los links que abrirán ventanas modales deben tener el path definido como #. Si el link está dendtro del flash, obviar el parámetro path o dejarlo vacio ''
									//ejemplos:
									linkSlide1 = new linkArea({target:'carouselItem1', modal: '#lightbox_familia', width:'430px', height:'300px', left:'520px', top:'0px', path:'#', id: 'link1', rel: '#lightbox_familia'});
									//linkSlide2 = new linkArea({target:'carouselItem1', modal: '#lightbox_div_nestea', size:'full', path:'#', id: 'link2', rel: '#lightbox_div_nestea'});
									//linkSlide2 = new linkArea({target:'carouselItem2', modal: '#lightbox_div_nestea', width:'130px', height:'50px', left:'520px', top:'0px', path:'#', id: 'link3', rel: '#lightbox_div_nestea'});
									//
									//comienza carousel
									this.Start();
									}
			
			//dibuja carousel
			this.getProps().target.append($('<div></div>').addClass('scrWindow'));
			$('.scrWindow').append($('<div></div>').addClass('WrapviewPort'));
			$('.WrapviewPort').append($('<div></div>').addClass('viewPort'));
			
			//si es narrow offset al viewport para que la imagen quede centrada
			
			if (this.getProps().size=='narrow')
			{	$('.viewPort').css({'left':this.getProps().narrowOffset});
			}
									
			$('.viewPort').append($('<div></div>').addClass('stripe'));	//la "tira" donde van las imágenes

			this.loadItems = function(){
				//array con las imágenes. "interval" especifica la cantidad de segundos para cada imagen en caso de modo "bounce"
				 this.contenido = {"lista":[	
					                {"item" : {"path" : "/content-store/es_VE/Red/01superheroes.swf", "interval" : 20} },
									{"item" : {"path" : "/content-store/es_VE/Red/FamiliasRicas_banner.swf", "interval" : 20} },
									/*{"item" : {"path" : "/content-store/es_VE/Red/125_banner.swf", "interval" : 20} }*/
								    {"item" : {"path" : "/content-store/es_VE/Red/03assetSecretosCasa.swf", "interval" : 20} }
								]}

				$.extend(this.props, this.contenido);
				
				//Agranda el stripe según la cantidad de imágenes
				$('.stripe').css({"width": (this.getProps().lista.length+2)*900 + "px"});
				//Carga el contenido recorriendo el array			
				
				for (var i = 0; i < this.getProps().lista.length; i++)
						{
							//Agrega un div envuelto en otro y le carga la imagen como background-image
							$(".stripe").append($($('<div id="carouselItem' + i + '"></div>')).addClass('wrapItem').append($('<div></div>').addClass('carouselItem').css('background-image','url(' + this.getProps().lista[i].item.path + ')')));
							//Alerta si alguna imagen tiene incorrectamente especificado el intervalo de segundos.
							if (this.getProps().lista[i].item.interval < 1)
							{alert('El intervalo del item ' + i + 'debe ser mayor o igual a 1.');
							}
							//multiplica el intervalo por 1000 para pasar de msec a sec.
							this.getProps().lista[i].item.interval = this.getProps().lista[i].item.interval*1000;
							//Si el ítem es un swf lo carga como tal
							var params = {   wmode: "transparent" }; 
							if (this.getProps().lista[i].item.path.search(/swf/i) != -1)
								{
									flashembed('#carouselItem'+i, {src: this.getProps().lista[i].item.path, wmode: 'transparent', quality: 'high', w3c: true});
									//swfobject.embedSWF(this.getProps().lista[i].item.path, 'carouselItem'+i, "958", "298", "9.0.0", params);
									var vid = i
								}
							//agrega ítem al navigator
							$('.navi').append($('<a href="#' + i + '" class=""></a>'));
							//actualiza la cantida de items
							this.getProps().itemsNumber = i;
						}
				//Agranda el navigator según la cantidad de items 
				$('.navi').css({'width':this.getProps().lista.length * 17 + 'px'});
				
			}

			//Controles, agrega el contenedor del navigator
			$('.scrWindow').append($('<div id="botonera"></div>').addClass('botonera'));
			$('.botonera').append($('<div></div>').addClass('navi'));

			//Areas del carousel, agrega las áreas que dispararán los previews de los items anterior y posterior
			$('.scrWindow').append($('<div id="ctrlPrev"></div>').addClass('cortina'));
			$('.scrWindow').append($('<div id="ctrlNext"></div>').addClass('cortina'));
			//El área de preview en modo carousel ancho es de otro tamaño (más chico)
			if (this.getProps().size=='wide')
					{
						$('.cortina').addClass('cortina wide');
					}
			//ubica a la derecha el área de preview del próximo elemento
			toRight($('#ctrlNext'));
			//Agrega los botones Prev y Next envueltos y los ubica
			$('#ctrlPrev').append($('<div id="wrapLeftBtn"></div>').addClass('wrapArrow'));
			$('#ctrlNext').append($('<div id="wrapRightBtn"></div>').addClass('wrapArrow'));
			$('#wrapLeftBtn').addClass('arrow Left');
			$('#wrapRightBtn').addClass('arrow Right');

			//Bindea los eventos "click" a los botones
			$('#wrapRightBtn').bind('click',{obj:this},function(e)
							{
								if (ready)
								{
									$(this).addClass('arrow Right clicked');
									obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
									e.data.obj.moveNext();
								}
							});

			$('#wrapLeftBtn').bind('click',{obj:this},function(e)
							{
								if (ready)
								{
									$(this).addClass('arrow Left clicked');
									obj.restartBounce(e.data.obj.getProps().lista[e.data.obj.getApi().getIndex()].item.interval);
									e.data.obj.movePrev();
								}
							});
			//variables de control
			var pos = 0;
			var ready=true;
			var previewedNext=false;
			var previewedPrev=false;
			var btnReady=true;
			var prePreviewPos;
			
			if (this.getProps().size == 'narrow')
			{var offsetViewport=220;
			}
			else {var offsetViewport=0;}
			
			this.disNav=function(){$('.navTop').show();}
			this.enaNav=function(){$('.navTop').hide();}
			this.disCtrlBtn=function(){$('.ctrlButtonTop').show();}
			this.enaCtrlBtn=function(){$('.ctrlButtonTop').hide();}
			this.disLeftCtrlBtn=function(){$('#topPrev').show();}
			this.enaLeftCtrlBtn=function(){$('#topPrev').hide();}
			this.disRightCtrlBtn=function(){$('#topNext').show();}
			this.enaRightCtrlBtn=function(){$('#topNext').hide();}
			
			//Preview de los items cuando mouseover a la izquierda y a la derecha
			//ready es true cuando el carousel está listo para operar, y false cuando está realizando una acción
			//ena y dis activan y desactivan los controles del carousel
			
			//activa preview del próximo item
			this.previewNextOn =  function(){
							if (ready && !previewedNext && !previewedPrev) //si está listo, y no hay preview activado
									{	this.disLeftCtrlBtn();//desactiva controles
										ready=false;//desactiva carousel
										//prePreviewPos = parseInt($('.stripe').css('left'));
										prePreviewPos=this.getProps().size * this.getApi().getIndex() * -1;
										$('.stripe').stop().animate({'left':prePreviewPos - this.getProps().previewSize - offsetViewport},this.getProps().previewSpeed, 
														function(){  //callback, marca como preview activado y prepara el carousel
																	$('.stripe').trigger('prevNextOn');
																	$('.stripe').trigger('prevOn');
																});
									}
							}
			//desactiva el preview del próximo item
			this.previewNextOff =  function(){
								if (ready && previewedNext && !previewedPrev) //si está listo, y el previewNext es cierto y el previewPrev es falso
									{	this.disLeftCtrlBtn();
										ready=false;
										prePreviewPos=this.getProps().size * this.getApi().getIndex() * -1;//calcula el reposicionamiento
										//anima el stripe a la posición original
										$('.stripe').stop().animate({'left':prePreviewPos},this.getProps().previewSpeed, 
														function(){  //callback
																	$('.stripe').trigger('prevOff');
																	$('.stripe').trigger('prevNextOff');
																});
									}	
							}	
								
			this.previewPrevOn =  function(){
								if (ready && !previewedPrev && !previewedNext)
									{	this.disRightCtrlBtn();
										ready=false;
										//prePreviewPos = parseInt($('.stripe').css('left'));
										prePreviewPos=this.getProps().size * this.getApi().getIndex() * -1;
										$('.stripe').stop().animate({'left':prePreviewPos - offsetViewport + this.getProps().previewSize},this.getProps().previewSpeed, 
														function(){	 //callback
																	$('.stripe').trigger('prevPrevOn');
																	$('.stripe').trigger('prevOn');
																});
									}
							}
			this.previewPrevOff =  function(){
								if (ready && previewedPrev && !previewedNext)
									{	this.disRightCtrlBtn();
										ready=false;
										prePreviewPos=this.getProps().size * this.getApi().getIndex() * -1;
										$('.stripe').stop().animate({'left':prePreviewPos},this.getProps().previewSpeed, 
														function(){	 //callback
																	$('.stripe').trigger('prevOff');
																	$('.stripe').trigger('prevPrevOff');
																});
									}
							}	
			
			$('.stripe').bind('prevOn', 
					function(){
								ready=true;
								//alert('prePreviewPos: ' + prePreviewPos + ' Left actual: ' + $('.stripe').css('left'));
							});

			$('.stripe').bind('prevOff', 
					function(){
								ready=true;
								//alert('prePreviewPos: ' + prePreviewPos + ' Left actual: ' + $('.stripe').css('left'));
							});
			
			$('.stripe').bind('prevNextOn', 
									function(){
										previewedNext=true;
										$('#topPrev').hide();
									});
			$('.stripe').bind('prevPrevOn', 
									function(){
										previewedPrev=true;
										$('#topNext').hide();
									});

			$('.stripe').bind('prevNextOff', 
									function(){
										previewedNext=false;
										$('#topPrev').hide();
										
									});

			$('.stripe').bind('prevPrevOff', 
									function(){
										previewedPrev=false;
										$('#topNext').hide();
										
									});

			//al usar el navegador se reinicia el timer de control del carousel por cada click					
			$('.navi').bind('click',{obj:this},function(e)
									{	ready=false;
										obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
										previewedNext=false;
										previewedPrev=false;
									});
			

			//activa el carousel
			this.aclara = function() {	
										ready=true;
										previewedNext=false;
										previewedPrev=false;
									}
			//mueve al siguiente item
			this.moveNext = function(){ if (!(this.lastItem())&&ready)
											{	ready=false;//desactiva el carousel
												this.getApi().seekTo(this.api.getIndex() + 1, this.getProps().speed);//mueve el carousel usando el api del carousel jQuery tools
												this.aclara();//activa el carousel
											}
									}
			//mueve al anterior item
			this.movePrev = function(){	if (!(this.firstItem())&&ready)
											{	ready=false;
												this.getApi().seekTo(this.api.getIndex() - 1, this.getProps().speed);
												this.aclara();
											}
									}
			//pregunta si el ítem actual es el último
			this.lastItem = function(){ if (this.getApi().getIndex() >= this.getApi().getSize() - 1){return true;}}
			//pregunta si el ítem actual es el primero
			this.firstItem = function(){ if (this.getApi().getIndex() == 0){return true;}}
			//inicia-reinicia el timer de control del carousel, el parámetro interval es la cantidad de milisegundos
			this.restartBounce = function (interval) {
									if (this.getProps().mode != "manual")
										{
											ready=false;
											clearInterval(this.getProps().timer);
											this.getProps().timer = setInterval(function ()	{obj.move()},interval);
										}
										ready=true;
									}
			//modo rebote del carousel
			this.bounce = function(){
									if (this.lastItem())//si es el último ítem la dirección es hacia la izquierda
										{this.getProps().direction='left';
										}
									this.move = function()
										{
											switch (this.getProps().direction)
												{
													case 'left':
																this.movePrev();
																if (this.firstItem())
																	{this.getProps().direction='right';
																	}
																break;

													case 'right':
																this.moveNext();
																if (this.lastItem())
																	{this.getProps().direction='left';
																	}
																break;
												}
											//reinicia el timer independiente para cada item
											this.restartBounce(this.getProps().lista[this.getApi().getIndex()].item.interval+500+this.getProps().speed);
											//
										}
									//inicia el modo bounce
									this.restartBounce(this.getProps().lista[this.getProps().index].item.interval);
							}
						
			
			// Eventos mousemove para los previews
			this.cortinas=function()
				{
					$('#ctrlNext').bind('mouseenter',{obj:this},
											function(e){
												obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
												obj.previewNextOn();
											});

					$('#ctrlNext').bind('mouseleave',{obj:this},
											function(e){
												obj.previewNextOff();
												obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
											});

					$('#ctrlPrev').bind('mouseenter',{obj:this},
											function(e){
												obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
												obj.previewPrevOn();
											});
					
					$('#ctrlPrev').bind('mouseleave',{obj:this},
											function(e){
												obj.previewPrevOff();
												obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
											});

					$('.scrWindow').bind('mouseleave',{obj:this},function(e)
												{	
													if (btnReady)
													{	btnReady=false;
														$('.wrapArrow').css({'display':'none'});
														btnReady=true;
													}
												});
					//si se pasa el mouse sobre el navegador se reinicia el timer
					$('.navi').bind('mouseover',{obj:this},
											function(e){
												obj.restartBounce(obj.getProps().lista[obj.getApi().getIndex()].item.interval);
											});
					//muestra las flechas de control al entrar el mouse en el carousel
					$('.scrWindow').bind('mouseenter', function()
														{	if (btnReady)
																{	
																	btnReady=false;
																	$('.wrapArrow').css({'display':'block'});
																	btnReady=true;
																}
															
														});
				}
			//Tooltips de los items del navegador
			this.tooltips = function() 
						{
							for (var i=0;i<this.getApi().getSize() ; i++)
							{//carga imagenes y swf a los tooltips correspondientes
								$('body').append($('<div id="tooltip'+i+'"></div>').addClass('tooltip'));
								if (this.getProps().lista[i].item.path.search(/swf/i) != -1)
									{	$('#tooltip'+i).append($('<div id="tooltipVid'+i+'"></div>').addClass('ttimg'));
										flashembed('#tooltipVid'+i, {src: this.getProps().lista[i].item.path, wmode: 'transparent', quality: 'high'});
									}
									else {$('#tooltip'+i).append($('<img src="' + this.getProps().lista[i].item.path + '" alt="" />').addClass('ttimg'));}
								$($('.navi a').get(i)).tooltip({tip: '#tooltip'+i});//asigna tooltip al item correspondiente
							}
							//si el carousel es agosto las imagenes de los tooltips también
							if (this.getProps().size==520)
											{	$('.ttimg').addClass('ttimg narrow');
												$('.tooltip').addClass('tooltip narrow');
											}
						}
			
			this.Start = function() {	//this.api.seekTo(this.getProps().index);//dirige el carousel al item que se especificó como inicial
										//si el modo se especificó "bounce" se inicia.
										$('.viewPort').trigger('onSeek');
										
										switch (this.getProps().mode)
										{	case 'bounce':
															this.bounce();
															break;
										}
										
									}
			
			this.cortinas();//se cargan las areas de preview
			this.init();//se inicia el carousel
					
			}
//funciones de posicionamiento de objetos dentro de su padre
function center_x(obj)
	{
		obj.css({'left':(obj.parent().width()/2)-obj.width()/2});
	}

function center_y(obj)
	{
		obj.css({'top':(obj.parent().height()/2)-obj.height()/2});
	}

function toRight(obj)
	{
		obj.css({'right':'0px'});
	}

function toBottom(obj)
	{
		obj.css({'top':obj.parent().height()-obj.height()});
	}

//Clase linkArea para definir links en los ítems del carousel
//Un link puede ser un rectángulo del ítem o todo el mismo.
function linkArea(params)
	{
		

		if (params.size=='full') //toda la imagen como link
					{	$('#'+params.target).append($('<div id="linkFull'+params.id+'" rel="'+params.rel+'"></div>').addClass('link'));
						//agrega un rectángulo que será el link, según los parámetros pasados al momento de instanciar
						
						$('#linkFull'+params.id).css(
											{
												'width':$('#linkFull'+params.id).parent().width(),
												'height':300,
												 'top':'-300px',
												'z-index':30
											});

						 if(params.path=='#')
			{$('#linkFull'+params.id).addClass('modal');
						
			}
			else
				{$('#linkFull'+params.id).click(function(){window.open(params.path)})}
			     
						//Asigna la url especificada el rectángulo
						
						
						/*$('#linkFull'+params.id).bind('click', {p:params},function(e){
                            
							if(e.data.p.path == '#'){
								//alert('click!' + e.data.p.modal);
							  //$(e.data.p.modal).overlay( {load: true} );
							  
					        }
							else {
					          window.open(e.data.p.path);
					         }
					        
                       });*/
					}
		

		//si es sólo una sección de la imagen
		else { $('#'+params.target).append($('<div id="link'+params.id+'" rel="'+params.rel+'"></div>').addClass('link'));
	
				 if(params.path=='#')
			{$('#linkFull'+params.id).addClass('modal');
			 
			}
			else
				{$('#linkFull'+params.id).click(function(){window.open(params.path)})}
			  
				$('#link'+params.id).css(
											{
												'width':params.width,
												'height':params.height,
												'top':parseInt(params.top)-300+'px',
												'left':params.left,
												'border':params.border
											});
//				$('#link'+params.id).bind('click', function(){
//					if(params.path == '#'){
//						//alert('click!' + e.data.p.modal);
//					  //$(e.data.p.modal).overlay( {load: true} );
//					}
//					else {
//					  window.open(e.data.p.path);
//					}
//					});
			}
		
	}

	//función para asignar clase al link de la ventana modal