var Tansey = new Abstract({
//1.2 var Tansey = new Hash({
    selection: null,
    getImageSrc: function(src) {
        if (window.location.protocol != 'file:') return src;
        if (src.indexOf('file:') != -1) return src;
        var location = String(window.location);
        var base = location.substr(0,location.indexOf('tansey.cdrom')+12);
        var result = base+'/'+src.replace(/\.\.\//g,'');
        return result;
    },
    setImageSrc: function(img, src, container){
        src = Tansey.getImageSrc(src);
        if ($type(container)=='element' && window.location.protocol != 'file:'){
            Tansey.showLoading(container);
            $(img).addEvent('load',Tansey.handleImageLoaded.pass([img,container]));
        }
        $(img).src = src;
    },
    showLoading: function(container){
        container = $(container);
        if(container.getTag()=='img' && (container.id == 'zoom-image' || container.hasClass('lighttable-zoom-image'))){
            container = $(container.getParent());
        }
        var coord = container.getCoordinates();
        if (!Tansey.loadIndicator){
            Tansey.loadIndicator = new Element('div',{
                'class': 'load-indicator',
                'styles':{
                    'position':'absolute',
                    'display':'none',
                    'z-index':'1000'
                }
            }).inject(document.body);
        }
        var xOffset = Math.floor((coord.width-32)/2);
        var yOffset = Math.floor((coord.height-32)/2);
        Tansey.loadIndicator.setStyles({
            'display':'block',
            'left':(coord.left+xOffset)+'px',
            'top':(coord.top+yOffset)+'px'
        });
    },
    handleImageLoaded: function(img, container) {
        img = $(img);
        img.removeEvents('load');
        Tansey.loadIndicator.setStyle('display','none');
    },
    setImageButtonSrc: function(img, src, button, buttons){
        Tansey.setImageSrc(img,src, $(img));
        buttons = $$(buttons || '.img-button');
        button = $(button);
        ['img-0-selected','img-1-selected','img-2-selected','img-3-selected','img-4-selected','img-5-selected'].each(function(className) {
            buttons.removeClass(className);
        });
        if (match = button.className.match(/(img-\d)/i)){
            button.addClass(match[1]+'-selected');
        }
    },
    ieFix: function(selector,callback) {
        //debugger; IE
        selector = selector || '.ie-fix';
        var valid = function(value) {
            return value && value != 'auto' && value != 'none';
            }
        $$(selector).each(function(el){
           var styles = el.getStyles('min-height','min-width');
           for (var key in styles) {
                var value = styles[key];
                switch(key) {
                    case 'min-height': if (valid(value)) el.setStyle('height',value); break;
                    case 'min-width': if (valid(value)) el.setStyle('width',value); break;
                }
           }
           if(callback) callback(el);
        });
    },
    pageInit: function() {
        //if (window.ie6) this.ieFix();
        if (window.ie6) try {document.execCommand("BackgroundImageCache", false, false);} catch(e){};     
        this.selection = new Hash.Cookie('leuchttisch',{'path':'/'});    
        var leuchttisch = $('leuchttisch');
        var leuchttischAdd = $('leuchttischAdd');
        this.orgHTML = new Element('div',{styles:{'position':'absolute','display':'none'}}).inject(document.body);
        this.bound = {
            leuchttisch: this.doShowCollectedClick.bind(this),
            leuchttischAdd: this.doAddCollectedClick.bind(this)
        }
        if (leuchttisch) leuchttisch.addEvent('click',this.bound.leuchttisch);
        if (leuchttischAdd) leuchttischAdd.addEvent('click',this.bound.leuchttischAdd);
        this.setLeuchttischText();
        this.resize();
        window.addEvent('resize',Tansey.resize.bind(Tansey));
    },
    resize: function() {
    
        return;
        var content = $('content').getElement('div.content-container');
        if (!content) return;
        var offsetTop = content.getTop();
        var footerHeight = $('footer').offsetHeight;
        var windowHeight = window.getHeight();
        var offset = 35;
        var minHeight = Math.max(400,windowHeight-offsetTop-footerHeight-offset);
        var attr = window.ie6 ? 'height' : 'min-height';
        content.setStyle(attr,minHeight);
    },
    doShowCollectedClick: function() {
        if (!this.lighttable) {
            this.lighttable = new Lighttable($('content'));
        }
        this.lighttable.show();
    },
    doAddCollectedClick: function() {   
        if (currentId && currentImage) {
            this.selection.set(currentId,currentSubimages);
            this.setLeuchttischText();
        }
    },  
    setLeuchttischText: function() {
        var leuchttisch = $('leuchttisch');
        if (!leuchttisch) return;
        //var text = leuchttisch.innerHTML;
        var text = Translate._('Leuchttisch');
        leuchttisch.setHTML(text+' ('+this.selection.length+')');
        //1.2 leuchttisch.setHTML('Leuchttisch ('+this.selection.hash.getKeys().length+')');
    },  
    loadMiniature: function(mid, tab) {
        tab = tab || 'miniatur';
        var effect = $('content').effect('opacity',{duration:250}).start(1,0);
        $('content').loadContent('/miniatures/ajax/mid/'+mid+'/tab/'+tab,{method:'get',onComplete:function() {
            $('content').effect('opacity',{duration:250}).start(0,1);
            $$('#content .tab-control')[0].getElements('a').each(function(elem, num) {
                elem = $(elem); 
                var href = elem.href;
                elem.removeAttribute('href');
                var tab;
                switch (num) {
                    case 0: tab = 'miniatur'; break;
                    case 1: tab = 'detail'; break;
                    case 2: tab = 'zoom'; break;
                    case 3: tab = 'kuenstler'; break;
                }
                elem.addEvent('click',this.loadMiniature.bind(this,[mid,tab]));
            },this);
            var temp = $('leuchttischAdd');
            if (temp) temp.remove();
            $('content-title').setHTML('Leuchttisch');
        }.bind(this)});
    },
    initZoom: function() {
        this.resize();
        var zoom = $('zoom-container');
        var image = $('zoom-image');
        var height = zoom.getParent().getStyle('height').toInt() - $('zoom-info').offsetHeight -10;
        zoom.setStyles({
            'height':height+'px',
            'clip':'rect(0,650px,'+height+'px,0)' 
        });
        image.makeDraggable();
        image.addEvent('dblclick',Tansey.lightboxShow.bind(Tansey));
    },
    lightboxShow:function(){
        var image = $('zoom-image');
        Lightbox.show.bind(Lightbox,[image.getProperty('src'), image.getProperty('title')])();    
    }
});
var Lighttable = new Class({
    images:{},
    zoomFactor: 100,
    initialize: function(container,options) {
        this.container = $(container);
        this.setOptions(options);
        this.orgHTML = new Element('div');
        this.html = new Element('div',{
            'id':'lighttable-container',
            styles:{
                display:'none',
                position:'absolute'
            }
        }).setHTML(this.getHTML()).inject(document.body);
        this.isReady = false;
        this.bound = {
            mousewheel:this.mousewheel.bind(this)
        }
    },
    show: function() {
        if (Tansey.selection.length==0) return;
        var setHelp = false;
        //1.2 if (Tansey.selection.getKeys()==0) return;
        var height = window.getHeight();
        var width = window.getWidth();
        $('page').setStyle('display','none');
        this.html.setStyles({
            'width':width+'px',
            'height':height+'px',
            'display':'block',
            'overflow':'hidden'
        });
        if (!this.isReady) {
            this.setUp();
            setHelp = true;
        }
        this.droppables.setStyles({
            'width':((width-40)/2)+'px',
            'height':(height-250)+'px'
        });
        this.setImages(); 
        window.document.addEvent('mousewheel',this.bound.mousewheel);
        if (setHelp) {
            this.setHelpText();
        }
    },
    hide: function() {
        this.html.setStyle('display','none');
        $('page').setStyles({'display':'block','opacity':1});
        window.document.removeEvent('mousewheel',this.bound.mousewheel);

    },
    setUp: function() {
        var width = window.getWidth();
        this.droppables = this.html.getElements('div.lighttable-droppables');
        this.droppables.addEvent('drop',this.dragDrop.bind(this));
        this.droppables.addEvent('over',this.dragOver);
        this.droppables.addEvent('leave',this.dragLeave);
        this.zoomSlider = new Slider($('zoom-slider'), $('zoom-knob'), {
            steps: 200,
            onChange: this.zoom.bind(this)
        }).set(100);
        this.isReady = true;
        $('lighttable-close-button').addEvents({
            'click':this.hide.bind(this),
            'mouseenter':function(){this.addClass('over');},
            'mouseleave':function(){this.removeClass('over');}
        });
        $('lighttable-image-remove').addEvents({
            'over':this.dragOver,
            'leave':this.dragLeave,
            'drop':this.dropRemove.bind(this)
        });
        window.document.addEvent('keydown',this.keyDown.bind(this));
        $('lighttable-scroll-left').addEvent('click',this.scrollLeft);
        $('lighttable-scroll-right').addEvent('click',this.scrollRight);
        $('zoom-knob').addEvents({
            'mouseenter':function(){this.addClass('over');},
            'mouseleave':function(){this.removeClass('over');}
        });
        var tds = $('lighttable-footer').getElements('td');
        tds[0].setStyle('width','105px');
        tds[1].setStyle('width','30px');
        tds[2].setStyle('width',(width-200)+'px');
        tds[3].setStyle('width','30px');
        $('lighttable-images').setStyles({
            'width':(width-200)+'px',
            'overflow':'hidden',
            'position':'relative'
        }); 
    },
    scrollLeft: function() {
        var img = $('lighttable-images').getFirst();
        if (!img) return;
        img.inject('lighttable-images');
    },
    scrollRight: function() {
        var img = $('lighttable-images').getLast();
        if (!img) return;
        img.injectTop('lighttable-images');
    },
    keyDown: function(event) {
        event = new Event(event);
        switch(event.code) {
            case 27 : this.hide(); break;
        }
        
    },
    mousewheel: function(event) {
        event = new Event(event);
        var step = this.zoomSlider.step;
        step = Math.min(200,Math.max(0,step+event.wheel*2));
        this.zoomSlider.set(step);
        this.zoom(step);
    },
    zoom: function(step) {
        this.zoomFactor = step;
        this.setImagesSize();
    },
    setImagesSize: function() {
        var width = 760/100*this.zoomFactor;
        var height = 1000/100*this.zoomFactor;
        $each(this.images,function(image, id){
            var xDiff = (image.getStyle('width').toInt()-width)/2;
            var yDiff = (image.getStyle('height').toInt()-height)/2;
            image.setStyles({
                'width':width+'px',
                'height':height+'px',
                'left':(image.getStyle('left').toInt()+xDiff)+'px',
                'top':(image.getStyle('top').toInt()+yDiff)+'px'
            });
            this.imageMove(image);
        },this);
    },
    dropRemove: function(el, obj) {
        var id = el.getProperty('id').substr(4);
        el.setProperty('_removing','1');
        el.subImages = null;
        el.effects({'duration':600,'onComplete':function(el){el._remove=null;el.remove()}}).start({'height':1,'width':1,'opacity':1}); 
        Tansey.selection.remove(id);
        Tansey.setLeuchttischText.bind(Tansey)();
        $('lighttable-image-remove').removeClass('over');
        if (Tansey.selection.length==0) {
            this.hide();
        }
    },
    dragDrop: function(el,obj) {
        var src = el.src.replace('gr1','gr4').replace('01.'+'jpg','04.'+'jpg');
        var drop = obj.overed;
        drop.empty();
        drop.removeClass('over');
        var img = new Element('img',{
                'src':src,
                'class':'lighttable-zoom-image'
        }).inject(drop);
        img.makeDraggable({onDrag:this.imageMove.bind(this)});
        this.images[drop.id] = img;
        el.setStyles({left:0,top:0});
        this.setImagesSize();
        img.setStyles({
            'left':((drop.offsetWidth-img.offsetWidth)/2)+'px',
            'top':((drop.offsetHeight-img.offsetHeight)/2)+'px'
        });
        this.setSubimageIcons(drop, img, el.subImages, src);
    },
    dragOver: function(el,obj) {
        this.addClass('over');
    },
    dragLeave: function(el,obj) {
        this.removeClass('over');
    },
    setSubimageIcons: function(drop, img, subImages, src){
    
        var container, buttonClass;
        if (drop.id=='lighttable-left-image'){
            container = $('lighttable-subimage-container-left');
            buttonClass = 'lighttable-button-left';
        }
        else {
            container = $('lighttable-subimage-container-right');
            buttonClass = 'lighttable-button-right';
        }
        container.empty();
        if ($type(subImages)== 'array' && subImages.length > 0){
            var button = new Element('button',{
                'class':buttonClass+' img-button img-0 img-0-selected'
            }).inject(container);
            button.addEvent('click',Tansey.setImageButtonSrc.pass([img,src,button,'.'+buttonClass]));
            subImages.each(function(value, index){
                var button = new Element('button',{
                    'class':buttonClass+' img-button img-'+(index+1)+''
                }).inject(container);
                button.addEvent('click',Tansey.setImageButtonSrc.pass([img,'/lib/media/images/miniaturen/gr4/img'+value+'_04.jpg',button,'.'+buttonClass]));
            },this);
        }
    },
    imageMove: function(el,obj) {
        var top = el.getStyle('top').toInt();
        var left = el.getStyle('left').toInt();
        var width = el.getStyle('width').toInt();
        var height = el.getStyle('height').toInt();
        var parent = el.getParent();
        var offsetHeight = parent.offsetHeight;
        var offsetWidth = parent.offsetWidth;
        var minTop = Math.min(0,-height+offsetHeight);
        var minLeft = Math.min(0,-width+offsetWidth);
        var maxTop = Math.max(0,(offsetHeight-height)/2);
        var maxLeft = Math.max(0,(offsetWidth-width)/2);

        if (top < minTop) el.setStyle('top',minTop+'px');
        if (top > maxTop) el.setStyle('top',maxTop+'px');
        if (left < minLeft) el.setStyle('left',minLeft+'px');
        if (left > maxLeft) el.setStyle('left',maxLeft+'px');
        if (width < offsetWidth) el.setStyle('left',((offsetWidth-width)/2)+'px');
        if (height < offsetHeight) el.setStyle('top',((offsetHeight-height)/2)+'px');
    },
    dragImageComplete: function(el, obj) {
        if (el.getProperty('_removing')=='1') return;
        el.setStyles({'position':'relative','left':0,'top':0});
        el.inject('lighttable-images');
    },
    dragImageStart: function(el, obj) {
        var position = el.getPosition();
        el.setStyles({'position':'absolute','top':position.y+'px','left':position.x+'px'});
        el.inject(document.body);
    },
    getHTML: function() {
        var html = '';
        html += '<h1>'+Translate._('Leuchttisch')+'</h1>';
        html += '<div id="lighttable-subimage-container-left"></div>';
        html += '<div id="lighttable-subimage-container-right"></div>';
        html += '<div class="content-container">';
        html += '<table id="lighttable" border="0" cellspacing="0" cellpadding="0">';
        html += '   <tbody>';
        html += '       <tr id="lighttable-command"><td colspan="2"><div id="zoom-slider-container"><div id="zoom-slider"><div id="zoom-knob"></div></div></div><div id="lighttable-close-button"><div>'+Translate._('Schließen')+'</div></div></td></tr>';
        html += '       <tr>';
        html += '           <td id="lighttable-left"><div class="lighttable-droppables" id="lighttable-left-image"></div></td>';
        html += '           <td id="lighttable-right"><div class="lighttable-droppables" id="lighttable-right-image"></div></td>';
        html += '       </tr>';
        html += '       <tr><td colspan="2" id="lighttable-footer-td"><table id="lighttable-footer" border="0" cellspacing="0" cellpadding="0"><tr>';
        html += '           <td valign="top"><div id="lighttable-image-remove"></div></td>';
        html += '           <td><div id="lighttable-scroll-left"></div></td>';
        html += '           <td><div id="lighttable-images"></div></td>';
        html += '           <td><div id="lighttable-scroll-right"></div></td>';
        html += '       </tr></table></td></tr>';
        html += '   </tbody>';
        html += '</table>';
        html += '</div>';
        return html;
    },
    setHelpText: function() {
        var text='';
        if (Language=='en') {
            text += 'To watch details, drag a miniature here.<br />';
            text += 'Afterwards zoom in and out freely by using the red button<br />';
            text += 'or the mousewheel.<br />';
        }
        else {
            text += 'Ziehen Sie mit der Maus eine Miniatur in diese Fläche.<br />';
            text += 'Anschließend können Sie die Abbildung vergrößern und verkleinern.<br />';
            text += 'Benutzen Sie hiefür den roten Knopf (oben) oder das Mausrad.<br />';
        }
        this.droppables.each(function(element) {
            var div = new Element('div',{
                'class':'lighttable-help',
                'styles':{
                }
            }).injectInside(element).setHTML(text);
            div.setStyle('padding-top',Math.floor((element.getStyle('height').toInt()-div.offsetHeight)/2)+'px');
        });
    },
    setImages: function(selection) {
        selection = selection || Tansey.selection;
        var container = $('lighttable-images');
        var droppables = this.droppables.copy();
        droppables.push($('lighttable-image-remove'));
        container.empty();
        selection.each(function(subImages,id){
        //1.2 selection.hash.each(function(src,id){
            var img = new Element('img',{
                'src':Tansey.getImageSrc('/lib/media/images/miniaturen/gr1/img'+id+'_01.jpg'),
                'id':'img-'+id,
                'class':'lighttable-image',
                styles:{
                    position:'relative',
                    left:0,
                    top:0
                }
            }).inject(container);
            img.subImages = subImages;
            img.makeDraggable({
                'droppables':droppables,
                'onComplete':this.dragImageComplete,
                'onBeforeStart':this.dragImageStart  
            }); 
        },this);
    }
});
Lighttable.implement(new Options());
window.addEvent('load',Tansey.pageInit.bind(Tansey));