if(typeof(core) == 'undefined') 
    window.core = {};

    window.core.ListItemsTabs = Class.create({
    
    container: null,
    letras: null,    
    html_to_insert: null,
    data_json_to_insert: null,
    url: null,
    
    div_separador: "<div class=\"content\">" +
                      "<div class=\"listing section\" id=\"letra_#{letra}\" >" +
                          "<div class=\"list_header\">" +
                            "<h3>#{letra}</h3>" +
                          "</div>" +
                          "<div class=\"list_content\">" +
                            "<div id=\"item_product_#{letra}\" style=\"overflow: auto; height: 490px; padding-right: 2px;\" class=\"list_content_inner\">" +
                               // Aqui va el html que se pasa por parametro y que se quiera renderizar

                            "</div>" +
                          "</div>" +
                      "</div>" +
                  "</div>",
                                                                                      
    divIndice: "<div class=\"list_header space_abc selectable indice_letra_#{letra}\">" +
                 "<center>" +
                      "<h3>#{letra}</h3>" +              
                  "</center>" +                  
               "</div>",
    
    initialize: function(html, data_json, url, options) 
    {
       this.html_to_insert = html;       
       this.data_json_to_insert = data_json;
       this.url = url;
       
       this.options = Object.extend({
            onInsertItem: Prototype.emptyFunction
       },options || {});
        
       this.create();
       
    },
    
    create: function()
    {
        tam = 0;
        this.letras = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];        
        plantilla = "<div style=\"overflow: auto;\" class=\"subcolumns\">" +
                        "<div class=\"c95l\">" +
                            "<div class=\"subcl\">" +          
                              "<div class=\"panel2\">" +
                                "<div style=\"position: relative;\" class=\"panel2_content\">" +
                                    "<div class=\"scroller lista\" style=\"position: relative; left: 0px; top: 0px;\">" +

                                    "</div>" +
                                "</div>" +
                              "</div>" +
                            "</div>" +
                        "</div>" +
            
                        "<div class=\"c5r\">" +
                          "<div class=\"subcr\">" +
                            "<div class=\"listing controls indice\">" +
                             
                            "</div>" +
                          "</div>" +
                        "</div>" +             
                    "</div>"
         this.container = new Element('div').update(plantilla);         
         this.insert_indice();
         this.insert_separadores();
         this.insert_html_item();
         
    },
    
    insert_indice: function()
    {
        tam = this.letras.length;
        
        for (k=0; k < tam; k++)
        {         
           this.insert_indice_letra({letra: this.letras[k].toUpperCase(), url: this.url}); 
        }
        
    },
    
    insert_indice_letra: function(letra_y_url) 
    {        
        var template = new Template(this.divIndice);
        var div = template.evaluate(letra_y_url);
        var indice = this.container.down('.indice');
        indice.insert(div);
        var indice_letra = indice.down('.indice_letra_'+letra_y_url.letra);

        indice_letra.observe("click",function(event){
            this.indice_letra_onclick(letra_y_url);
        }.bind(this));
        
//        Event.observe(indice_letra,"mouseover",function(event){
//            alert("123");
//        });
    },
    
    indice_letra_onclick: function(letra_y_url)
    {
        var scroller = this.container.down('.scroller'); 
        
        new Ajax.Request(this.url+'?tab_name='+letra_y_url.letra, 
        {
            method: 'get',
            asynchronous:true, evalScripts:true, 
            onSuccess:function(response)
            {
                this.data_json_to_insert = response.responseJSON;
                
                window.core.ListItemsTabs.scrollToLetter(scroller,$('letra_'+letra_y_url.letra));
                this.updateTab(letra_y_url.letra);
                
            }.bind(this), 
            parameters:'authenticity_token=' + encodeURIComponent('6d0dbc59ae18e3880ec9cccf5c9a848121ac4bf6')
        });
        
    },
    
    insert_separadores: function()
    {
        tam = this.letras.length;
        
        for (i=0; i < tam; i++)
        {                                       
            this.insert_separador_letra({letra: this.letras[i].toUpperCase()});            
        }
    },
    
    insert_separador_letra: function(letra) 
    { 
        var template = new Template(this.div_separador);
        var div = template.evaluate(letra);        
        var scroller = this.container.down('.scroller');        
        scroller.insert(div);
        
    },
          
    insert_html_item: function()
    {
        tamano = this.data_json_to_insert.length;
        var indice;
        var html;
        
        for (j=0; j < tamano; j++)
        {
            html = this.insertar_actualizar(this.data_json_to_insert[j]);            
            indice = this.container.down("#item_product_"+this.letras[0].toUpperCase());
            indice.insert(html);
        }
    },
    
    insertar_actualizar: function(data)
    {
        var template = "";
        template = new Template(this.html_to_insert);
        this.notify('onInsertItem',data);
        html = template.evaluate(data);
        return html;
    },
    

    render_plantilla_html: function(element) 
    { 
        element.insert( this.container );        
    },

    updateTab: function(letra) 
    {
        tamano = this.data_json_to_insert.length;
        
        var indice = "";
        var html = "";
        
        indice = this.container.down("#item_product_"+letra);
        indice.update("");
        
        for (j=0; j < tamano; j++)
        {
            html = this.insertar_actualizar(this.data_json_to_insert[j]);
            indice.insert(html);
        }
    }
    
}); 
Object.Event.extend(window.core.ListItemsTabs);

Object.extend(window.core.ListItemsTabs,{
    
    scrollToLetter: function(scroller,element){       
        window.core.ListItemsTabs.scrollToElement(scroller,element);        
    },
    
    scrollToElement: function(element_to_move,to_element){       
      if ($(to_element)) {
          offset = $(to_element).positionedOffset();
          x = offset.left;
          y = offset.top;
          axis2 = $(element_to_move).positionedOffset();
          //  y = (-y) + axis2.top;
          new Effect.Move($(element_to_move), {x: x, y: -y, mode: 'absolute'});
      }
    }
});