/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */



Lightbox = Class.create();
Lightbox.prototype = {
    initialize : function(width, height){
        if(!width && !height){
            this.width = 650;
            this.height = 550;
        }else{
            this.width = width;
            this.height = height;
        }
        if($('lightbox')==null){
            this.lightboxBg = new Element('div', {
                id:'lightbox-bg'
            });
            this.lightboxBg.observe('click', this.hide.bind(this));
            this.lightboxContainer = new Element('div', {
                id:'lightbox-container',
                style: 'width:'+this.width+'px; height:'+this.height+'px'
            });
            this.lightboxHeader = new Element('h2', {
                id:'lightbox-header'
            });
            this.lightboxContent = new Element('div', {
                id:'lightbox-content'
            });
            this.lightboxCloser = new Element('a', {
                id:'lightbox-closer'
            }).update('<span>x</span>');
            this.lightboxCloser.observe('click', this.hide.bind(this));
            this.lightbox = new Element('div', {
                id:'lightbox', 
                style:'visibility: hidden'
            });
            this.lightboxContainer.insert(this.lightboxCloser);
            this.lightboxContainer.insert(this.lightboxHeader);
            this.lightboxContainer.insert(this.lightboxContent);
            this.lightbox.insert(this.lightboxBg);
            this.lightbox.insert(this.lightboxContainer);
            $$('body')[0].insert(this.lightbox);
            this.isCentralized = false;
        //            Event.observe(window, 'load', this.centralize.bind(this));
        }
    },
    show : function(width, height){
        if(width && height)
            this.setDimensions(width, height)
        else
            this.setDimensions(this.width, this.height);
        
        if(this.isCentralized == false)
            setTimeout(50, this.show.bind(this));
        else
            this.lightbox.appear({
                duration: 0.7
            });
    },
    hide : function(){
        this.lightbox.fade({
            duration: 0.5,
            afterFinish: this.empty.bind(this)
        });
    },
    empty: function(){
        this.lightboxContainer.setStyle({
            top: 0, 
            left: 0
        });
        this.lightboxContent.update('');
    },
    setDimensions: function(width, height){
        this.lightboxContainer.setStyle({ 
            width: width+'px', 
            height: height+'px'
        });
        this.centralize();
    },
    centralize: function(){ 
        this.lightbox.setStyle({
            visibility: 'hidden', 
            display: 'block'
        });
        this.isCentralized = false;
        var D = document;
        var maxHeight = Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
            );
        this.lightboxBg.setStyle({
            height: maxHeight+'px'
        });
        var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal
        var width = viewport.width; // Usable window width
        var height = viewport.height; // Usable window height
        var lightboxCont = this.lightboxContainer.getDimensions();
        var contwidth = lightboxCont.width;
        var contheight = lightboxCont.height;
        var posX = (width - contwidth)/2;
        var posY = (height - contheight)/2;
        
        this.lightboxContainer.setStyle(
        {
            top: posY+'px',
            left: posX+'px'
        });
		
        this.lightbox.setStyle({
            visibility: 'visible', 
            display: 'none'
        });
        this.isCentralized = true;
    },
    setContent: function(html){
        this.lightboxContent.update(html);
    },
    insertContent: function(html){
        this.lightboxContent.insert(html);
    }
};


var KikZoomoViewer = Class.create();
KikZoomoViewer.prototype = {
    initialize : function(imageStr, target){
        var images = imageStr.split(';');
        var zv = new ZoomoViewer();
        zv.serverName = "http://kikzoom.zoomoviewer.com";
        zv.clientID = 972303;
        zv.width = 600;
        zv.height = 500;
        zv.addPlugIn("gui_default");
        zv.addPlugIn("gallery_default");
        
        for(var i=0; i<images.length; ++i){
            if(images[i] != '')
                zv.addImage(images[i].replace(/\s+/g,''));
        }
        zv.start('#'+target);

    }  
};

Preloader = Class.create();
Preloader.prototype = {
    initialize: function(img){
    //        this.image = new Image();
    //        this.imageElem = new Element('img', {
    //            src: img, 
    //            style: 'position: absolute; display: none'
    //        });
    //        this.container = new Element('div', {
    //            id: 'preloader', 
    //            style: 'position: absolute; visibilty: hidden; background-color: #fff; opacity: 0.6'
    //        });
    //        this.container.update(this.imageElem);
    //        $$('body')[0].insert(this.container);
    //        this.image.onload = this.centralize.bind(this);
    //        this.image.src = img;
    //        this.isVisible = false;
    },
    centralize: function(){
    //        var D = document;
    //        var maxHeight = Math.max(
    //            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    //            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    //            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    //            );
    //        var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal
    //        var width = viewport.width; // Usable window width
    //        var height = viewport.height; // Usable window height
    //        var contwidth = this.image.width;
    //        var contheight = this.image.height;
    //        var posX = (width - contwidth)/2;
    //        var posY = (height - contheight)/2;
    //        this.container.setStyle({
    //            height: maxHeight+'px',
    //            width: '100%'
    //        });
    //		
    //        this.container.setStyle({
    //            visibility: 'visible', 
    //            display: 'none'
    //        });
    //        this.imageElem.setStyle(
    //        {
    //            top: posY+'px',
    //            left: posX+'px',
    //            display: 'block'
    //        });
    },
    show: function(){
    //        this.container.show();
    //        this.isVisible = true;
    },
    hide: function(){
    //        this.container.hide();
    //        this.isVisible = false;
    }
};