/*global $, window */

var MJ = MJ || {};

MJ.Views = MJ.Views || {};

/**
 * View for the search input
 *
 * @constructor
 */
MJ.Views.Gallery = function (controller, elements) {
    this.controller = controller;
    this.rootNode = elements.rootNode;
    this.controller.enableLightbox();
};

MJ.Views.Gallery.prototype.close = function (e) {
    if (!e.keyCode || (e.keyCode === 27)) {
        this.dom.lightbox.css({
            'display' : 'none'
        });
        this.dom.overlay.css({
            'display' : 'none'
        });
    }
    if (this.dom.next) {
        this.dom.next.unbind('click');
    }
    if (this.dom.previous) {
        this.dom.previous.unbind('click');
    }
};

MJ.Views.Gallery.prototype.createDOM = function () {
    var body = $('body'),
        dom,
        lightbox,
        lightboxInfo,
        overlay;

    this.dom = {
        close : $('<button class="close">Close<span></span></button'),
        image : $('<img alt="" id="lightboxImage" src=""/>'),
        licencing : $('<p class="licencing"></p>'),
        lightbox : $('<div class="lightbox"></div>'),
        lightboxInfo : $('<div class="lightboxInfo"></div>'),
        nexta : $('<button class="next">Next</button>'),
        overlay : $('<div class="overlay"></div>'),
        position : $('<p class="position"></p>'),
        previous : $('<button class="previous">Previous</button>'),
        share : $('<div class="share"></div>'),
        title : $('<h1></h1>')
    };
    dom = this.dom;
    lightboxInfo = dom.lightboxInfo;
    lightbox = dom.lightbox;
    overlay = dom.overlay;
    lightboxInfo.append(dom.position);
    lightboxInfo.append(dom.licencing);
    lightbox.append(this.dom.share);
    lightbox.append(dom.title);
    lightbox.append(dom.image);
    lightbox.append(lightboxInfo);
    lightbox.append(dom.share);
    lightbox.append(dom.previous);
    lightbox.append(dom.nexta);
    lightbox.append(dom.close);
    body.append(overlay);
    body.append(lightbox);
    this.enableClose();
};

MJ.Views.Gallery.prototype.enableClose = function () {
    this.dom.close.bind('click', $.scope(this, this.close));
    $('body').bind('keyup', $.scope(this, this.close));
};

MJ.Views.Gallery.prototype.image = function image(src, cfg) {
    var img;
        
    img = document.createElement('img');
    if (!src) {
        
        return null;
    }
    
    img.onload = function () {
        cfg.success(img.width, img.height);
    }
    img.src = "";
    img.src = src;

    return img;
};

MJ.Views.Gallery.prototype.isType = function (o, t) {
        
    return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;
};

MJ.Views.Gallery.prototype.reveal = function (lightboxArray, key) {
    var backgroundPosLeft,
        backgroundPosTop,
        dom = this.dom,
        model = lightboxArray[key];
    
    if (this.dom.previous) {
        this.dom.previous.unbind('click');
    }
    if (this.dom.nexta) {
        this.dom.nexta.unbind('click');
    }
    backgroundPosLeft = ($(window).width() / 2) - 32;
    backgroundPosTop = $(window).scrollTop() + ($(window).height() / 2) - 32;
    this.dom.overlay.css({
        'background-position' : backgroundPosLeft + 'px ' + backgroundPosTop + 'px'
    });
    this.image(model.image + '?' + Math.random(0.5), {
        
        success : $.scope(this, function (width, paraheight) {
            var height,
                top,
                windowHeight;

            dom.image.attr('src', model.image + '?' + Math.random(0.5));
            dom.image.fadeIn(19);
            dom.position.html(model.position);
            dom.licencing.html(model.licencing);
            dom.title.html('<a href="#lightboxImage">' + model.title + '</a>');
            dom.lightbox.css({
                'height' : paraheight,
                'maxWidth' : width || '400px',
                'width' : width
            });
            if (lightboxArray[key - 1]) {
                dom.previous.css({
                    'display' : 'block',
                    'visibility' : 'visible'
                });
                dom.previous.bind('click', $.scope(this, function () {
                    this.dom.lightbox.css({
                        'display' : 'none'
                    });
                   this.dom.image.fadeOut(10);
                    
                    this.reveal(lightboxArray, key - 1);
                }));
            }
            else {
                dom.previous.css({
                    'display' : 'none',
                    'visibility' : 'hidden'
                });
            }
            if (lightboxArray[key + 1]) {
                dom.nexta.css({
                    'display' : 'block',
                    'visibility' : 'visible'
                });
                dom.nexta.bind('click', $.scope(this, function () {
                    this.dom.lightbox.css({
                        'display' : 'none'
                    });
                    this.dom.image.fadeOut(10);
                    
                    this.reveal(lightboxArray, key + 1);
                }));
            }
            else {
                dom.nexta.css({
                    'display' : 'none',
                    'visibility' : 'hidden'
                });
            }
            height = dom.lightbox.innerHeight();
            windowHeight = $(window).height();
            if (height < windowHeight) {
                top = (windowHeight / 2) - (height / 2);
            } else {
                top = 0;
                dom.image.css({
                    'maxHeight' : windowHeight - 100
                });
                dom.lightbox.css({
                    'maxHeight' : $(window).height() - 20,
                    'maxWidth' : $(window).width()
                });
            }
            dom.lightbox.css({
                'display' : 'block',
                'left' : ($(window).width() / 2) - (dom.lightbox.innerWidth() / 2),
                'top' : top
            });
        })
    });
};

MJ.Views.Gallery.prototype.showInterstitial = function () {
    this.dom.overlay.css({
        'display' : 'block'
    });
};