var RJ = (function() {
    var _debug = false;
    var _winHeight = null;
    var _winWidth = null;
    var _divArticle = null;
    var _divArticleWidth = null;
    var _divArticleOffset = 2 * 70;
    var _divArticlePadding = 350;
    var _imgMotiveRealWidth = 1305;
    var _imgMotiveRealHeight = 940;
    var _divMarginal = null;
    var _ulThumbs = null;


    var _divZoomBox = null;
    var _aZoomCloseButton = null;
    var _imgZoom = null;
    var _assetsZoomImages = null;
    var _nrZoom = 0;
    var _zoomIsActive = false;
    var _imgZoomItems = null;

    var _init = function(){
        _divArticle = $('article');
        _divMarginal = $('marginal');
        _ulThumbs = $('thumbs');
        _imgZoomItems = $$('img.zoom');
        
        _resizeLayout();
        _addThumbSlideshow();
        _addZoomBox();
        _addEvents();
    }

    var _resizeLayout = function(){
        if (!_divArticle) return;
        _winHeight = $(document.body).getHeight();
        _winWidth = $(document.body).getWidth();
        _divArticleWidth = _divArticle.getWidth();

        var newHeight = _imgMotiveRealHeight * ((_divArticleWidth - _divArticlePadding) / _imgMotiveRealWidth);
        
        if (newHeight > _winHeight - _divArticleOffset) {
            newHeight = _winHeight - _divArticleOffset;
        }
        _divArticle.setStyle('height', newHeight);

        // Scrollbars
        if (_winHeight > 540) {
            $(document.body).setStyle('overflow-y','hidden');
        } else if (_zoomIsActive == false) {
            $(document.body).setStyle('overflow-y','auto');
        }
        if (_winWidth > 960) {
            $(document.body).setStyle('overflow-x','hidden');
        } else if (_zoomIsActive == false) {
            $(document.body).setStyle('overflow-x','auto');
        }
    };   

    var _addThumbSlideshow = function(){
        if (!_ulThumbs) return;
        
        _ulThumbs.left = _ulThumbs.getStyle('left').toInt();
        _ulThumbs.max = -(_ulThumbs.getWidth() - 300);
        _ulThumbs.fx = new Fx.Tween(_ulThumbs,{
            property: 'left',
            onComplete: function(){
                _ulThumbs.left = _ulThumbs.getStyle('left').toInt();
                if (_ulThumbs.left >= 0) {
                    _divThumbLeft.fade(0);
                } else {
                    _divThumbLeft.fade(1);
                }
                if (_ulThumbs.left <= _ulThumbs.max) {
                    _divThumbRight.fade(0);
                } else {
                    _divThumbRight.fade(1);
                }
            }
        }).start(_ulThumbs.left);
        
        var _divThumbLeft = new Element('a',{
            id: 'thumb-left',
            events: {
                click: function(e) {
                    e.stop();
                    _ulThumbs.slide(-1);
                }
            }
        }).inject(_divMarginal, 'bottom');

        var _divThumbRight = new Element('a',{
            id: 'thumb-right',
            events: {
                click: function(e) {
                    e.stop();
                    _ulThumbs.slide(1);
                }
            }
        }).inject(_divMarginal, 'bottom');

        _ulThumbs.slide = function(direction) {
            _ulThumbs.left = _ulThumbs.getStyle('left').toInt();
            if (direction < 0) _ulThumbs.left += 300;
            else _ulThumbs.left -= 300;

            if (_ulThumbs.left >= 0) {
                _ulThumbs.left = 0;
            } else if (_ulThumbs.left <= _ulThumbs.max) {
                _ulThumbs.left = _ulThumbs.max;
            }
            _ulThumbs.fx.start(_ulThumbs.left);
        }
    }

    var _addZoomBox = function(){
        if (!RJZOOM || RJZOOM.lenght == 0 || !_imgZoomItems) return;
        _assetsZoomImages = new Asset.images(RJZOOM, {
            onProgress: function(counter, index, source) {
                _setZoomImage(index);
            }
        });
        
        _divZoomBox = new Element('div',{
            id: 'zoom-box',
            styles: {
                cursor: 'pointer',
                opacity: 0
            },
            events: {
                click: function(e){
                    e.stop();
                    _closeZoomBox();
                }
            }
        }).inject($(document.body),'bottom');

        _divZoomBox.fx = new Fx.Tween(_divZoomBox,{
            property: 'opacity'
        });

        _aZoomCloseButton = new Element('a',{
            id: 'zoom-close',
            events: {
                click: function(e){
                    e.stop();
                    _closeZoomBox();
                }
            }
        }).inject(_divZoomBox,'bottom');

        _imgZoom = new Element('img',{
            id: 'zoom-img',
            src: _assetsZoomImages[_nrZoom].src,
            styles: {
                cursor: 'pointer',
                opacity: 0
            },
            events: {
                click: function(e){
                    e.stop();
                    _imgZoomChange(1);
                }
            }
        }).inject(_divZoomBox);

        _imgZoom.fx = new Fx.Tween(_imgZoom,{
            property: 'opacity',
            onComplete: function(){
                
            }
        });

        _imgZoomItems.each(function(item,index){
            item.set({
               styles: {
                   cursor: 'pointer'
               },
               events: {
                   click: function(e){
                        e.stop();
                        _imgZoom.fx.start(1);
                        _openZoomBox();
                   }
               }
            });
        });
    }
    
    var _openZoomBox = function(){
        _zoomIsActive = true;
        $(document.body).setStyle('overflow','hidden');
        _setZoomImage(_nrZoom);
        _divZoomBox.setStyle('display','block').fx.start(1);
    }

    var _closeZoomBox = function(){
        _divZoomBox.fx.start(0).chain(
            function(){
                _divZoomBox.setStyle('display','none');
                _resizeLayout();
            }
        );
    }

    var _imgZoomChange = function(direction){
        _nrZoom += direction;        
        if (_nrZoom >= _assetsZoomImages.length) _nrZoom = 0;
        _imgZoom.fx.start(1,0).chain(
            function(){
                _imgZoom.src = _assetsZoomImages[_nrZoom].src;
                _setZoomImage(_nrZoom);
                _imgZoom.fx.start(0,1);
            }
        );
    }

    var _setZoomImage = function(nr) {
        var imgHeight = _assetsZoomImages[nr].height;
        var imgWidth = _assetsZoomImages[nr].width;
        var imgMarginTop = 0;
        
        if (imgHeight > _winHeight) {
            imgWidth = imgWidth * (_winHeight / imgHeight);
            imgHeight = _winHeight;
        } else if (imgWidth > _winWidth) {
            imgHeight = imgHeight * (_winWidth / imgWidth);
            imgWidth = _winWidth;
        }
        imgMarginTop = ((_winHeight - imgHeight) / 2);
        
        _imgZoom.set({
            styles: {
                'margin-top': imgMarginTop.toInt(),
                height: imgHeight.toInt(),
                width: imgWidth.toInt()
            }
        });
        
    }

    var _addEvents = function(){
        $$('.js-target-blank').each(function(item,index){
            item.addEvent('click',function(e){
                e.stop();
                var newWin = window.open(this.href, 'reiner-john-popup');
                newWin.focus();
            });
        });
    }

    var _log = function(value) {
        if (_debug) console.log(value);
    }
    
    return {
        init: function(){
            _init();
        },
        resize: function(){
            console.log('resize');
            _resizeLayout();
        }
    };
})();

// Zoom Images
var RJZOOM = null;

window.addEvents({
   domready: function(){
        RJ.init();
   },
   resize: function(){
       RJ.resize();
   }
});