/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: Image Gala
*/

var ImgGallery = Class({
    Implements: Options,

    // CHANGE THIS !!	

    options: {
        slides: 2,     // NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
        offset: 200,	// HOW MUCH TO SLIDE WITH EACH CLICK
        
        galContainer: $('galContainer'),
        inspectorClass: '.img_container',
        bigOneClass: '.einzigstes',
        thumbContainer: '.wrapper',
        bigOneSize: 310
    },
    
    /* members for da big image */ 
    inspector: null,
    bigOneSwf: null,
    bigOne: null,

    /* members for da slider */
    arrThumbs: new Array(),
    currentslide: 1,
    pos: 0,
    imgscroll: null,

    /* members for da lightbox */
    bigImgs: new Hash(),
//    overlay: null,
    closeBtn: null,
	
	useOverlay: false,

    lbImg: null,
    swfDiv: null,

    initialize: function(options){
        this.setOptions(options);

        this.inspector = this.options.galContainer.getElement(this.options.inspectorClass);
        if(!this.inspector){
            return false;
        }
        this.bigOne = this.inspector.getElement(this.options.bigOneClass);

        this.lbImg = new Element('img');

        this.buildSwfObj();

        /* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
        if(this.setSlider()){

        /* Preparing the images/objects */
            this.loadImage();
        }else{
            if(this.bigOne.hasClass('panorama')){
                this.buildBigOneSwf();
            }
        }

        /* lightbox */
        this.buildLightbox();
    },

    buildSwfObj: function(){
        this.swfDiv = new Element('div', {id: 'swfDiv'}).setStyle('width', '310');
        this.swfDiv.set('tween', {duration: 'long', link: 'chain'});
    },
    
    loadImage: function(){
        var images = this.options.galContainer.getElement(this.options.thumbContainer).getElements('li');
        images.each(function(a){
            var con_img = a.getElement('img');
            if(this.bigOneSwf == null && con_img.hasClass('panorama')){
                this.buildBigOneSwf();
            }
            this.arrThumbs.push(con_img);
            con_img.addEvent('click',this.changeImage.bind(this));
        }.bind(this));
    },

    changeImage: function(e){
        var e = new Event(e);
        e.stop();
        if(e.target.hasClass('panorama') && this.inspector.getElement('div') == null){
            this.bigOneSwf.replaces(this.bigOne);
        }else{
            if(this.inspector.getElement('div') != null && !e.target.hasClass('panorama')){
                this.bigOne.replaces(this.bigOneSwf);
            }
            if(this.inspector.getElement('div') == null){
                var string = e.target.get('src');
                var string_end = string.replace('height=70','width=' + this.options.bigOneSize);
                this.bigOne.set('src',string_end);
                this.inspector.getElement('img').removeClass('panorama');
                this.inspector.getElement('img').setProperty('rel', e.target.getProperty('rel'));
            }
        }
    },

    buildBigOneSwf: function(){
        var p = this.bigOne.getParent();
        this.bigOneSwf = new Element('div',{'class': 'panoramaImg'})
            .adopt(new Element('a').set('text','Panoramaansicht öffnen').set('href','#'))
            .adopt(this.bigOne.clone());
        this.bigOneSwf.getElement('img')
			.set('src',this.bigOne.get('src'))
			.setProperty('class', this.bigOne.getProperty('class'))
			.setProperty('rel', this.bigOne.getProperty('rel'))
			.removeProperty('width')
			.removeProperty('height');

        this.bigOne.destroy();
        p.adopt(this.bigOneSwf);
    },

    setSlider: function(){
        var wrapper = this.options.galContainer.getElement(this.options.thumbContainer);
        if(!wrapper){
            return false;
        }
        var x = wrapper.getSize().x;
        var sumX = 0;
        wrapper.getElements('li').each(function(li){
            var cLiX = li.getSize().x;
            x = x - cLiX;
            sumX = sumX + cLiX+2;
        });
        if(x > 0){
            this.options.galContainer.getElement('.moveleft').destroy();
            this.options.galContainer.getElement('.moveright').destroy();
            return true;
        }else{
            this.options.slides = Math.ceil(sumX/this.options.offset);
        }
        this.imgscroll = new Fx.Scroll(this.options.galContainer.getElement(this.options.thumbContainer), {
            offset: {'x': 0, 'y': 0},
            transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
        }).toLeft();


        this.options.galContainer.getElement('.moveleft').addEvent('click', function(event) {
            event = new Event(event).stop();
            if(this.currentslide == 1) return;
            this.currentslide--;				// CURRENT SLIDE IS ONE LESS
            this.pos += -(this.options.offset);                 // CHANGE SCROLL POSITION
            this.imgscroll.start(this.pos);			// SCROLL TO NEW POSITION
        }.bind(this));

        this.options.galContainer.getElement('.moveright').addEvent('click', function(event) {
            event = new Event(event).stop();
            if(this.currentslide > this.options.slides) return;
            this.currentslide++;
            this.pos += this.options.offset;
            this.imgscroll.start(this.pos);
        }.bind(this));

        return true;
    },

    buildLightbox: function(){
//		if(this.useOverlay){
//			this.overlay = window.overlay;
//		}
        if($('closeBtn') != null){
            this.closeBtn = $('closeBtn');
        }else{
            this.closeBtn = new Element('a', {'id': 'closeBtn'}).set('href','#');
            this.closeBtn.setStyle('opacity', '0.0');
            this.closeBtn.set('tween', {duration: 'long', link: 'chain'});
            this.closeBtn.addEvent('click',this.boxClose.bind(this));
            document.body.adopt(this.closeBtn);
        }
        this.inspector.addEvent('click', this.boxClick.bind(this));
    },
    
    boxClick: function(e){
        var e = new Event(e).stop();
        var t = e.target;
		window.fireEvent('resize');
        if(t.get('tag') == 'img' && !t.hasClass('panorama')){
            this.showOverlay('Großansicht', t);
            this.lbImg = this.cloneImg(t);
            this.showImg(t);
            if(this.arrThumbs.length > 0){
                this.lbImg.store('gallery',this);
                this.closeBtn.store('gallery',this);
            }
        }else{
            if(t.get('tag') == 'a'){
                this.showOverlay('Panoramaanischt', t.getNext('img'));
                this.cloneImg(t.getNext('img'));
                this.showSwf(t.getNext('img'));
                if(this.arrThumbs.length > 0){
                    this.swfDiv.store('gallery',this);
                    this.closeBtn.store('gallery',this);
                }
            }
        }
    },

    showOverlay: function(txt, htmlObj){
        var cPosTop = -18;
        var cPosLeft = 152;
        var bodyEl = $(document.body);
        var elPos = htmlObj.getCoordinates();
        var rel = parseInt(htmlObj.getProperty('rel'));
        if($type(rel) != 'number'){
            rel = 676;
            if(Browser.Engine.trident){
                cPosTop = -14;
				if(Browser.Engine.version == 8){
					cPosTop = -16;
					cPosLeft = 146
				}else{
					cPosLeft = 151;
				}
            }
        }
        var size = bodyEl.getScrollSize();

        this.closeBtn.set('text', txt + ' schließen');
        this.closeBtn.setStyles({
            'top': (elPos.top + cPosTop),
            'left': (elPos.right - cPosLeft),
            'display': 'block'
        });

        this.closeBtn.tween('opacity','1');
        this.closeBtn.setStyle('left',elPos.left + rel - (cPosLeft));
		$('OverlayContainer').setStyle('display','block');
//		this.overlay.show();
		$('OverlayContainer').addEvent('click', this.boxClose.bind(this));
    },

    showImg: function(t){
        var cSize = t.getSize();

        this.lbImg.setStyles({
            'width': cSize.x,
            'height': cSize.y
        })
        var w = parseInt(this.lbImg.getProperty('rel'));
        var nSize = {x: w, y: Math.round((cSize.y*w)/cSize.x)};
        var cSrc = this.lbImg.getProperty('src');
        var nSrc = cSrc.replace(/width=310/,'width=' + nSize.x);
		this.lbImg.tween('opacity','1').setStyle('width', nSize.x).setStyle('height',nSize.y).set('src', nSrc);
    },

    showSwf: function(img){
        var src = img.getProperty('rel');
        var height = img.getSize().y;
        var imgCloned = this.closeBtn.getNext();
        
//        this.swfDiv.setProperty('style', imgCloned.getProperty('style'));
		this.swfDiv.setStyle('top', imgCloned.getStyle('top'));
		this.swfDiv.setStyle('left', imgCloned.getStyle('left'));
        this.swfDiv.replaces(this.closeBtn.getNext('img'));
        this.swfDiv.setStyles({
            'opacity': '0.0',
            'height': '290px',
            'width': '310px',
            'z-index': 6,
            'border': '1px solid #91B6D8',
			'background-color': '#fff',
            'padding': '5px',
            'visibility': 'visible',
			'position': 'absolute'
        });

        this.swfDiv.tween('opacity', '1').setStyle('width', '676px');

        this.swfDiv.adopt($('loading'));
		$('loading').setStyle('position', 'absolute')
			.setStyle('z-index', 1)
            .setStyle('left','0')
			.tween('opacity',1);

        var swfHtml = '<object data="' + src + '" id="Panorama" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="676" height="290"><param name="src" value="' + src + '"><param name="movie" value="' + src + '"><param name="WMode" value="Transparent"><param name="Quality" value="High"><embed width="676" height="290" src="' + src + '" /></object>' + this.swfDiv.get('html');
        this.swfDiv.set.delay(2000, this.swfDiv, ['html', swfHtml]);

    },

    cloneImg: function(imgToShow){
        var imgPos = imgToShow.getCoordinates();

        var cClone = imgToShow.clone();
        var cTop = -6;
        var cLeft = -6;
        if(imgToShow.getPrevious() != null && Browser.Engine.trident){
			cTop = 0;
			if(Browser.Engine.version == 8){
				cLeft = 0;
			}else{
				cLeft = -5;
			}
        }
        $(document.body).adopt(cClone);
        cClone.setStyles({
            'top':  (imgPos.top + cTop),
            'left':  (imgPos.left + cLeft),
            'position': 'absolute',
            'opacity': '0',
            'z-index': 6,
            'border': '1px solid #91B6D8',
			'background-color': '#fff',
            'padding': '5px',
            'visibility': 'visible'
        });
        cClone.setProperty('rel',imgToShow.getProperty('rel'));
        cClone.setProperty('src',imgToShow.getProperty('src'));
        return cClone;
    },
    
    boxClose: function(e){
        var e = new Event(e).stop();
//		this.overlay.hide();
		if($('closeBtn').getStyle('visibility') == 'hidden' || $('closeBtn').getStyle('opacity') < 1){
			return '';
		}
		$('OverlayContainer').setStyle.delay(1000,$('OverlayContainer'),['display','none']);
//		$('closeBtn').setStyle.delay(2000,$('closeBtn'),['display','none']);
        $('closeBtn').tween('opacity','0');
        
        if($('closeBtn').getNext('img')){
            this.hideImg();
        }
        if($('closeBtn').getNext('div')){
            this.hideSwf();
        }
        this.removeImg();
    },

    hideImg: function(){
        var tmpGal = this.closeBtn.retrieve('gallery');
        if($type(tmpGal.bigOne)){
            var bSize = tmpGal.bigOne.getSize();
            tmpGal.lbImg.tween('height',bSize.y).tween('width', bSize.x);
        }
    },

    hideSwf: function(){
        var tmpGal = this.closeBtn.retrieve('gallery');

		if($('swfDiv')){
            $('loading').inject($('header'),'before');
			$('swfDiv').empty();
		}
    },

    removeImg: function(){
        $('closeBtn').tween('opacity','0.0');
        var nx = $('closeBtn').getNext('img');
        if(!nx){
            nx = $('closeBtn').getNext('div');
			if($type(nx)){
				nx.tween('opacity',0);
				nx.empty();
				nx.dispose.delay(2000, nx);
			}
        }
		if($type(nx)){
			if(nx.get('tag') == 'img'){
				nx.tween('opacity','0');
				nx.destroy.delay(2000, nx);
			}
		}
    }
});