var photoViewer = null;
var thumbnail = null;
var loader = null;

function PhotoViewer() {
    var self = this;
    this.o = null;
    this.ox = null;
    this.lastPhoto = null;
    this.caption = null;
    this.photo = null;
    this.loader = null;

    this.na = navigator.appName.toLowerCase();
    this.isIE = this.na.indexOf('internet explorer')+1?1:0;

    this.setPhoto = function(e) {
        var url = null;
        if ((e && !e.href)||(!e && event)) {
            url = e?e.target:event.srcElement;
            self.photo = url;
        } else if (e) {
            url = e.href||e;
            self.photo = e;
        } else {
            return false;
        }
        if (self.lastPhoto) {
            self.lastPhoto.className = self.lastPhoto.className.replace(/selected/gi,'');
        }
        self.lastPhoto = self.photo;
        self.photo.className += ' selected';
        self.setStatus(1,(this.isIE?event:e));
        self.ox.onerror = self.onload;
        self.ox.onload = self.onload;
        setTimeout("photoViewer.ox.src='"+url+"'",20);
        return false;
    }

    this.setStatus = function(s,e) {
        loader.setStatus(s,e);
    }

    this.mouseoverHandler = function() {
    }

    this.onload = function() {
        self.setStatus(0);
        self.caption.innerHTML = self.photo.getElementsByTagName('span')[0].innerHTML;
        self.o.src=self.ox.src;
    }

    this.init = function() {
        self.caption = document.getElementById('caption')
        self.o = document.getElementById('photo');
        self.ox = document.getElementById('photohidden');

        self.setPhoto(document.getElementById(window.location.hash.substr(1))||document.getElementById('default'));
        try { this.blur();} catch(e) { /* d'oh! */}
    }
}

function Loader() {
    var self = this;
    this.setStatus = function(s,e) {
        if (s) {
            self.show(e);
        } else {
            self.o.display = 'none';
            self.hide();
        }
    }
    this.show = function(e) {
        try { self.move(e); } catch(e) { /* d'oh! */ return false; }
        self.o.style.display = 'block';
        addEventHandler(document,'mousemove',self.move);
    }
    this.hide = function() {
        self.o.style.display = 'none';
        removeEventHandler(document,'mousemove',self.move);
    }
    this.move = function(e) {
        e = e?e:event;
        if (e) {
            var thumbActive = (thumbnail.oContainer.style.display == 'block');
            var offX = thumbActive?45:0;
            var offY = thumbActive?-30:0;
            self.o.style.left = (e.clientX+2+offX)+'px';
            self.o.style.top = (e.clientY-22+offY)+(document.documentElement.scrollTop||document.body.scrollTop||0)+'px';
        }
    }
    this.init = function() {
        document.body.appendChild(self.o);
    }
    this.o = document.createElement('div');
    this.o.id = 'loader';
    this.o.className = 'png';
    this.oFP = document.createElement('div');
    this.oFP.className = 'faceplate';
    this.oP = document.createElement('div');
    this.oP.className = 'progress';
    this.o.appendChild(this.oFP);
    this.o.appendChild(this.oP);
}


function Thumbnail() {
    var self = this;
    this.o = null;
    this.descriptions = [];
    this.disabled = 1;
    this.URLs = [];
    this.x = 64; // thumbnail width
    this.y = 48; // thumbnail height
    this.offY = parseInt(this.y*0.75);
    this.show = function(e) {
        if (self.disabled) return false;
        self.o.style.backgroundImage = 'url("'+self.URLs+'")';
        self.o.style.backgroundPosition = '0px '+(this.thumbOffset?(-self.y*this.thumbOffset):0)+'px';
        try { self.move(e); } catch(e) { /* d'oh! */ return false; }
        self.oContainer.style.display = 'block';
        addEventHandler(document,'mousemove',self.move);
    }
    this.hide = function() {
        if (self.disabled) return false;
        self.oContainer.style.display = 'none';
        removeEventHandler(document,'mousemove',self.move);
    }
    this.move = function(e) {
        e = e?e:event;
        if (e) {
            self.oContainer.style.left = (e.clientX+12)+'px';
            self.oContainer.style.top = (e.clientY-self.offY)+(document.documentElement.scrollTop||document.body.scrollTop||0)+'px';
        }
    }
    this.blur = function(e) {
        try {
            (e?e.target:(event?event.srcElement:document.body)).blur();
        } catch(e) {
            return false;
        }
    }
    this.init = function() {
        var items = [];
        var j,tmp;

        url =document.getElementById('pageTabs').getElementsByTagName('a')[0].href.toString();
        self.URLs = (url.lastIndexOf('/')<url.length?url.substr(0,url.lastIndexOf('/')+1):'')+'thumbnails.jpg';

        items = document.getElementById('pageTabs').getElementsByTagName('a');

        self.descriptions = document.getElementById('pageTabs').getElementsByTagName('span');

        for (j=0; j<items.length; j++) {
            items[j].title = self.descriptions[j].innerHTML;
            items[j].thumbOffset = j;
            items[j].onmouseover = this.show;
            items[j].onmouseout = this.hide;
            items[j].onfocus = this.blur;
            if (!items[j].onclick) {
                items[j].onclick = photoViewer.setPhoto;
            }
        }

        self.oContainer = document.createElement('div');
        self.oContainer.id = 'thumbnailContainer';
        self.oContainer.className = 'png';
        this.o = document.createElement('div');
        this.o.className = 'thumbnail';
        self.oContainer.appendChild(self.o);
        document.body.appendChild(self.oContainer);
        self.disabled = 0;
    }
}

function init()
{
    photoViewer = new PhotoViewer();
    thumbnail = new Thumbnail();
    loader = new Loader();

    photoViewer.init();
    thumbnail.init();
    loader.init();
}