var Gallery = function () {
    for (var i=0;i<this.pics.length;i++) {
        var pic = this.pics[i];
        var activator = document.getElementById(this.pics[i].thumb.picId)
        eventHandler.addEvent(activator, 'click', function (x) {
            return function (e) {
                e=eventHandler.getEvent(e);
                e.preventDefault();
                this.current = x;
                this.initGallery(this.pics[x]);
            }.bindTo(this);
        }.call(this, i))
    }
    this.lastUsedEffect = '';
    this.back.src = this.path+this.backImg;
    this.forward.src = this.path+this.forwardImg;
    this.off.src = this.path+this.offImg;
    this.showcase.setOpacity(1);
    this.shadow.NE.renderIn(this.showcase);
    this.shadow.E.renderIn(this.showcase);
    this.shadow.SE.renderIn(this.showcase);
    this.shadow.S.renderIn(this.showcase);
    this.shadow.SW.renderIn(this.showcase);
    this.bg.setOpacity(this.bgOpacity);
    this.bg.renderIn(this.showcase);
    eventHandler.addEvent(this.showcase, 'render', this.setDimensions.bindTo(this));
    eventHandler.addEvent(this.showcase, 'growready', this.growreadyonconstruct = function () {
        if (userAgent.app == 'MSIE' && userAgent.version < 7) this.back.renderIn(this.showcase);
        this.initEvents();
        if (userAgent.app == 'MSIE' && userAgent.version < 7) this.back.remove();
    }.bindTo(this));
    this.initInfoBox();
}
Gallery.prototype.effects = ['fade','grow','slideIn'];
Gallery.prototype.path = 'images/bildergalerie/';
Gallery.prototype.bgOpacity = .6;
Gallery.prototype.backImg = 'back_2.png';
Gallery.prototype.forwardImg = 'forward_2.png';
Gallery.prototype.offImg = 'off.png';
Gallery.prototype.proximityTreshold = 100;
Gallery.prototype.back = renderer.createElement('img', {
        'className':'galleryButton iepngfix',
        'rendered':false,
        'id':'galleryButtonBack'
    })
Gallery.prototype.forward = renderer.createElement('img', {
        'className':'galleryButton iepngfix',
        'rendered':false,
        'id':'galleryButtonForward'
    })
Gallery.prototype.off = renderer.createElement('img', {
        'className':'galleryButton iepngfix',
        'rendered':false,
        'id':'galleryButtonOff'
    })
Gallery.prototype.showcase = renderer.createElement('div', {
    'id':'galleryShowcase'
})
Gallery.prototype.bg = renderer.createElement('div', {
    'id':'galleryShowcaseBg'
})
Gallery.prototype.imgBorder = renderer.createElement('div', {
    'id':'galleryPicBorder'
})
Gallery.prototype.img = renderer.createElement('img', {
    'className':'galleryPic'
});
Gallery.prototype.buttonEffect = userAgent.app == 'MSIE' ? 'grow' : 'fade';


Gallery.prototype.shadow = {
    'NE' : renderer.createElement('div', {
        'id':'shadowNE',
        'className':'shadow iepngfix'
    }),
    'E' : renderer.createElement('div', {
        'id':'shadowE',
        'className':'shadow iepngfix'
    }),
    'SE' : renderer.createElement('div', {
        'id':'shadowSE',
        'className':'shadow iepngfix'
    }),
    'S' : renderer.createElement('div', {
        'id':'shadowS',
        'className':'shadow iepngfix'
    }),
    'SW' : renderer.createElement('div', {
        'id':'shadowSW',
        'className':'shadow iepngfix'
    })
}



Gallery.prototype.initGallery = function (pic) {
    eventHandler.addEvent(this.img, 'load', this.imgloadreadyonconstruct = function () {
        this.showcase.setOpacity(1);
        this.showcase.renderIn(document.body, 'grow');
    }.bindTo(this))
    libScreen.dim(false, 1, this.show.bindTo(this, pic));
}
Gallery.prototype.initEvents = function () {
    eventHandler.addEvent(document, 'mousemove', this.move = function (e) {
        e=eventHandler.getEvent(e);
        this.handleProximity(this.calcProximimity(e));
    }.bindTo(this));
    if (!this.alreadyInitialized) {
        this.alreadyInitialized = true;
        eventHandler.addEvent(this.back, 'render', function () {
            this.back.rendered = !this.back.rendered;
        }.bindTo(this))
        eventHandler.addEvent(this.forward, 'render', function () {
            this.forward.rendered = !this.forward.rendered;
        }.bindTo(this))
        eventHandler.addEvent(this.off, 'render', function () {
            this.off.rendered = !this.off.rendered;
        }.bindTo(this))
        eventHandler.addEvent(this.back, 'remove', function () {
            this.back.rendered = !this.back.rendered;
        }.bindTo(this))
        eventHandler.addEvent(this.forward, 'remove', function () {
            this.forward.rendered = !this.forward.rendered;
        }.bindTo(this))
        eventHandler.addEvent(this.off, 'remove', function () {
            this.off.rendered = !this.off.rendered;
        }.bindTo(this))
        eventHandler.addEvent(this.back, 'click', this.goBackWrapper = function () {
            this.goBack();
        }.bindTo(this));
        eventHandler.addEvent(this.forward, 'click', this.goForwardWrapper = function () {
            this.goForward();
        }.bindTo(this));
        eventHandler.addEvent(this.off, 'click', function () {
            this.destruct();
        }.bindTo(this));
    }
    eventHandler.removeEvent(this.img, 'load', this.imgloadreadyonconstruct);
}
Gallery.prototype.show = function (pic) {
    this.img.setOpacity(1);
    this.loadPic(pic);
    this.img.renderIn(this.imgBorder);
    this.imgBorder.renderIn(this.showcase);
    this.setInfoBoxText(pic);
    this.infoBox.setOpacity(1);
    this.infoBox.renderIn(this.bg);
}
Gallery.prototype.loadPic = function (pic) {
    var d = new Date;
    this.img.src = pic.thumb.picUrl+'?'+d.getTime();
    this.img.style.width = pic.width + 'px';
    this.img.style.height = pic.height + 'px';
}

Gallery.prototype.loadNewPic = function (pic) {
    eventHandler.removeEvent(this.back, 'click', this.goBackWrapper);
    eventHandler.removeEvent(this.forward, 'click', this.goForwardWrapper);
    var effectsIndex, effectParams = {};
    do {
        effectsIndex = (Math.round(Math.random()*(this.effects.length-1)));
    } while (this.lastUsedEffect == this.effects[effectsIndex]);
    this.lastUsedEffect = this.effects[effectsIndex];
    if (this.effects[effectsIndex] == 'slideIn') {
        effectParams.startPos = 'rand';
        effectParams.stepping = 100;
    }
    var d = new Date;
    var oldPositionStyle = this.img.getCSSValue('position');
    var newImg = renderer.createElement('img', {
        'src':pic.thumb.picUrl+'?'+d.getTime(),
        'style':{
            'position':'absolute',
            'top':0,
            'left':0,
            'zIndex':2,
            'width':pic.width + 'px',
            'height':pic.height + 'px'
        },
        'className':'galleryPic'
    });
    /**
     * For IE6 compatibility only
     */
    var setBorder;
    eventHandler.addEvent(newImg, 'render', setBorder = function () {
        this.imgBorder.style.width = newImg.getCSSValue('width', 'int') + newImg.getCSSValue('borderLeftWidth', 'int') + newImg.getCSSValue('borderRightWidth', 'int') + 'px';
        this.imgBorder.style.height = newImg.getCSSValue('height', 'int') + newImg.getCSSValue('borderTopWidth', 'int') + newImg.getCSSValue('borderBottomWidth', 'int') + 'px';
    }.bindTo(this));
    /* end */
    
    if (this.effects[effectsIndex] != 'fade') newImg.setOpacity(1);
    
    var ef;
    eventHandler.addEvent(newImg, 'effectready', ef = function () {
        eventHandler.removeEvent(newImg, 'render', setBorder);
        eventHandler.addEvent(this.img, 'remove', function () {
            this.setInfoBoxText(pic);
            eventHandler.flush(this.img);
            eventHandler.removeEvent(newImg, 'effectready', ef);
            this.img = newImg;
            newImg = undefined;
            this.img.style.position = oldPositionStyle;
            eventHandler.addEvent(this.back, 'click', this.goBackWrapper = function () {
                this.goBack();
            }.bindTo(this));
            eventHandler.addEvent(this.forward, 'click', this.goForwardWrapper = function () {
                this.goForward();
            }.bindTo(this));
        }.bindTo(this));
        this.img.remove();
    }.bindTo(this))
    newImg.onload = function () {
        newImg.renderIn(this.imgBorder, this.effects[effectsIndex], effectParams);
    }.bindTo(this);
}
Gallery.prototype.initInfoBox = function () {
    this.infoBox = renderer.createElement('div', {"id":"galleryInfoBox"});
    eventHandler.flush(this.infoBox);
    this.infoBox.style.width = this.imgBorder.offsetWidth + 'px';
    this.infoBox.idle = true;
}
Gallery.prototype.setInfoBoxText = function (pic) {
    this.infoBox.empty();
    this.infoBox.write(pic.thumb.picTitle);
}
Gallery.prototype.goBack = function () {
    if (this.current-1>=0) {
        this.current--;
        this.loadNewPic(this.pics[this.current])
    }
    if (this.current == 0) this.back.remove(this.buttonEffect);
}
Gallery.prototype.goForward = function () {
    if (this.current+1<=this.pics.length-1) {
        this.current++;
        this.loadNewPic(this.pics[this.current]);
    }
    if (this.current == this.pics.length-1) this.forward.remove(this.buttonEffect);
}
Gallery.prototype.setDimensions = function () {
    var clientSize = libScreen.getClientSize(),scrollOffset = libScreen.getScrollOffset();
    this.imgBorder.style.width = this.img.getCSSValue('width', 'int') + this.img.getCSSValue('borderLeftWidth', 'int') + this.img.getCSSValue('borderRightWidth', 'int') + 'px';
    this.imgBorder.style.height = this.img.getCSSValue('height', 'int') + this.img.getCSSValue('borderTopWidth', 'int') + this.img.getCSSValue('borderBottomWidth', 'int') + 'px';
    this.showcase.style.width = this.bg.style.width = this.imgBorder.offsetWidth + 'px';
    this.showcase.style.height = this.bg.style.height = this.imgBorder.offsetHeight + 'px';
    this.shadow.E.style.height = parseInt(this.showcase.style.height) + ((userAgent.app == 'MSIE' && userAgent.version < 7) ? 35 : 36) + 'px';
    this.shadow.S.style.width = parseInt(this.showcase.style.width) + 31 + 'px';
    this.showcase.style.left = Math.round(clientSize.x/2-this.showcase.offsetWidth/2) + scrollOffset.x + 'px';
    this.showcase.style.top = Math.round(clientSize.y/2-this.showcase.offsetHeight/2) + scrollOffset.y + 'px';
    this.showcase.screenOffset = this.showcase.getScreenOffset();
    
    this.infoBox.style.width = this.imgBorder.offsetWidth + 'px';
}
Gallery.prototype.calcProximimity = function (e) {
    this.showcase.screenOffset = this.showcase.getScreenOffset();
    if (e.clientX < this.showcase.screenOffset.x
        || e.clientX > this.showcase.screenOffset.x + this.showcase.offsetWidth
        || e.clientY < this.showcase.screenOffset.y
        || e.clientY > this.showcase.screenOffset.y + this.showcase.offsetHeight) return null;
    var r = '';
    e=eventHandler.getEvent(e);
    var innerOffset = {x:e.clientX-this.showcase.screenOffset.x,y:e.clientY-this.showcase.screenOffset.y};
    if (innerOffset.y < this.proximityTreshold) {
        r += 'top';
    }
    if (innerOffset.y > this.showcase.offsetHeight-this.proximityTreshold) {
        r += 'bottom';
    }
    if (innerOffset.x < this.proximityTreshold) {
        r += 'left';
    }
    if (innerOffset.x > this.showcase.offsetWidth-this.proximityTreshold) {
        r += 'right';
    }
    return r != '' ? r : null;
}

Gallery.prototype.handleProximity = function (p) {
    if (p==null) {
        if (this.back.rendered == true && this.back.fading == undefined) {
           this.back.remove(this.buttonEffect);
        }
        if (this.forward.rendered == true && this.forward.fading == undefined) {
           this.forward.remove(this.buttonEffect);
        }
        if (this.off.rendered == true && this.off.fading == undefined) {
           this.off.remove(this.buttonEffect);
        }
    } else if (p.indexOf('left')>-1
               && this.back.rendered == false
               && this.back.fading == undefined
               && this.current>0) {
        this.back.renderIn(this.showcase, this.buttonEffect);
    } else if (p.indexOf('right')>-1
               && this.forward.rendered == false
               && this.forward.fading == undefined
               && this.current<this.pics.length-1) {
        this.forward.renderIn(this.showcase, this.buttonEffect);
    }
    if (p=='topright' && this.off.rendered == false && this.off.fading == undefined) {
        this.off.renderIn(this.showcase, this.buttonEffect);
    }
    /*
    if (p=='bottom' && this.infoBox.fading == undefined) {
        //console.log(typeof this.infoBox.parentNode+' '+typeof this.infoBox.parentNode.tagName);
        if (this.infoBox.idle) {
            this.infoBox.renderIn(this.bg, 'fade');
        } else {
            window.clearTimeout(this.infoBoxTimeout);
            this.setInfoBoxTextTimeout();
        }
    }*/
}
Gallery.prototype.destruct = function () {
    var fr;
    eventHandler.removeEvent(document, 'mousemove', this.move);
    eventHandler.addEvent(this.showcase, 'fadeready', fr = function () {
        libScreen.dim(false, 1, eventHandler.removeEvent(this.showcase, 'fadeready', fr));
    }.bindTo(this));
    window.clearTimeout(this.infoBoxTimeout);
    if (this.infoBox.parentNode != null) {
        this.infoBox.remove();
    }
    this.back.remove();
    this.forward.remove();
    this.off.remove();
    this.showcase.remove('fade');
}