function Gallery(divGalleryID,source,width,height) {
        
    //variables
    this.width = width;
    this.height = height;
    this.divGalleryID = divGalleryID;
    this.divGallery = document.getElementById(divGalleryID);
    this.divGalleryPopup = null;
    this.thumbWidth = 60;
    this.imageWidth = 440;
    this.columns = 3;
    this.rows = 3;
    this.culture = "es";
    this.xml = null;
        
    //constructor
    this.Constructor = Constructor;
    function Constructor() {
        this.divGallery.className = "gallery4";
        //this.divGallery.style.height = height + "px"
        this.divGallery.style.width = width + "px"
        //divGalleryPopup
        this.divGalleryPopup = document.createElement("DIV")
        this.divGalleryPopup.className = "gallery4Popup";
        this.divGalleryPopup.id = divGalleryID + "_popup";
        this.divGalleryPopup.style.position = "absolute";
        this.divGalleryPopup.style.display = "none";
        //this.divGalleryPopup.style.overflow = "hidden";
        this.divGallery.parentNode.insertBefore(this.divGalleryPopup, this.divGallery);
        //load xml
        if (source!="") this.LoadFromSource(source);
    }
    
    
    //methods
    this.LoadFromSource = LoadFromSource;
    function LoadFromSource(source) {
        var objGallery = this; 
        loadXMLDoc(source, function(result){    
            objGallery.xml = result;
            this.thumbWidth = parseInt(result.documentElement.getAttribute("width1"));
            this.imageWidth = parseInt(result.documentElement.getAttribute("width2"));
            this.culture = result.documentElement.getAttribute("culture");        
            var pics = result.getElementsByTagName("pic");
            var html = "";
            html += "<table>"            
            html += "<tr>"
            html += "<td class='thumbs'>"
            for (var i = 0; i < pics.length; i++) {
                var pic = pics[i];
                var image1Url = getElementTextNS("","image1", pic, 0);
                var image2Url = getElementTextNS("","image2", pic, 0);
                var image3Url = getElementTextNS("","image3", pic, 0);
                var imageName = getElementTextNS("","name", pic, 0);
                var imageDescription = getElementTextNS("","description", pic, 0);
                html += "<img src=\"" + image1Url + "\" style='display:none;width:" + this.thumbWidth + "px' title='" + replace(imageName,"'","") + "' onclick=\"" + divGalleryID + "Object.ShowImage(this, " + i + ",'" + replace(image2Url,"'","") + "','" + replace(image3Url,"'","") + "','" + replace(imageName,"'","") + "','" + replace(imageDescription,"'","") + "')\" />";
            }
            html += "</td>"
            html += "<td class='titles'>"
            html += "<div class='title'>" + result.documentElement.getAttribute("name") + "</div>"
            for (var i = 0; i < pics.length; i++) {
                var pic = pics[i];
                var image1Url = getElementTextNS("","image1", pic, 0);
                var image2Url = getElementTextNS("","image2", pic, 0);
                var image3Url = getElementTextNS("","image3", pic, 0);
                var imageName = getElementTextNS("","name", pic, 0);
                var imageDescription = getElementTextNS("","description", pic, 0);
                html += "<a href='#' onmouseover='" + objGallery.divGalleryID + "Object.ShowThumb(" + i + ")' onclick=\"" + divGalleryID + "Object.ShowImage(this, " + i + ",'" + replace(image2Url,"'","") + "','" + replace(image3Url,"'","") + "','" + replace(imageName,"'","") + "','" + replace(imageDescription,"'","") + "');return false;\" title=\"" + replace(imageDescription,"\"","'") + "\">" + imageName + "</a><br/>";
            }
            html += "</td>"
            html += "</tr></table>"
            objGallery.divGallery.innerHTML = html;
            if (pics.length>0) objGallery.ShowThumb(0);
        });
    }    
    this.ShowThumb = ShowThumb;
    function ShowThumb(index) {
        var imgs = this.divGallery.getElementsByTagName("IMG");
        for (var i=0; i<imgs.length; i++) {
            imgs[i].style.display = (index==i ? "block" : "none");
        }
    }    
    this.ShowImage = ShowImage;
    function ShowImage(sender, index, imageUrl2, imageUrl3, imageName, imageDescription) {
        var html = ""
        var sender = this.divGallery.getElementsByTagName("IMG")[index];
        var imageScale = getAbsoluteWidth(sender) / getAbsoluteHeight(sender);
        html += "<img id='" + this.divGalleryID + "_image' src='" + imageUrl2 + "' onload='" + this.divGalleryID + "Object.ResizeImage(this, " + index + ", " + imageScale + ")' style='width:1px;' onclick='" + divGalleryID + "Object.CloseImage()' />";
        html += "<div class='detail'><b>" + imageName + "</b><br/>" + imageDescription + "</div>"
        this.divGalleryPopup.innerHTML = html;
        this.divGalleryPopup.style.position = "absolute";
        this.divGalleryPopup.style.left = getAbsoluteLeft(sender.parentNode) + "px";
        this.divGalleryPopup.style.top = getAbsoluteTop(sender.parentNode) + "px"
        this.divGalleryPopup.style.width = getAbsoluteWidth(sender.parentNode) + "px";
        this.divGalleryPopup.style.height = getAbsoluteHeight(sender.parentNode) + "px";
        this.divGalleryPopup.style.display = "block";      
    }
    this.ResizeImage = ResizeImage;
    function ResizeImage(sender, index, imageScale) {
        var img = this.divGallery.getElementsByTagName("IMG")[index];
        //var finalWidth = this.imageWidth;
        var finalWidth = this.xml.documentElement.getAttribute("width2");
        var finalHeight = parseInt(finalWidth / imageScale);
        var finalLeft = parseInt(getAbsoluteLeft(this.divGallery) + getAbsoluteWidth(this.divGallery)/2 - finalWidth/2);
        var finalTop = parseInt(getAbsoluteTop(this.divGallery) + getAbsoluteHeight(this.divGallery) / 2 - finalHeight / 2);
        if (finalWidth > 900) {
            if (document.documentElement.clientWidth) {
                finalLeft = parseInt((document.documentElement.clientWidth / 2) - (finalWidth / 2));
            }
            if (document.documentElement.clientHeight) {
                finalTop = parseInt((document.documentElement.clientHeight / 2) - (finalHeight / 2));
            }
        }
        if (finalLeft < 0) finalLeft = 0;
        if (finalTop < 0) finalTop = 0;
        resizeTo(this.divGalleryPopup.id, finalLeft, finalTop, finalWidth, finalHeight, divGalleryID + "Object.ResizeImageEnd();" );
    }
    this.ResizeImageEnd = ResizeImageEnd;
    function ResizeImageEnd() {
        var img = document.getElementById(this.divGalleryID + "_image");
        setOpacity(img, 1);
        img.style.width = "";
        img.style.height = "";
        fadeTo(img.id, 100, 10, null)
    }    
    this.CloseImage = CloseImage;
    function CloseImage() {
        this.divGalleryPopup.style.display = "none";
    }    
    
    //calls constructor
    this.Constructor();
}