


    function sd_Gallery()
    {
        this.images = new Array();
        this.filterMouseOver = new String('');
        this.filterMouseOut = new String('');
        this.filterImageChange = new String('');

        this.timer = null;
        this.timer1 = null;
        this.id = new String('');
        this.current = -1;

        this.width = 0;
        this.height = 0;
        this.iCols = 0;
        this.iRows = 0;

        this.add = sd_addImageToGallery;

        this.start = sd_startGallery;
        this.renderThumbs = sd_renderThumbs;
        this.move = sd_moveThumbs;
        this.stop = sd_stopThumbs;
        this.show = sd_selectThumb;
        this.highlight = sd_highlightThumb;
        this.unhighlight = sd_unhighlightThumb;
        this.preload = sd_preloadLarge;
        this.buildLarge = sd_buildLarge;
    }
    
    /*** adding a image to gallery
    
        szThumb - the path to the thumb
        szThumb - the path to the thumb when mouseOver
        szLarge - the path to the large image
    **/
    function sd_addImageToGallery(szThumb, szThumb1, szLarge)
    {
        var i = this.images.length;
        this.images[i] = new Array();
        this.images[i][0] = szThumb;
        this.images[i][1] = szThumb1;
        this.images[i][2] = szLarge;
    }

    /*** starts the gallery    **/
    function sd_startGallery()
    {
        if(!this.images.length) return;
        
        this.renderThumbs();        // renders the thumbs scroller 
        this.preload();             // preload large images
        this.buildLarge();          // builds the large image layer
        this.show();                // shows the first thumb
    }

    //*** renders the list of thumbnails
    function sd_renderThumbs()
    {
        if(!this.images.length) return;
        
        //*** getting the thumbs layer
        var oLayer = new getObj('galleryThumbs');
        if(oLayer.obj == null) return;
        
        var oThumbList = document.createElement('DIV');
        oThumbList.id = 'sd_gal_thumblist';
        oLayer.obj.appendChild(oThumbList);
        
        var szContent = new String('   ');
        for(var i=0; i < this.images.length; i++)
        {
            szContent += "\n" + ' <div> ';
            szContent += "\n" + '    <a href="#" onCLick="eval(\'' + this.id +'.show('+i+')\');return false;"> ';
            szContent += "\n" + '      <img id="sd_img_thumb_' + i + '" src="' + this.images[i][0] + '" onMouseOver="eval(\'' 
                                + this.id +'.highlight('+i+')\')" onMouseOut="eval(\'' 
                                + this.id +'.unhighlight('+i+')\')" border=0 class="sd_img_thumb"> ';
            szContent += "\n" + '    </a> ';
            szContent += "\n" + ' </div> ';
        }
        
        oThumbList.innerHTML = szContent;
    }


    /*** moving thumbs up
        szType - the movement way
    */
    function sd_moveThumbs(szType)
    {
        switch(szType)
        {
            case 'up':
                this.timer = setInterval('sd_moveUp()', 1);
                break;
            case 'down':
                this.timer = setInterval('sd_moveDown()', 1);
                break;
        }
    }  

    /** selects a thumb giving its position in the image array
        [iPos] - the position of the thumb
        ***/
    function sd_selectThumb(iPos)
    {
        if(!iPos) iPos = 0;
        if(iPos == this.current) return;
        
        if(this.timer1)
        {
            sd_gal_stop_top = 0;
            sd_gal_stop_left = 0;
            clearInterval(this.timer1);
        }
        
        //*** unhilighting the precedent selection
        if(this.current >= 0)
        {
            var oObj = new getObj('sd_img_thumb_' + this.current);
            if(oObj.obj == null) return;

            oObj.obj.className = 'sd_img_thumb';
        }
        
        //*** higlighting the item
        var oObj = new getObj('sd_img_thumb_' + iPos);
        if(oObj.obj == null) return;
        
        oObj.obj.className = 'sd_img_thumb_sel';
        
        //*** showing image, by moving it around
        if(this.current>=0)
        {
            //*** detecting the new top and left offset
            var iNewTop =  parseInt(iPos/this.iCols) * this.height;
            var iNewLeft =  (iPos%this.iCols) * this.width;
            
            eval("this.timer1 = setInterval('sd_moveTo(" + iNewTop + ", " + iNewLeft + ", " + this.id + ")', 1)");
        }
        
        //*** updating the current position
        this.current = iPos;
    }

    /*** highlights an item if is not the selected one
    [iPos] - the thumb position in the image array
    */
    function sd_highlightThumb(iPos)
    {
        if(!iPos) iPos = 0;
        if(this.current == iPos) return;
        
        var oObj = new getObj('sd_img_thumb_' + iPos);
        if(oObj.obj == null) return;
        
        oObj.obj.className = 'sd_img_thumb_over';
    }
    /*** unhighlights an item if is not the selected one
    [iPos] - the thumb position in the image array
    */
    function sd_unhighlightThumb(iPos)
    {
        if(!iPos) iPos = 0;
        if(this.current == iPos) return;
        
        var oObj = new getObj('sd_img_thumb_' + iPos);
        if(oObj.obj == null) return;
        
        oObj.obj.className = 'sd_img_thumb';
    }
    
    //*** preloads the large images
    function sd_preloadLarge()
    {
        if(!document.images) return;
        if(!document.sdGalleryImages) document.sdGalleryImages=new Array();
        
        var i = 0;
        for(i; i< this.images.length; i++)
        {
            document.sdGalleryImages[i] = new Image;
            document.sdGalleryImages[i].src = this.images[i][2];
        }
    }
    
    //*** builds the largeImage area
    function sd_buildLarge()
    {
        var oParent = new getObj('galleryLarge');
        if(oParent.obj == null) return;
        
        var iLen = document.sdGalleryImages.length;
     
        //*** computing the number of images per line and the number of columns
        this.iCols = 0;
        if(iLen%4 == 0) this.iCols = 4;
        else if(iLen%3 == 0) this.iCols = 3;
        else if(iLen%2 == 0) this.iCols = 2;
        else if(iLen%1 == 0) this.iCols = 1;
        this.iRows = iLen/this.iCols;

        //*** rendering the large image layer
        var i =0;
        var szContent = new String('')
        szContent += '<div id="sd_gal_large" style="width:' + (this.width*this.iCols) + 'px; height:' + (this.height*this.iRows ) + 'px">';
        for(i; i<document.sdGalleryImages.length; i++)
            szContent += '<img src="' + document.sdGalleryImages[i].src + '" width=' + this.width + ' height=' + this.height + '>';
        szContent += '</div>';
        oParent.obj.innerHTML = szContent;
    }
    
    /*** scrolls the large image layer to specified positions
        iPosx - x position
        iPosy - y position
    */
    sd_gal_stop_top = 0;
    sd_gal_stop_left = 0;
    function sd_moveTo(iPosx, iPosy, oObj)
    {
        var oLayer = new getObj('galleryLarge');
        if(oLayer.obj == null) return;
        
        //*** moving on x axis
        if(!sd_gal_stop_top)
        if(oLayer.obj.scrollTop > iPosx)
        {
            oLayer.obj.scrollTop-=8;
            if(oLayer.obj.scrollTop < iPosx)
            {
                oLayer.obj.scrollTop = iPosx;
                sd_gal_stop_top = 1;
            }
        }
        else
        {
            oLayer.obj.scrollTop+=8;
            if(oLayer.obj.scrollTop > iPosx)
            {
                oLayer.obj.scrollTop = iPosx;
                sd_gal_stop_top = 1;
            }
        }
        
        //*** moving on y axis     
        if(!sd_gal_stop_left)
        if(oLayer.obj.scrollLeft > iPosy)
        {           
            oLayer.obj.scrollLeft-=10;
            if(oLayer.obj.scrollLeft < iPosy)
            {
                oLayer.obj.scrollLeft = iPosy;
                sd_gal_stop_left = 1;
            }
        }
        else
        {            
            oLayer.obj.scrollLeft+=10;
            if(oLayer.obj.scrollLeft > iPosy)
            {
                oLayer.obj.scrollLeft = iPosy;
                sd_gal_stop_left = 1;
            }
        }
            
        //*** stoping the timer
        if(sd_gal_stop_left && sd_gal_stop_top)
        {
            clearInterval(oObj.timer1);
            
            sd_gal_stop_left = 0;
            sd_gal_stop_top = 0;
        }
    }
    
    //*** moving one pixel down
    function sd_moveDown()
    {
        var oParent = new getObj('galleryThumbs');
        if(oParent.obj == null) return;
        (oParent.obj.scrollTop)+=5;
    }

    //*** moving one pixel up
    function sd_moveUp()
    {
        var oParent = new getObj('galleryThumbs');
        if(oParent.obj == null) return;
        (oParent.obj.scrollTop)-=5;
    }  


    //*** stops moving thumbs
    function sd_stopThumbs()
    {
        clearInterval(this.timer);
    }
    
    
    
    /*** changes the css class of a layer
        szLayer - the layer name
        szClass - the css class
    */    
    function sd_changeClassName(szLayer, szClass)
    {
        var oParent = new getObj(szLayer);
        if(oParent.obj == null) return;
        oParent.obj.className = szClass;
    }
    
    