/*
-----------------------------------------------------------------------------------------------------------------------
Carrusel
Libreria que gestiona el comportamiento del carrusel y su construccion.
-----------------------------------------------------------------------------------------------------------------------
*/


//Variables globales respectivas del carrusel
//Datos de los items
var img_width=130;
var img_height=130;
var item_Scale_Base = 0.8;
var anchoDelItem = img_width/2; //50;

var VelocidadBase = 0.0555; //0.0755;
var FactorReductorVelocidad = 0.0010;
var FactorReductorVelocidadRollOverItem = 0.0015; //0.0035;
var RollOverItem = false;
var RollOverCarrusel = false;
var iItemClicked = 0;
var PopUpShown = false; //Indica si el popup esta visible o no.


//new ItemPeque("01", rootElement, 10, 10, "¡¡Holas David!!", 0.9, "item.png");
function BuildItems() {
	    left_pos=0
	
	for(i=0;i<num_imgs;i++) {
		//Obtenemos los datos para montar el 
		var sNum = "0" + i.toString();
		var sTitulo = Elem_Titulos_es[i];
		var sImagen = Elem_Thumbs[i];
        var sVideo = Elem_Videos[i];
        
        //Creamos el elemento Ojo RootElement <== main.
        // ahora, plugin...
        var RootElement = plugin.content.findName("mainCanvas");
        var sTexto = Elem_Textos_es[i];
		new ItemPeque(sNum ,i, RootElement, (i* 10), (i*10), sTitulo, item_Scale_Base, sImagen, sTexto, sVideo);

//		xamlTags=plugin.content.createFromXaml(xaml_str)
//		main.children.add(xamlTags)
//		
		//se crea un objeto para controlar la posicion del item generado y se asigna a un array de objetos...
		objsArr["image_"+i]=new Object()
		objsArr["image_"+i].angle=i*((Math.PI*2)/num_imgs) //El angulo viene de distribuir la circunferencia entre el total de objetos... esto esta muy bien
	}
	
	//Y los posicionamos 
    //	CarruselItems_AjustarVelocidad()
    //	CarruselItems_PositionRelative()
    //	
	    //Llamamos a una funcion javascript cada 25 milisegundos.. mmm... no esta muy bien esto.. quizas llamar position items despues de mover algun objeto si ha
	    //habido cambio alguno?
    //	moveItemsInt=setInterval("moveItems()",25)
}

//A llamar cuando todos los items del carrusel se hayan creado (sino daba problemas ya que aun no se habían descargado los items..)
function AfterItemsBuilt(){
    ResizeToContainer();
    
	//Y los posicionamos 
	CarruselItems_AjustarVelocidad()
	CarruselItems_PositionRelative()
	
	//Llamamos a una funcion javascript cada 25 milisegundos.. mmm... no esta muy bien esto.. quizas llamar position items despues de mover algun objeto si ha
	//habido cambio alguno?
	moveItemsInt=setInterval("moveItems()",30)
	
    //Cargo el idioma por defecto
    ChangeLanguage("es");
}


/// MoveItems - Basicamente los resposiciona en la pantalla ///
function moveItems() {
	//if(main_down) {
	    CarruselItems_AjustarVelocidad()
	    CarruselItems_PositionRelative()
		//positionItems()
	//}
}


function CarruselItems_PositionRelative() {
    //Variables del carrusel
	var CarRadiusX = (CarruselHolder.Width / 3); //320 //480
    var CarRadiusY = CarruselHolder.Height / 7; //110 //110

    //var CarCenterX = ((CarruselHolder.Width - anchoDelItem)/ 2) ; //450
    var CarCenterX = ((CarruselHolder.Width - anchoDelItem)/ 2) ; //450
    var CarCenterY = CarruselHolder.Height / 2; //260

    //    var indicador = main.findName("indicador");
    //    indicador.width = CarruselHolder.Width / 2;
    //    indicador["Canvas.Left"]=0
    //    indicador["Canvas.Top"]=CarCenterY

	for(i=0;i<num_imgs;i++) {
		//Busca la posicion relativa de los objetos respecto al centro X,Y del Carrusel
		var my_x = Math.cos(objsArr["image_"+i].angle) * CarRadiusX + CarCenterX
		var my_y = Math.sin(objsArr["image_"+i].angle) * CarRadiusY + CarCenterY
		
		//Busca el objeto en el control silverlight y le asigna la posicion determinada
		var test = CarruselHolder["Canvas.Left"];
		
		var sNum = "0" + i.toString();
		main.findName(sNum + "_ItemPeque")["Canvas.Left"] = my_x + CarruselHolder["Canvas.Left"];
		main.findName(sNum + "_ItemPeque")["Canvas.Top"] = my_y + CarruselHolder["Canvas.Top"];
//		main.findName("ItemPeque"+i)["Canvas.Left"] = my_x + CarruselHolder["Canvas.Left"];
//		main.findName("imageHolder_"+i)["Canvas.Top"] = my_y + CarruselHolder["Canvas.Top"];

		//Buscamos el transformador de tamaño para asignarle un nuevo tamaño respecto a la nueva posicin
        var stRef = main.findName(sNum + "_BaseScale");		
        
		//Solo escalamos en base a la distancia (Y)
		var sc = (my_y - stRef.scaleY) / (CarCenterY + CarRadiusY - stRef.scaleY);
		sc = sc * item_Scale_Base; //1.5
		
		stRef.scaleX = sc;
		stRef.scaleY = sc;
		
		//Ajustamos la opacidad (transparencia) en base se va alejando del centro...
		var RectOpacitySup = main.findName(sNum + "_RectOpacitySup");
		var opacity = 0.7 - sc;
        RectOpacitySup.Opacity = opacity; //"0.86";
        
        //Y la transparencia?
		var item = main.findName(sNum + "_ItemPeque");
        item.Opacity=sc + 0.3; //"0.86";
      
        
		objsArr["image_"+i].angle += speed;
		
		//Ajustamos la "profundidad", es decir, el ZIndex..
		main.findName(sNum + "_ItemPeque")["Canvas.ZIndex"]=parseInt(my_y)
	}
}

function CarruselItems_AjustarVelocidad() {
    ////////////////////////////////////////////////////////////////////////////////////////    
    //Si salimos de la zona ira reduciendo la velocidad en el sentido contrario al que lleve...
    //Ver que no supere a cero
    ////////////////////////////////////////////////////////////////////////////////////////    
    //Poner si "Salimos de la zona" o estamos sobre un elemento item de interfaz...
    
    if (( (RollOverCarrusel==false) || 
          (RollOverItem==true) ) &&
          (speed != 0) ) {
        var oldspeed = speed  
        var FactReductVelocidad = 0;
        
        if (RollOverItem == true){
            FactReductVelocidad = FactorReductorVelocidadRollOverItem; 
            }
        else{
            FactReductVelocidad = FactorReductorVelocidad; 
            }
            
        if (speed > 0) {
            speed= speed - FactReductVelocidad;
            }
        else{
            speed= speed + FactReductVelocidad;
            }
            
        if (((oldspeed > 0) && (speed <= 0)) ||
           ((oldspeed < 0) && (speed >= 0))){
           speed = 0;
           }
    }
}


//////////////////////////////////////////////////////////
// Eventos del Carrusel
// Handlers de eventos del canvas Carrusel
//////////////////////////////////////////////////////////

//		Mouse Enter & Leave del Carrusel
function CarruselMouseEnter(s,e) {
	RollOverCarrusel=true;	
}
function CarruselMouseLeave(s,e) {
	RollOverCarrusel=false;
}

////		Mouse Enter & Leave de los items
//function ItemMouseEnter(s,e) {
//	RollOverItem=true;	
//}
//function ItemMouseLeave(s,e) {
//	RollOverItem=false;
//}


function mainDown(s) {
	main_down=true	
}
function mainUp(s) {
	main_down=false
}

function imageOver(s) {
	//Aqui lanzaremos una animacion, por ejemplo, que crezca el item y se lance la animacion/video
	//main_down=false
	var ind=s.name.split("_")[1]
	s.findName("rec_"+ind).fill="yellow"
}
function imageOut(s) {
	//Se debera lanzar la animacion de volver al tamaño normal y se pare el video...
	var ind=s.name.split("_")[1]
	s.findName("rec_"+ind).fill="#FFF"
}

function imageDown(s) {
	//Deberemos lanzar la ampliacion del item (vista ampliada):
	//	 	1- Ocultar otros items ampliados (solo deberia haber uno) 
	//			1.1 - Lanzar su animacion de ocultacion
	//			1.2 - reducir su z-index para que aparezca atras de la nueva animacion.
	//			1.3 - ocultarel elemento de animacion, o eliminarlo.
	//		2- Lanzar la animacion del nuevo item
	//			2.1 - Mostrar el nuevo item y lanzar su animacion.
	//			2.2 - Iniciar la "interactividad con el nuevo item"
	file_source=s.source.split("/")[1]
	s.findName("mainImage").source="images/"+file_source
	s.findName("mainImageHolder")["Canvas.ZIndex"]=169
}

function CarruselMouseMoves(s, e) {	
    if ( (RollOverCarrusel==true) && 
         (RollOverItem==false) ) {

	    var pt = e.getPosition(null);
	    _root_xmouse = pt.x;
	    _root_ymouse = pt.y;
        
        //La aceleración se realiza sobre el eje horizontal (X) del carrusel.
        var AnchoCarrusel = main.findName("CarruselHolder").Width;
        var CanvasLeftCarrusel = main.findName("CarruselHolder")["Canvas.Left"];
        var PosMouseX_RelativoACarrusel = _root_xmouse - CanvasLeftCarrusel;
        
        var MitadAnchoCarrusel  = ((AnchoCarrusel)/ 2); //Formula previa: ((AnchoCarrusel - anchoDelItem)/ 2);
        
	    //speed=((_root_xmouse-500)/500) * 0.0755;
	    //speed=((_root_xmouse-MitadAnchoCarrusel)/MitadAnchoCarrusel) * 0.0755;
	    speed=((PosMouseX_RelativoACarrusel-MitadAnchoCarrusel)/MitadAnchoCarrusel) * VelocidadBase;
	}
}


function ItemPopUp_SlideOut(s, e){
//        var SlideOutYVal = plugin.content.findName("SlideOutYVal");
//        var YVal = SlideOutYVal.Value;
//        var iItmClicked = iItemClicked;
//        //Miro longitud del texto segun el idioma...
//        var txt = Elem_Textos_es[iItmClicked];
//        var lentxt = txt.length;
//        
//        SlideOutYVal.Value = 200;
        var AnimSlideOutItem = plugin.content.findName( "Slide_Out" );
        AnimSlideOutItem.Begin();
}

function ItemPopUp_SlideIn(s,e){
        var AnimSlideInItem = plugin.content.findName( "Slide_In" );
        AnimSlideInItem.Begin();

        //Y paramos el video...
//        var Video = plugin.content.findName("ItemVideo");
//        Video.Pause(); //Stop(); //.Source = "Videos/Sample Video WC 1.wmv"
//        
        
}

function CloseItemPopup(s,e){
        var AnimCloseItem = plugin.content.findName( "ItemPopUp_Close" );
        AnimCloseItem.Begin();
        
        //Y paramos el video...
        var Video = plugin.content.findName("ItemVideo");
        //Video.Source = null;
        Video.Pause(); //Stop(); //.Source = "Videos/Sample Video WC 1.wmv"
      
        //Indicamos que el popup esta cerrado/oculto
        PopUpShown = false
  
}

function ItemVideo_MediaEnded(s, e){
        var Video = plugin.content.findName("ItemVideo");
        Video.Stop();
        Video.AutoPlay = true;
        Video.Play(); 
}




//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
/// Codigo Deprecated
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
function positionItems() {
	for(i=0;i<num_imgs;i++) {
	
		//Busca la posicion relativa de los objetos respecto al centro X,Y del Carrusel
		var my_x=Math.cos(objsArr["image_"+i].angle)*radiusX + centerX
		var my_y=Math.sin(objsArr["image_"+i].angle)*radiusY + centerY
		
		//Busca el objeto en el control silverlight y le asigna la posicion determinada
		main.findName("imageHolder_"+i)["Canvas.Left"]=my_x
		main.findName("imageHolder_"+i)["Canvas.Top"]=my_y

		//ScaleY="-1" ScaleX="1"
		//Buscamos el transformador de tamaño para asignarle un nuevo tamaño respecto a la nueva posicin
		var stRef=main.findName("st_"+i)
		
		//Solo escalamos en base a la distancia (Y)
		var sc = (my_y - stRef.scaleY) / (centerY + radiusY - stRef.scaleY)
		
		sc = sc *1.5
		
		stRef.scaleX=sc
		stRef.scaleY=sc

		objsArr["image_"+i].angle+=speed
		main.findName("imageHolder_"+i)["Canvas.ZIndex"]=parseInt(my_y)
	}
}

function CreateItemsFromXaml(){
	    var downloader = plugin.createObject("downloader");
	    downloader.addEventListener("completed", Silverlight.createDelegate(this, downloadItemXamlCompleted));
	    downloader.open("GET", "Item.xaml");
	    downloader.send();
}
//Este codigo pretende añadir los elementos vía XAML
function downloadItemXamlCompleted(sender, eventArgs){
    var xamlItem = sender.getResponseText("");

	for(i=0;i<num_imgs;i++) {
		cur_img="item.jpg"
		img_url="thumbs/"+cur_img		 
        var nombre = "imageHolder_"+i;

        var vbtn = plugin.content.createFromXaml(xamlItem, true);
        
        main.children.add(vbtn);
        
        new Innova.Item(plugin, vbtn, nombre);
		
		//se crea un objeto para controlar la posicion del item generado y se asigna a un array de objetos...
		objsArr["image_"+i]=new Object()
		objsArr["image_"+i].angle=i*((Math.PI*2)/num_imgs) //El angulo viene de distribuir la circunferencia entre el total de objetos... esto esta muy bien
	}
	
	//Y los posicionamos 
	Carrusel_AjustarVelocidad()
	CarruselItems_PositionRelative()
	
	//Llamamos a una funcion javascript cada 25 milisegundos.. mmm... no esta muy bien esto.. quizas llamar position items despues de mover algun objeto si ha
	//habido cambio alguno?
	moveItemsInt=setInterval("moveItems()",25)
}

function CarruselImagenes_AjustarVelocidad() {
    ////////////////////////////////////////////////////////////////////////////////////////    
    //Si salimos de la zona ira reduciendo la velocidad en el sentido contrario al que lleve...
    //Ver que no supere a cero
    ////////////////////////////////////////////////////////////////////////////////////////    
    //Poner si "Salimos de la zona" o estamos sobre un elemento item de interfaz...
    
    if (( (RollOverCarrusel==false) || 
          (RollOverItem==true) ) &&
          (speed != 0) ) {
        var oldspeed = speed  
        var FactReductVelocidad = 0;
        
        if (RollOverItem == true){
            FactReductVelocidad = FactorReductorVelocidadRollOverItem; 
            }
        else{
            FactReductVelocidad = FactorReductorVelocidad; 
            }
            
        if (speed > 0) {
            speed= speed - FactReductVelocidad;
            }
        else{
            speed= speed + FactReductVelocidad;
            }
            
        if (((oldspeed > 0) && (speed <= 0)) ||
           ((oldspeed < 0) && (speed >= 0))){
           speed = 0;
           }
    }
}

function CarruselImagenes_PositionRelative() {
    //Variables del carrusel
	var CarRadiusX = (CarruselHolder.Width / 3); //320 //480
    var CarRadiusY = CarruselHolder.Height / 4; //110 //110

    //var CarCenterX = ((CarruselHolder.Width - anchoDelItem)/ 2) ; //450
    var CarCenterX = ((CarruselHolder.Width - anchoDelItem)/ 2) ; //450
    
    var CarCenterY = CarruselHolder.Height / 2; //260

    var indicador =main.findName("indicador");
    indicador.width = CarruselHolder.Width / 2;
    indicador["Canvas.Left"]=0
    indicador["Canvas.Top"]=CarCenterY

	for(i=0;i<num_imgs;i++) {
		//Busca la posicion relativa de los objetos respecto al centro X,Y del Carrusel
		var my_x = Math.cos(objsArr["image_"+i].angle)*CarRadiusX + CarCenterX
		var my_y = Math.sin(objsArr["image_"+i].angle)*CarRadiusY + CarCenterY
		
		//Busca el objeto en el control silverlight y le asigna la posicion determinada
		var test = CarruselHolder["Canvas.Left"];
		
		main.findName("imageHolder_"+i)["Canvas.Left"] = my_x + CarruselHolder["Canvas.Left"];
		main.findName("imageHolder_"+i)["Canvas.Top"] = my_y + CarruselHolder["Canvas.Top"];

		//ScaleY="-1" ScaleX="1"
		//Buscamos el transformador de tamaño para asignarle un nuevo tamaño respecto a la nueva posicin
		var stRef=main.findName("st_"+i)
		
		//Solo escalamos en base a la distancia (Y)
		var sc = (my_y - stRef.scaleY) / (CarCenterY + CarRadiusY - stRef.scaleY)
		
		sc = sc *1.5
		
		stRef.scaleX=sc
		stRef.scaleY=sc

		objsArr["image_"+i].angle+=speed
		main.findName("imageHolder_"+i)["Canvas.ZIndex"]=parseInt(my_y)
	}
}


function buildImages() {
	//Simplemente crea los items contenedores en una posicion X
	for(i=0;i<num_imgs;i++) {
		//Asignamos las imagenes
		//cur_img=i+".jpg"		
		//Lo ideal sera cargarlo de un array de configuracion de los diferentes elementos...

		cur_img="item.png" //"item.jpg"
		img_url="images/"+cur_img		 
		left_pos=0
		
		//Creamos el xaml que las contiene.. aqui podriamos hacer un parsing de xml para realizar el templating, mas que concatenar... (feo y complejo de modificar)
		xaml_str='<Canvas Name="imageHolder_'+i+'" Canvas.Left="'+left_pos+'" Canvas.Top="0" ' //>
		xaml_str+= 'MouseEnter="ItemMouseEnter" MouseLeave="ItemMouseLeave" Cursor="Hand"> '
			
		//reflections, kinda hard on the proc though...
		/*	 */
		xaml_str += 	'<Canvas Name="imgHolderReflection_'+i+'" Canvas.Top="' + (img_height + 50) +'" Opacity="1">'
		xaml_str += 	' <Canvas.OpacityMask>'
		xaml_str += 	'   <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">'           
		xaml_str += 	'     <GradientStop Offset="0.37" Color="#00000000"  />'      
		xaml_str += 	'     <GradientStop Offset="1" Color="#88000000"  />'
		xaml_str += 	'    </LinearGradientBrush>'          
		xaml_str += 	' </Canvas.OpacityMask>'
		xaml_str += 	' <Canvas.RenderTransform><TransformGroup><ScaleTransform Name="ReflectionScaleTransform_'+i+'" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /></TransformGroup></Canvas.RenderTransform>'		
		xaml_str +=		' <Image Name="imgReflection_'+i+'" Stretch="UniformToFill" Height="'+img_height+'" Width="'+img_width+'" Source="'+img_url+'" />'
		xaml_str +=		'</Canvas>'		
			
				
		//Y el rectangulo que contiene la imagen... junto con la asignacion de eventos...
		xaml_str+='  <Rectangle Name="rec_'+i+'" Canvas.Top="-6" Canvas.Left="-6" Fill="#FFF" Height="' + (img_height + 12) +'" Width="' + (img_width + 12) +'"></Rectangle>'
		xaml_str+='  <Image Cursor="Hand" MouseEnter="imageOver" MouseLeave="imageOut" MouseLeftButtonDown="imageDown" MouseLeftButtonUp="imageUp" Stretch="UniformToFill" Name="image_'+i+'" Height="'+img_height+'" Width="'+img_width+'" Source="'+img_url+'" Opacity="1" />'
		//Definimos un scaletransform para poder aumentar o disminuir el tamaño del elemento conforme se acerca o aleja...						
		xaml_str+='  <Canvas.RenderTransform><ScaleTransform Name="st_'+i+'" ScaleX="1" ScaleY="1" CenterX="50" CenterY="50"/></Canvas.RenderTransform>'			
		xaml_str+='</Canvas>'

		//Se crean y se ubican.
		xamlTags=plugin.content.createFromXaml(xaml_str)
		//imagesHolder.children.add(xamlTags)		
		//CarruselHolder.children.add(xamlTags)		
		main.children.add(xamlTags)
		
		//se crea un objeto para controlar la posicion del item generado y se asigna a un array de objetos...
		objsArr["image_"+i]=new Object()
		objsArr["image_"+i].angle=i*((Math.PI*2)/num_imgs) //El angulo viene de distribuir la circunferencia entre el total de objetos... esto esta muy bien
	}
	//Y los posicionamos 
	//positionItems()
	Carrusel_AjustarVelocidad()
	CarruselItems_PositionRelative()
	
	//Llamamos a una funcion javascript cada 25 milisegundos.. mmm... no esta muy bien esto.. quizas llamar position items despues de mover algun objeto si ha
	//habido cambio alguno?
	moveItemsInt=setInterval("moveItems()",25)
}