/* 
 * Gallery Script
 * Anthony Dunckel
 */


var FeatureListing = function(data, imgDiv, options)
{
    this.loadImages = function()
    {
        var el = this.gallery.getElementsByTagName('a');
        this.images = new Array();
        this.descriptions = new Array();
        for(var i = 0; i < el.length; i++)
        {
            this.images[i] = new myImage({'id':i, 'alt':el[i].innerHTML});
            this.images[i].loadImage(el[i].href);
            Element.extend(this.images[i]);
            this.descriptions[i] = el[i].innerHTML;
            if(this.descriptions[i] == "" || !this.descriptions[i]){
                this.descriptions[i] == "Image "+i;
            }
        }
    }

    this.loadDescriptions = function()
    {
        var el = this.gallery.getElementsByTagName('p');
        for(var i = 0; i < el.length; i++)
        {
            this.descriptions[i] = el[i].innerHTML;
        }
    }

    this.displayThumbs = function(div, cols)
    {
        this.tblThumb = document.createElement('table');
        Element.extend(this.tblThumb);
        this.tblThumb.addBody();
        var self = this;

        for(var j = 0; j < this.images.length; j++)
        {
            if(j%this.options.cols == 0)
            {
                var row = this.tblThumb.addRow();
            }
            var cell = row.addCell();
            cell.appendChild(this.images[j].thumb);
            cell.id = j;
            addEvent(cell, 'click', function(){self.showImage(this.id)});
        }

        div.appendChild(this.tblThumb);
    }

    this.showImage = function(el)
    {
        this.images[el].fadeIn(this.pdiv, 5, 50);
        if(this.cur){
            this.images[this.cur].fadeOut(this.pdiv, 5, 50);
        } else {
            this.preview.fadeOut(5, 50);
        }
        this.cur = el;
        this.information.innerHTML = this.descriptions[this.cur];
    }

    this.options = options || {};
    this.options.cols = this.options.cols || '2';
    this.options.loadfile = this.options.loadfile || '';
    this.options.descriptions = this.options.descriptions || false;

    this.preview = new myImage(
            {'id':"Expanded",
             'alt':'Loading...'}
     );
    this.preview.loadImage(this.options.loadfile);

    this.thumbholder = document.createElement('div');
    Element.extend(this.thumbholder);
    this.thumbholder.setAttribute('style', 'overflow: auto; float: left; Height: 400');

    this.thumbholder_sur = document.createElement('div');
    Element.extend(this.thumbholder_sur);
    this.thumbholder_sur.setAttribute('style', 'overflow: hidden; float: left; Height: 400');
    this.thumbholder_sur.appendChild(this.thumbholder);

    this.btn = document.createElement('div');
    Element.extend(this.thumbholder);


    this.pdiv = document.createElement('div');
    this.pdiv.appendChild(this.preview.img);

    this.gallery = imgDiv;
    this.information = document.createElement('div');
    this.loadImages();
    if(this.options.descriptions)
    {
        this.loadDescriptions();
    }
    
    this.gallery.innerHTML = '';
    this.gallery.appendChild(this.thumbholder_sur);
    this.gallery.appendChild(this.pdiv);
    this.gallery.appendChild(this.information);
    this.displayThumbs(this.thumbholder, this.options.cols);
    this.showImage(0);
};

var myImage = function(options)
{
    this.loadImage = function(url)
    {
        this.img.src = url;
        this.thumb.src = url;
        this.setOpacity(this.opacity);
    }

    this.reset = function()
    {
        this.onLoaded = function(){};
        this.onDone = function(){};
        this.onChange = function(){};

        this.img.onLoad = this.onLoaded();
    }

    this.fadeIn = function(div, step, tm)
    {
        this.opacity = 0.0;
        this.setOpacity(this.opacity);
        
        if(!this.parent)
        {
            this.parent = div;
            div.appendChild(this.img);
        }

        var self = this;
        this.timer = new Timer();
        this.timer.interval(tm);
        this.step = step;
        if(isNaN(this.step)){this.step = 5}
        this.timer.addCallback(function(){self.lfade(self.step)});
        this.timer.start();
    }

    this.fadeOut = function(step, tm)
    {
        this.opacity = 100.0;
        var self = this;        
        this.timer = new Timer();
        this.timer.interval(tm);
        this.step = -1*step;
        if(isNaN(this.step)){this.step = -5}
        this.timer.addCallback(function(){self.lfade(self.step)});
        this.timer.start();
    }

    this.imgSweepHorizontal = function(step, tm)
    {

    }

    this.imgSweepVertical = function(step, tm)
    {

    }

    this.lmoveImage = function(st, dir)
    {

    }

    this.lfade = function(st)
    {
        this.opacity = this.opacity + st;
        this.setOpacity(this.opacity);

        if(this.opacity <= 0)
        {
            //this.parent.removeChild(this.img);
            this.timer.stop();
        }
        if(this.opacity >= 100)
        {
            this.timer.stop();
        }
    }

    this.getOpacity = function() {
        opacity = 0;

        opacity = this.img.style.opacity*100;
        return opacity;
    }

    this.setOpacity = function(opacity) {
        opacity = (opacity == 100)?99.999:opacity;

        // IE/Win
        this.img.style.filter = "alpha(opacity:"+opacity+")";

        // Safari<1.2, Konqueror
        this.img.style.KHTMLOpacity = opacity/100;

        // Older Mozilla and Firefox
        this.img.style.MozOpacity = opacity/100;

        // Safari 1.2, newer Firefox and Mozilla, CSS3
        this.img.style.opacity = opacity/100;
    }

    this.opt = options || {};
    this.opt.thumbsize = this.opt.thumbsize || {'width':'100px', 'height':'75px'};
    this.opt.imagesize = this.opt.imagesize || {'width':'400px', 'height':'300px'};
    this.opacity = 100;

    this.img = document.createElement('img');
    this.thumb = document.createElement('img');
    Element.extend(this.img);
    Element.extend(this.thumb);
    setStyle(this.thumb, "width", this.opt.thumbsize.width);
    setStyle(this.thumb, "height", this.opt.thumbsize.height);
    setStyle(this.img, "width", this.opt.imagesize.width);
    setStyle(this.img, "height", this.opt.imagesize.height);

    setStyle(this.img, "position", 'absolute');


    this.timer = new Timer();
    if(this.opt.url){
        this.loadImage(this.opt.url);
    }
}