//ItemPeque
// This JavaScript file defines the object "ItemPeque"
ItemPeque = function(ID, IDnum, Parent, XLocation, YLocation, Titulo, Scale, imagen, Texto, sVideo)
{
    this._ID = ID + "_";
    this._idnum = IDnum;
    this._parent = Parent;
    this._XLocation = XLocation;
    this._YLocation = YLocation;
    this._Titulo = Titulo;
    this._Texto = Texto;
    this._host = this._parent.getHost();
    this._Scale = Scale;
    this._Imagen = imagen;
    this._Video = sVideo;

    // The first step is to retrive the XAML content for the "box"
    this.StartXamlDownload();
}

ItemPeque.prototype =
{
    _findNameByXamlID : function(nameInXamlFile)
    {
        return this._parent.findName(this._getIdFor(nameInXamlFile));
    },
    
    _getIdFor : function(nameInXamlFile)
    {
        return this._ID + nameInXamlFile;
    },

    StartXamlDownload : function()
    {
        // A Silverlight "downloader" object is used to retrieve the "box.xaml" file that contains
        // the XAML for the "box"
        // A delegate is created that will call the "XamlDownloadCompleted" method when the
        // download is completed
        var xamlDownloader = this._host.createObject("downloader");
        xamlDownloader.open("GET", "ItemPeque.xaml");
        xamlDownloader.addEventListener("completed", Silverlight.createDelegate(this, this.XamlDownloadCompleted));
        xamlDownloader.send();
    },

    XamlDownloadCompleted : function(sender, eventArgs)
    {
        // The download of "box.xaml" has been completed
        // "sender.ResponseText" contains the contents of the xaml control
        var originalXaml = sender.ResponseText;

        // In order to avoid name collisions, the name of each "box" object will be replaced
        // with a name that begins with the ID that was passed in the object constructor
        originalXaml = originalXaml.replace(/Name="/g, "Name=\"" + this._ID);

        // The "box" will now be added to the main Canvas
        // "plugin" is a reference to the Silverlight control on the html page
        var plugin = sender.getHost();
        var newElement = plugin.content.createFromXaml(originalXaml);
        var nommm = newElement.Name;
        
        // The altered "box.xaml" is used to create a XAML object
        //var otroxaml = "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'	x:Name='cuadradito'	Width='52' Height='47' Background='#FFEA8080'></Canvas>";
        //var newElement = plugin.content.createFromXaml(otroxaml)
         
        // "rootCanvas" is a reference to the main Silverlight Canvas
        
        var rootCanvas = plugin.content.findName("mainCanvas");
        
        // The XML object is added to the root Canvas
        //rootCanvas.children.add(newElement);
        main.children.add(newElement);

        // Now that the "box" has been added to the main Canvas
        // the "BoxTitle" will be altered and the "box" position will be set
        this._setControlReferences();
    },

    _setControlReferences : function()
    {
        // This method sets the "Title" and the "ItemPeque" position
        this._BoxTitle = this._findNameByXamlID("Titulo");
        //Asignamos la fuente!
        this._BoxTitle.setFontSource(downloader);
        this._BoxTitle.fontFamily = sFontName; //"Segoe UI";  
        
        this._BoxTitle.text = this._Titulo; //this._XLocation.toString();
        
        // Now we adjust the scale
        this._BaseScale = this._findNameByXamlID("BaseScale");
        this._BaseScale.ScaleX = this._Scale; //this._XLocation.toString();
        this._BaseScale.ScaleY = this._Scale; //this._XLocation.toString();

        //Add the image        
        this._CtlImagen = this._findNameByXamlID("Thumb");
        this._CtlImagen.Source = this._Imagen; //this._XLocation.toString();
        
        //Add the image from the downloader object
        //this._CtlImagen.setSource(downloader, Elem_Thumbs_Download[this._idnum]);  
        
            
        //Add the image Reflection       
        this._CtlImagen = this._findNameByXamlID("ThumbR");
        this._CtlImagen.Source = this._Imagen; //this._XLocation.toString();

        this._box = this._findNameByXamlID("ItemPeque");
        this._box["Canvas.Left"] = this._XLocation;
        this._box["Canvas.Top"] = this._YLocation;
        
        //Añadimos los manejadores de eventos
        //this._box.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        //xamlDownloader.addEventListener("completed", Silverlight.createDelegate(this, this.XamlDownloadCompleted));
        //MouseEnter="ItemMouseEnter" MouseLeave="ItemMouseLeave"
        this._box.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.ItemMouseEnter));
        this._box.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.ItemMouseLeave));
        this._box.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.itemRelease));

        //Y lanzamos la animación para que aparezca el elemento
        var AnimItemPeque_Appear = this._findNameByXamlID( "ItemPeque_Appear" );
        AnimItemPeque_Appear.Begin();

       //Si es el último elemento, iniciamos el carrusel... 
       if (this._ID == "07_"){
           AfterItemsBuilt();
       }
    },
       

////		Mouse Enter & Leave de los items
//function ItemMouseEnter(s,e) {
//	RollOverItem=true;	
//}
//function ItemMouseLeave(s,e) {
//	RollOverItem=false;
//}       
   ItemMouseEnter : function(sender, eventArgs){ 
        RollOverItem=true;
        //var anim = plugin.content.findName("ItemPeque_Glow_In"); // ItemPeque_Glow_Out Popup_Resize_In Popup_Resize_Out
        this._findNameByXamlID("Popup_Resize_In").Begin();
        this._findNameByXamlID("ItemPeque_Glow_Out").Begin();
   },

    ItemMouseLeave : function(sender, eventArgs){ 
        RollOverItem=false;
        //var anim = plugin.content.findName("ItemPeque_Glow_In"); // ItemPeque_Glow_Out Popup_Resize_In Popup_Resize_Out
        this._findNameByXamlID("Popup_Resize_Out").Begin();
        this._findNameByXamlID("ItemPeque_Glow_Out").Begin();
   },

       
   itemRelease : function(sender, eventArgs){ 
        var ItemPopUp = plugin.content.findName("Item_design");
        var ItemPopUpTrans = plugin.content.findName("STItem");
    
//        if (PopUpShown == true) {
//            var AnimSlideInItem = plugin.content.findName( "Slide_In" );
//            AnimSlideInItem.Begin();
//        }
//        
        //Establecemos la escala inicial
        var InitialScale = 1;
        ItemPopUpTrans.ScaleX = InitialScale;
        ItemPopUpTrans.ScaleY = InitialScale;
        
        // Y la ubicación inicial
        var xLoc = this._XLocation;
        
        var CLeft = this._box["Canvas.Left"];
        var CTop = this._box["Canvas.Top"];      
//        var CarruselHolder = plugin.content.findName("CarruselHolder");
//        CarruselHolder["Canvas.Left"];  CarruselHolder["Canvas.Left"]CarruselHolder["Canvas.Top"]
        var Left = CLeft; //- (ItemPopUp.Width/2);
        var Top  = CTop;
        ItemPopUp["Canvas.Left"] = CLeft - 100; //sender["Canvas.Left"];
        ItemPopUp["Canvas.Top"] = CTop -170;  //sender["Canvas.Top"];
        
        //Oculto el Slider y el Boto_Tancar (la animacion no los oculta de per se...)
//        plugin.content.findName("Slider").Visibility="Collapsed";
//        plugin.content.findName("Boto_Tancar").Visibility="Collapsed";

        ItemPopUp.Visibility = "Visible";
        //Visibility="Collapsed"    
        
        
        
        ////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////////////////////////////////////////////////
        /// OJO - ¡¡¡ Ajustar con sistema multi idioma !!!
        ////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////////////////////////////////////////////////
        iItemClicked = this._idnum;

        // ponemos el titulo
        var oTitulo = plugin.content.findName ('ItemTitulo');
        oTitulo.text = Elem_Titulos[iItemClicked]; //this._Titulo;
        
        //Ponemos el texto
        var oTexto = plugin.content.findName ('Texte');
        oTexto.text = Elem_Textos[iItemClicked]; //this._Texto;
        
        //La imagen
        //var imgObj = plugin.content.findName ('imagen');
        //imgObj.Source = this._Imagen;

        //Y lanzamos la animación
        //Oculto el Slider y el Boto_Tancar (la animacion no los oculta de per se...)
//        plugin.content.findName("Slider").Visibility="Visible";
//        plugin.content.findName("Boto_Tancar").Visibility="Visible";
        var AnimOpenItem = plugin.content.findName( "ItemPopUp_Open" );
        AnimOpenItem.Begin();
        
        //Y lanzamos el video...
        var Video = plugin.content.findName("ItemVideo");
        Video.Source = this._Video; //"Videos/Sample Video WC 1.wmv"
      
        //Indicamos que el popup esta visible
        PopUpShown = true
   }
}