/*
    Slimbox (Extended Version 1.3.1, 2007-02-21)
    by Yukio Arita (http://homepage.mac.com/yukikun/software/slimbox_ex/)
    -     Support to show external content using iframe.
    -     Support to set content size. You can add width/height parameters 
        in rev attribute of the anchor url.
        ex1) <a href="image.jpg" rev="width=50%, height=50%" rel="lightbox">
                <img src="image_thumb.jpg" alt="image"></a>
        ex2) <a href="text.html" rev="width=500, height=300" rel="lightbox">
                some text here</a>
    -     Some rendering problem with IE6 is fixed. Now you can use Slimbox in 
        valid XHTML document with XML prolog.
    - Of course, license is same as original.

    Based on:
    Slimbox v1.3 - The ultimate lightweight Lightbox clone
    by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
    Inspired by the original Lightbox v2 by Lokesh Dhakar.
*/
var Lightbox = {
    init: function(options){
        this.options = Object.extend({
            resizeDuration: 400,
            resizeTransition: Fx.Transitions.sineInOut,
            initialWidth: 250,
            initialHeight: 250,
            animateCaption: true,
            defaultIframeWidth : 500, 
            defaultIframeHeight: 300
        }, options || {});
        
        // IE 6 - XML prolog problem
        if(window.ie6 && document.compatMode=="BackCompat"){
            this.options.animateCaption = false;
        }

        this.closeText = "Sluiten";
        this.anchors = [];
        $each(document.links, function(el){
            if (el.rel && el.rel.test(/^lightbox/i)){
                el.onclick = this.click.pass(el, this);
                this.anchors.push(el);
            }
        }, this);
        this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
        this.eventPosition = this.position.bind(this);

        /*    Build float panel
            
            <div id="lbTopContainer">
                <div id="lbTop">
                    <a id="lbCloseLinkTop"></a>
                    <div style="clear:both;"><!--x--></div>
                </div>
            </div>
            <div id="lbOverlay"></div>
            <div id="lbCenter">
                <div id="lbCanvas">
                    <a id="lbPrevLink"></a>
                    <a id="lbNextLink"></a>
                    <!-- img or iframe element is inserted here -->
                </div>
            </div>
            <div id="lbBottomContainer">
                <div id="lbBottom">
                    <a id="lbCloseLink"></a>
                    <div id="lbCaption"></div>
                    <div id="lbNumber"></div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        */

        if($('lbOverlay')) $('lbOverlay').remove();
        this.overlay = new Element('div');
	this.overlay.setProperty('id', 'lbOverlay').injectInside(document.body);
        
        if($('lbCenter')) $('lbCenter').remove();
        this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
        
        if($('lbCanvas')) $('lbCanvas').remove();
        this.canvas = new Element('div').setProperty('id', 'lbCanvas').injectInside(this.center);
        
        //if(!$('lbPrevLink'))
        //    this.prevLink = new Element('a').setProperties({id: 'lbPrevLink', href: '#'}).setStyle('display', 'none').injectInside(this.canvas);
        
        //if(!$('lbNextLink'))
        //    this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.canvas);
        
        //this.prevLink.onclick = this.previous.bind(this);
        //this.nextLink.onclick = this.next.bind(this);

        if($('lbBottomContainer')) $('lbBottomContainer').remove();
        this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
        
        if($('lbTopContainer')) $('lbTopContainer').remove();
        this.topContainer = new Element('div').setProperty('id', 'lbTopContainer').setStyle('display', 'none').injectInside(document.body);
        
        if($('lbBottom')) $('lbBottom').remove();
        this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
        
        if($('lbTop')) $('lbTop').remove();
        this.topDiv = new Element('div').setProperties({id: 'lbTop', 'class': 'lbTop'}).injectInside(this.topContainer).setHTML('&nbsp;');
        
        if($('lbCloseLink')) $('lbCloseLink').remove();
        new Element('a').setProperties({id: 'lbCloseLink', href: 'javascript:return(false);'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
        closeIda = 'lbCloseLinkTop';//+new Date().getTime();
        
        if($('spanInside')) $('spanInside').remove();
        new Element('snap').setProperties({id: 'spanInside'}).injectInside(this.topDiv);
        
        if($(closeIda)) $(closeIda).remove();
        new Element('a').setProperties({id: closeIda, href: 'javascript:return(false);'}).setHTML(this.closeText).injectInside(this.topDiv).onclick = this.overlay.onclick = this.close.bind(this);
        
        if($('lbCaption')) $('lbCaption').remove();
        this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);    
        
        if($('lbNumber')) $('lbNumber').remove();
        this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
        
        if($('lbClearBoth')) $('lbClearBoth').remove();
        if(!$('lbClearBoth'))
            new Element('div').setProperty('id', 'lbClearBoth').setStyle('clear', 'both').injectInside(this.bottom);
        
        

        /* Build effects */
        var nextEffect = this.nextEffect.bind(this);
        this.fx = {
            overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
            resizeCenter: this.center.effects({duration: this.options.resizeDuration, transition: this.options.resizeTransition, onComplete: nextEffect}),
            image: this.canvas.effect('opacity', {duration: 500, onComplete: nextEffect}),
            bottom: this.bottomContainer.effect('height', {duration: 400, onComplete: nextEffect}),
            topDiv: this.topContainer.effect('height', {duration: 400, onComplete: nextEffect})
        };

        this.preloadPrev = new Image();
        this.preloadNext = new Image();
    },

    click: function(link){
        if (link.rel.length == 8) return this.show(link.href, link.title, link.rev);

        var j, itemNumber, items = [];
        this.anchors.each(function(el){
            if (el.rel == link.rel){
                for (j = 0; j < items.length; j++) if(items[j][0] == el.href && items[j][2] == el.rev) break;
                if (j == items.length){
                    items.push([el.href, el.title, el.rev]);
                    if (el.href == link.href && el.rev == link.rev) itemNumber = j;
                }
            }
        }, this);
        return this.open(items, itemNumber);
    },

    show: function(url, title, rev){
        return this.open([[url, title, rev]], 0);
    },

    open: function(items, itemNumber){
        this.items = items;
        this.position();
        this.setup(true);
        var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
        var st = document.body.scrollTop  || document.documentElement.scrollTop;
        this.top = (st + 50);
        this.topCloseHeight = 25;
        this.center.setStyles({top: this.top+'px', display: ''});
        this.fx.overlay.start(0.8);

        return this.changeItem(itemNumber);
    },

    position: function(){
        //IE6 - XML prolog problem.
        var ww = (window.getWidth() == 0) ? window.getScrollWidth()-22 : window.getWidth();
        var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
        var st = document.body.scrollTop  || document.documentElement.scrollTop;
        this.overlay.setStyles({top: st+'px', height: '100%', width:ww+'px'});
    },

    setup: function(open){
        var elements = $A(document.getElementsByTagName('object'));
        if (window.ie) elements.extend(document.getElementsByTagName('select'));
        elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
        var fn = open ? 'addEvent' : 'removeEvent';
        window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
        document[fn]('keydown', this.eventKeyDown);
        this.step = 0;
    },

    keyboardListener: function(event){
        switch (event.keyCode){
            case 27: case 88: case 67: this.close(); break;
            case 37: case 80: this.previous(); break;    
            case 39: case 78: this.next();
        }
    },

    previous: function(){
        return this.changeItem(this.activeItem-1);
    },

    next: function(){
        return this.changeItem(this.activeItem+1);
    },

    changeItem: function(itemNumber){
        if (this.step || (itemNumber < 0) || (itemNumber >= this.items.length)) return false;
        this.step = 1;
        this.activeItem = itemNumber;

        this.topContainer.style.display = this.bottomContainer.style.display =  'none'; //this.prevLink.style.display = this.nextLink.style.display =
        this.fx.image.hide();
        this.center.className = 'lbLoading';

        // discard previous content by clicking
        this.removeCurrentItem();
        
        // check item type
        var url = this.items[this.activeItem][0];
        var rev = this.items[this.activeItem][2];
        
        var re_imageURL = /\.(jpe?g|png|gif|bmp)/i;
        if( url.match(re_imageURL) ) {
            this.preload = new Image();    // JavaScript native Object
            this.preload.datatype = 'image';
            this.preload.w = this.matchOrDefault(rev, new RegExp("width=(\\d+%?)", "i"), -1); //-1 if use original size.
            this.preload.h = this.matchOrDefault(rev, new RegExp("height=(\\d+%?)", "i"), -1);
            this.preload.onload = this.nextEffect.bind(this);
            this.preload.src = url;
        }else{
            this.preload = new Object ();    // JavaScript native Object
            this.preload.datatype = 'iframe';
            this.preload.w =  this.matchOrDefault(rev, new RegExp("width=(\\d+)", "i"), this.options.defaultIframeWidth);
            this.preload.h = this.matchOrDefault(rev, new RegExp("height=(\\d+)", "i"), this.options.defaultIframeHeight);
            this.preload.src = url;
            this.nextEffect(); //asynchronous loading
        }

        return false;
    },

    nextEffect: function(){
        switch (this.step++){
        case 1:
            this.center.className = '';

            // create HTML element
            if( this.preload.datatype == 'image' ) {
                var ws = (this.preload.w == -1) ? this.preload.width.toString() : this.preload.w.toString();
                var hs = (this.preload.h == -1) ? this.preload.height.toString() : this.preload.h.toString();
                this.p_width = ( q = ws.match(/(\d+)%/) ) ? q[1] * this.preload.width * 0.01 : ws;
                this.p_height = ( q = hs.match(/(\d+)%/) ) ? q[1] * this.preload.height * 0.01 : hs;
                new Element('img').setProperties({id: 'lbImage', src:this.preload.src, width:this.p_width, height:this.p_height}).injectInside(this.canvas);
                //this.nextLink.style.right = '';
            }else{
                this.p_width = this.preload.w;
                this.p_height = this.preload.h;
                // Safari would not update iframe content that has static id.
                actFrame = this.iframeId = "lbFrame"//+new Date().getTime();
                new Element('iframe').setProperties({'name': this.iframeId, id: this.iframeId, width: '100%', height: this.p_height, frameBorder:0, scrolling:'yes', src:this.preload.src}).injectInside(this.canvas);
                if($(this.iframeId).name == '') $(this.iframeId).name = this.iframeId;
                //this.nextLink.style.right = '25px';
            }
            
            this.canvas.style.width = '100%';
            this.canvas.style.height =  this.p_height+'px'; //this.prevLink.style.height = this.nextLink.style.height =

            this.caption.setHTML(this.items[this.activeItem][1] || '');
            this.number.setHTML( (this.items.length == 1) ? '' : 'Page ' + (this.activeItem+1) + ' of ' + this.items.length );

            if (this.activeItem) this.preloadPrev.src = this.items[this.activeItem-1][0];
            if (this.activeItem != (this.items.length - 1)) this.preloadNext.src = this.items[this.activeItem+1][0];
            if (this.center.clientHeight != this.canvas.offsetHeight){
                var oh = (this.p_height == this.canvas.clientHeight) ? this.canvas.offsetHeight : eval(this.p_height)+18; // fix for ie
                this.fx.resizeCenter.start({height: oh});
                break;
            }
            
            this.step++;
        case 2:
            if (this.center.clientWidth != this.canvas.offsetWidth){
                var ow = (this.p_width == this.canvas.clientWidth) ? this.canvas.offsetWidth : eval(this.p_width)+18; // fix for ie
                this.fx.resizeCenter.start({width: ow, marginLeft: -ow/2});
                break;
            }
            this.step++;
        case 3:
            this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height:'0px', marginLeft: this.center.style.marginLeft, width:this.center.style.width, display: ''});
            this.topContainer.setStyles({top: (this.top - this.topCloseHeight)+'px', height: this.topCloseHeight+'px', marginLeft: this.center.style.marginLeft, width:this.center.style.width, display: ''});
            this.fx.image.start(1);
            break;
        case 4:
            if (this.options.animateCaption){
                // This is not smooth animation in IE 6 with XML prolog.
                // If your site is XHTML strict with XML prolog, disable this option.
                this.fx.bottom.start(0,this.bottom.offsetHeight+10);
                break;
            }
            this.bottomContainer.style.height = (this.bottom.offsetHeight+10)+'px';
            this.topContainer.style.height = (this.topDiv.offsetHeight)+'px';
        case 5:
            //if (this.activeItem){
                //this.prevLink.style.display = '';
            //}
            //if (this.activeItem != (this.items.length - 1)){
                //this.nextLink.style.display = '';
            //}
            
            this.step = 0;
        }
    },

    close: function(){
        if (this.step < 0) return;
        this.step = -1;
        this.removeCurrentItem();    // discard content
        for (var f in this.fx) this.fx[f].stop();
        this.center.style.display = this.topContainer.style.display = this.bottomContainer.style.display = 'none';
        this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
        $$('embed').each(function(row){ row.style.visibility = "visible"; }); 
        $$('body').each(function(row){ row.style.overflow = "auto"; row.scroll = "yes"; }); 
        $$('html').each(function(row){ row.style.overflow = "auto"; row.scroll = "yes"; });
        $(openLBId).href = openLBLink;
        if($(openLBId).id == 'openLBId') $(openLBId).id = '';
        openLBLink = openLBId = '';
        return false;
    },
                                  
    removeCurrentItem: function(){
        if (this.preload){
            if( this.preload.datatype == 'image' ) {
                $('lbImage').remove();
                this.preload.onload = Class.empty;
            }else{
                $(this.iframeId).remove();
            }
            this.preload = null;
        }        
    },

    matchOrDefault: function(str, re, val){
        var hasQuery = str.match(re);
        return hasQuery ? hasQuery[1] : val;
    }

};
//window.addEvent('domready', Lightbox.init.bind(Lightbox));