menuCategoria = Class.create();
menuCategoria.prototype = 
{
    initialize: function(element, options)
    {
        //Variables importantes
        this.element = $(element);       //Objeto de la tabla, default reporte
        this.options = Object.extend({
            id: '', //id del registro que se está editando
            rutaImagenes: './images/' //Ruta de las imagenes
        }, options || {});
        this.requestHTTP = null;
        this.url = "./ajaxMenu.php";
        //Invoca las opciones del Menu
        this.ajaxMenu();
    },
    
    ajaxMenu: function()
    {
        //Cierra cualquier request existente
        if(this.requestHTTP != null && this.requestHTTP.readyState != 0 && this.requestHTTP.readyState != 4 && Ajax.activeRequestCount > 0)
        {
            try
            {
                if(this.requestHTTP.readyState != "undefined")
                {
                    this.requestHTTP.abort();
                }
            }
            catch (error)
            {
                //alert(this.requestHTTP.readyState + " " + Ajax.activeRequestCount + " " + error );
            }
            this.requestHTTP = null;
        }
        this.requestHTTP = new Ajax.Request(this.url, {onComplete: this.onComplete.bind(this)});
    },
    
    onComplete: function(request)
    {
        //this.element.innerHTML = request.responseText;
        var filas = request.responseXML.getElementsByTagName("row");

        for(var i = 0; i < filas.length ; i++)
        {
            var li = document.createElement("LI");
            //Se le asigna un id
            li.id = "li_" + i;
            Element.setStyle(li, { backgroundImage: 'url(' + filas[i].getAttribute("foto") + ')', display: 'none', backgroundRepeat: 'no-repeat' });
            
            //Crea un Div
            var div = document.createElement("DIV")
            //Actualiza el texto al div
            Element.update(div, filas[i].firstChild.data);
            //Adiciona el Div al li
            li.appendChild(div);

            //Ubica el UL para poderle adicionar el li
            var elementParent = this.element.getElementsByTagName("UL");
            li.onclick = this.onClick.bind(this, filas[i].getAttribute("id"));
            li.onmouseover = this.onMouseOver.bind(this);
            li.onmouseout = this.onMouseOut.bind(this);
            //Adiciona el li
            elementParent[0].appendChild(li);
            
            //Crea un efecto de fade in al elemento
            Effect.Appear(li.id, { duration: 1.0 , queue:'end' });
        }
    },
    
    onClick: function()
    {
        var $_ = arguments;
        var id = $_[0];
        window.location = "categorias.php?id=" + id;
    },
    
    onMouseOver: function(event)
    {
        var myElement = Event.element(event);
        Element.setStyle(myElement, {cursor: 'pointer'});
    },
    
    onMouseOut: function(event)
    {
    }
};