var DynTab = new Class ({
        Implements: [Options, Events],
        initialize: function(domroot, headline, options) {
            this.setOptions(options);
            if (!this.options.minElements) this.options.minElements = 3;
            if (!this.options.keepFreeBelow) this.options.keepFreeBelow = 0;
            this.element = document.id(headline);
            this.tabContainer = document.id(domroot);
            this.swappersContainer = this.element.getElement(this.options.swappersContainer);
            this.bound = {
                activatePage:this.activatePage.bind(this)
            };
        },
        reBuildPanels: function() {
            this.panels = $$(this.options.panelClass);
            var distance = 80;
            if (this.panels.length>1) {
                distance = this.panels[1].getPosition().y -
                            this.panels[0].getPosition().y;
            }
            var height = window.getSize().y - 470 - this.options.keepFreeBelow.toInt();
            var elPerPage = (height/distance).floor();
            if (this.options.keepElementsFree) {
                elPerPage -= this.options.keepElementsFree;
            } else if (this.options.maxElements) {
                elPerPage = elPerPage >= this.options.maxElements ? this.options.maxElements : elPerPage;
            }
            elPerPage = elPerPage >= this.options.minElements ? elPerPage : this.options.minElements;
            var pages = (this.panels.length/elPerPage).ceil();
            //dbug.log('elements: '+(this.panels.length)+' elperpage:'+elPerPage+' pages:'+pages);
            if (pages>1) {
                for (var i=1; i<=pages; i++) {
                    pager = new Element('b', {
                            'class': (i<pages ? 'pager': 'pager last'),
                            'html':i.toString()
                    });
                    pager.inject(this.swappersContainer,'bottom');
                }
            }
            var page = 0; elcount=0;
            this.panels.each( function(el) {
                    dbug.log("panel "+el.getElement('h2')+"stores page:"+page);
                    el.store('page',page);
                    elcount ++;
                    if (elcount >= elPerPage) {
                        page ++;
                        elcount = 0;
                    }
            }, this);
            //this.swappersContainer.setStyle('width', page*28+'px');
            this.swappers = this.swappersContainer.getElements('b.pager');
            this.swappers.addEvent('click', this.bound.activatePage);
            this.activatePage({'target':{'get':function() {return '1'}}});
        },
        activatePage: function(event) {
            var page = event.target.get('html').toInt()-1;
            var last;
            this.panels.each( function (el) {
                    //dbug.log('page:'+el.retrieve('page'));
                if (el.retrieve('page').toInt()==page) {
                    el.setStyle('display', 'block');
                    last = el;
                } else {
                    el.setStyle('display', 'none');
                };
            }, this);
            if ($chk(last)) last.addClass(this.options.lastPanelClass);
            for (var i=0; i<this.swappers.length; i++) {
                if (i==page) {
                    this.swappers[i].addClass(this.options.selected);
                } else {
                    this.swappers[i].removeClass(this.options.selected);
                }
            }
        }
});

var LinkBox = new Class ({
        Implements: [Options],
        initialize: function(domroot, options) {
            this.setOptions(options);
            if (!this.options.path_img) this.options.path_img='./image/';
            this.element = document.id(domroot);
            this.bound = {
                mouseenter: this.mouseenter.bind(this),
                //mouseleave: this.mouseleave.bind(this),
                mouseleaveLinkbox: this.mouseleaveLinkbox.bind(this)
            };
            var opt = this.options;
            var emblems = this.element.getElements(opt.emblemclass);
            this.emblems = emblems;
            this.element.setStyles({
                    height:opt.img.height.toInt()+opt.legend.height.toInt()+opt.vsep.toInt()+opt.titleheight.toInt()+'px',
                    //border:'solid black 1px', 
                    padding:'0',width:opt.legend.width
                    //border:'solid black 2px'
            });
            this.element.addEvents({
                    mouseleave:this.bound.mouseleaveLinkbox
            });
            var legend = this.element.getElement('p');
            var images = this.element.getElements('img');
            images.addEvents({
                    mouseenter:this.bound.mouseenter
                  //  mouseleave:this.bound.mouseleave
            });
            legend.addEvents({
                    mouseenter:this.bound.mouseleaveLinkbox
            });
            this.element.getElements('span').addEvents({
                    mouseenter:this.bound.mouseleaveLinkbox
            });
            images.setStyles(opt.img);
            for (var i=0;i<images.length;i++) {
                images[i].setStyles({ 'position':'absolute', 'top':opt.img.top,
                        'visibility':'hidden',
                        'left':i%4*opt.img.width.toInt()+(i%4*opt.hsep.toInt())+'px'
                });
                images[i].store('pos', i%4);
            };
            emblems.setStyle('z-index',2);
            this.element.getElements('a').getElement('img').setStyle('margin-left', '0px');
            var lstyles = {
                    position:'absolute',
                    left:'0px',
                    top:opt.img.height.toInt()+opt.vsep.toInt()+opt.titleheight.toInt()+'px',
                    margin:'0px',
                    padding:'0px',
                    display:'block'
            };
            lstyles = $merge(lstyles, opt.legend); 
            this.element.getElements('a').getElement('span').setStyles(lstyles);
            lstyles['z-index']=1;
            legend.setStyles(lstyles);
            emblems.each(this.makeEmblem, this);
        },
        mouseenter: function(event) {            
            pos = event.target.retrieve('pos');
            dbug.log('pos is'+pos);
            var link;
            this.emblems.each(function(img) {
                    dbug.log("emblem:"+img.getParent().get('titel'));
                    if (img.retrieve('pos')==pos) 
                        link=img.getParent();
            }, this);
            var images = this.element.getElements('img');
            images.each(function(img) {
                    if (img.getParent()==link) {
                        img.setStyles({
                            'z-index': 4,
                            'visibility':'visible'
                        });
                    } else {
                        img.setStyles({
                            'z-index': 1,
                            'visibility':'hidden'
                        });
                    }
            }, this);
            this.element.getElements('a span').each(function(span) {
                    if (span==link.getElement('span')) {
                        span.setStyles({
                                'visibility':'visible',
                        'z-index':2});
                    } else {
                        span.setStyles({
                            'visibility':'hidden',
                            'z-index':0
                        });
                    }
            });
            var allLinks = link.getParent().getElements('a');
            allLinks.each(function(a) {
                    if (link!=a) {
                        a.getElement('div').setStyle('display','none');
                    } else {
                        a.getElement('div').setStyle('display','block');
                    }
            });
            this.element.getElement('p').setStyle('visibility','hidden');
        },
        mouseleaveLinkbox: function(event) {
            var link= event.target.getParent();
            var images =this.element.getElements('img');
            images.each( function(img) {
                    if (img.hasClass('emblem')) {
                        img.setStyles({
                            'z-index':2,
                            'visibility':'visible'
                        });                        
                    } else if (img.hasClass('embloe')) {
                        img.setStyles({
                            'z-index':3,
                            'visibility':'visible'
                        });
                    } else {
                        img.setStyles({
                            'z-index':1,
                            'visibility':'hidden'
                        });
                    }
            });
            this.element.getElements('a span').setStyles({
                    'z-index':0,
                    'visibility':'hidden'
            });
            link.getParent().getElements('a div').setStyle('display','block');
            this.element.getElement('p').setStyle('visibility','visible');
        },
        makeEmblem: function(emblem) {
            var parent = emblem.getParent();
            var headline = new Element('div', {
                    'html':parent.get('title')
            });
            headline.setStyles({
                    'position':'absolute',
                    'left':emblem.getStyle('left'),
                    'top':'0px',
                    'width':this.options.img.width,
                    'border': this.options.img.border,
                    'z-index':4,
                    'background-color':emblem.getStyle('background-color') 
            });
            headline.setStyles(this.options.title);
            var color = new Color(headline.getStyle('background-color'));
            if (color.rgbToHsb()[2]>80) {
                var oldcol = new Color(headline.getStyle('color'));
                headline.setStyle('color',oldcol.invert());
            }
            headline.inject(parent,'bottom');
            emblem.setStyle('visibility','visible');
            var opt = this.options;
            dbug.log("path_img:"+this.options.path_img);
            for (var i=0;i<4;i++) {
                var oe = new Element('img', {
                        src:opt.path_img+'LoedigeOE.gif',
                        alt:'',
                        'class':'oe'
                });
                if (i==emblem.retrieve('pos')) {
                    oe.addClass('embloe');
                    oe.setStyle('visibility','visible');
                } else {
                    oe.setStyle('visibility','hidden');
                }
                var width = this.options.img.width.toInt() /2.5;
                oe.setStyles({
                        position:'absolute',
                        border:'none',
                        width: width,
                        left:(i%4*opt.img.width.toInt())+(i%4*opt.hsep.toInt())+this.options.img.width.toInt()-width+4,
                        top:this.options.img.height.toInt()+this.options.titleheight.toInt()-8+'px',
                        'z-index':(i==emblem.retrieve('pos') ? 4:1),
                        'background-color': color
                });
                oe.inject(parent, 'bottom');
            }
        },
        patchDimensions: function(){
            var opt = this.options;
            this.options.img.height = opt.img.height.toInt()+ 2*opt.img['border-width'].toInt()+'px';
            alert (this.options.img.height);
                                        
        }
})

var ImageSwapper = new Class ({
        Implements: [Options],
        options: {
            swapDelay:2400
        },
        initialize: function(domroot, options) {
            this.setOptions(options);
            this.element = document.id(domroot);
            this.images = this.element.getElements('li img');
            this.ymax =0;
            this.imageCounter = 0;
            this.currentImage = 0;
            this.images.each(this.initimg, this);
            this.element.setStyles({
                    'display':'block',
                    'height':this.ymax
            });
            this.bound = {
                monitorOver: this.monitorOver.bind(this),
                monitorLeave: this.monitorLeave.bind(this),
                autoSwap: this.autoSwap.bind(this)
            }
            if ($chk(this.options.links)) {
                this.links = $$(this.options.links);
                this.links.each(this.monitorlink, this);
            }
            if (this.options.swapDelay) {
                this.bound.autoSwap.periodical(this.options.swapDelay);
            }
            if ($chk(this.options.colortarget)) {
                // store original background-color
                var t = this.options.colortarget;
                t.store('background-color',t.getStyle('background-color'));
            }
        },
        getImgId: function(sClass) {
            var vals = sClass.split(' ').filter(function(cls) {
                    return cls.test('imgid');
            });
            if (vals.length) {
                return vals[0].split('imgid')[1];
            }
        },
        getSrc: function(sClass) {
            var vals = sClass.split(' ').filter(function(cls) {
                    return cls.test('imgsrc');
            });
            if (vals.length) {
                return vals[0].split('imgsrc')[1];
            }
        },
        initimg: function(img) {
            if (this.options.img) {
                img.setStyles(this.options.img);
            };
            if (img.getSize().y > this.ymax) this.ymax = img.getSize().y;
            if (this.options.focus && img.hasClass(this.options.focus)) {
                img.setStyle('z-index',2);
            }
            img.store('iid',this.imageCounter);
            img.store('imgid', this.getImgId(img.get('class')));
            img.set('src', this.getSrc(img.get('class')));
            this.imageCounter++;
        },
        monitorlink: function(link) {
            var elLink = link.getElement('a');
            elLink.addEvents({
                    'mouseenter': this.bound.monitorOver,
                    'mouseleave': this.bound.monitorLeave
            });
            elLink.store('imgid', this.getImgId(elLink.get('class')));
            
        },
        monitorOver: function(event) {
            var imgid = event.target.retrieve('imgid');
            this.images.each( function(img) {
                    if (img.retrieve('imgid')==imgid) {
                        img.setStyle('z-index',2);
                        this.currentImage = img.retrieve('iid');
                    } else {
                        img.setStyle('z-index',1);
                    }
            }, this);
            if ($chk(this.options.colortarget)) {
                this.options.colortarget.setStyle('background-color',
                    event.target.getStyle('background-color'));
            }
            this.over = true;
        },
        monitorLeave: function(event) {
            this.over = false;
            if (this.options.focus) {
                this.images.each( function(img) {
                        if (img.hasClass(this.options.focus)) {
                            img.setStyle('z-index',2);
                        } else {
                            img.setStyle('z-index',1);
                        }
                }, this);
            }
            if ($chk(this.options.colortarget)) {
                var t = this.options.colortarget;
                t.setStyle('background-color',t.retrieve('background-color'));
            }
        },
        autoSwap: function() {
            if (!this.over) {
                this.currentImage++;
                this.currentImage = this.currentImage % this.images.length;
                this.images.each(function(img) {
//                        dbug.log('autoSwap '+this.currentImage+' iid'+img.retrieve('iid'));
                        if (img.retrieve('iid')==this.currentImage) {
                            img.setStyle('z-index', 2);
                        } else {
                            img.setStyle('z-index',1);
                        }
                }, this);
            }
        }
});

function makeLupe(lupe) {
    new ImageZoom(lupe);
}
var ImageZoom = new Class ({
        initialize: function (lupe) {
            var mask = $('MaskImageZoom');
            if (!$chk(mask)) {
                var co = $('content');
                mask = new Element('div',{'id':'MaskImageZoom'}).setStyles({
                        position:'absolute',
                        top:co.getStyle('top'),
                        height:co.getStyle('height').toInt()+5+'px',
                        //right:co.getStyle('right'),
                        left:co.getStyle('left'),
                        bottom: co.getStyle('bottom').toInt()-1+'px',
                        width: co.getStyle('width').toInt()-1+'px',
                        'z-index':0,
                        background:'white',
                        opacity:'0'
                }).inject($('content').getParent());                
            }
            this.mask = mask;
            var closer = $('MaskMagicCloser');
            if (!$chk(closer)) {
                closer = new Element('div', {'id':'MaskMagicCloser','class':'icon'}).setStyles({
                            'height':30,
                            'width':30,
                            'z-index':0,
                            'background':'red',
                            'opacity':'0'
                    }).inject($('content').getParent());
                    
            }
            this.closer = closer;                    
            var icon = lupe.getElement('img.icon');
            var full = lupe.getElement('img.fullsize');
            this.icon = icon;
            this.full = full;
            icon.store('fullsize', full);
            full.store('icon', icon);
            this.bound = { 
                hider:this.hider.bind(this),
                raiser:this.raiser.bind(this)
            };
            icon.addEvent('mouseenter', this.bound.raiser);
            this.preview = lupe.getNext('img');
            this.preview.addEvent('click', this.bound.raiser);
        },
        hider: function(event) {
            event.stop();
            var el = event.target;
            if (el.hasClass('icon')) {
                var icon = el;
                var full = el.retrieve('fullsize');
                icon.setStyles({'z-index':0, 'opacity':0});
            } else if (el.hasClass('fullsize')) {
                var full = el;
                var icon = full.retrieve('icon');
            } else {
                var full = el.retrieve('fullsize');
                var icon = el.retrieve('icon');
            }
            full.fade(0);
            this.mask.fade(0);
            full.removeEvent('mouseleave', this.bound.hider);
            icon.removeEvent('mouseleave', this.bound.hider);
            //dbug.log('full ('+full.get('src')+') has class icon ('+full.hasClass('icon')+' )left');
        }, 
        raiser: function(event) {                              
            event.stop();
            var img = this.full.dispose();
            img.inject($('content').getParent(),'bottom');
            img.position({
                    'relativeTo':this.mask,
                    'offset':{x:-14}
            });                                                        
            img.setStyles({
                    'position':'absolute',
                    'display':'block',
                    'opacity':'0',
                    'z-index':901
            }); 
            var x = this.full.getPosition().x;
            var y = this.full.getPosition().y;
            var dx = this.full.getSize().x;
            var dy = this.full.getSize().y;
            var sc=$('content').retrieve('Scrollbar');
            var sy=sc ? sc.position.now*sc.scrollRatio :0;
            //y = y + sy;
            //dbug.log('this is'+this+' this.bound'+this.bound);
            if (event.page.x<x || event.page.x>(x+dx) ||
                event.page.y<y || event.page.y>(y+dy)) 
            {
                //icon.addEvent('mouseleave',this.bound.hider);
                this.closer.position({
                        'relativeTo':this.icon
                        //,'offset':Browser.Engine.trident ? {y:0}: {y:sy}
                        ,'offset': {y:-sy}
                });
                this.closer.setStyles({
                        'z-index':902,
                        'opacity':'0.01'
                });
                this.closer.addEvent('mouseleave', this.bound.hider);
                this.full.store('icon', this.closer);
                this.closer.store('fullsize',this.full);
            }
            
            if (event.target == this.preview) {
                this.preview.addEvent('mouseleave', this.bound.hider);
                this.preview.store('icon', this.closer);
                this.preview.store('fullsize',this.full);
            }
            this.full.addEvent('mouseleave', this.bound.hider);
            this.mask.setStyle('z-index',900);
            this.mask.fade(0.7);
            this.full.fade(1);
        }
});

function makePopup(link) {
    new PopOpener(link);
}
var PopOpener = new Class ({
        initialize: function (link) {
           this.getVals(link.get('class'));
           this.bound = {
               opener: this.opener.bind(this)
           };
           link.addEvent('click', this.bound.opener);
           this.target = link.getProperty('href');
           //link.setProperty('href','');
        },
        getVals: function(sClass) {
            var vals = sClass.split(' ').filter(function(cls) {
                    return cls.test(':');
            });
            vals.each(function(val) {
                    var parts = val.split(':');
            if (parts[0]=='pw') this.pop_width=parts[1];
            else if(parts[0]=='ph') this.pop_height=parts[1];
            }, this);
        },
        opener: function(event) {
            //dbug.log("clicked "+etarget+" href="+event.target.getProperty('href'));
            var popup = window.open(this.target,'extern',
                'width='+this.pop_width+', height='+this.pop_height);
            popup.focus();
            event.stop();
        }
});