Ext.namespace('NT');

//function(element){
NT.Gallery = Ext.extend(Ext.util.Observable, {
    els: {},
    images: [],
    activeImage: 0,
    initialized: false,
    isOpen: false,
    selector: '.imgs a',
    interval:5,

    constructor: function(config)
    {
        config = config || {};
        Ext.apply(this, config);

        NT.Gallery.superclass.constructor.call(this, config);

        this.addEvents(
            'open',
            'close'
        );


        this.slides = this.els = [];
        this.container = Ext.get('galerieContainer')
        this.initEvents();
    },

    open: function(element)
    {
        this.activeImage = 0;
        this.isOpen = true;
        this.el = element;
        this.initImages();
        Ext.fly('articles').setDisplayed(false);
        this.container.show();
        //container.select('.gallery').setStyle('display', 'block');
        this.container.select('.sel').removeClass('sel');
        NT.app.setTopWidth();
        Ext.fly('bg1').stopFx();
        Ext.fly('bg2').stopFx();
        this.showImage(true, 0.01);
        this.enableKeyNav();
        this.fireEvent('open');
    },

    unHover: function()
    {
        var hovers = this.container.select('.hover-wrap');
         hovers.each(function(hover){
            hover.un('mouseenter', NT.app.hoverOn, hover.dom);
            hover.un('mouseleave', NT.app.hoverOff, hover.dom);
        }, this);
    },

    hover: function()
    {
        var hovers = this.container.select('.hover-wrap');
        hovers.each(function(hover){
            hover.on('mouseenter', NT.app.hoverOn, hover.dom);
            hover.on('mouseleave', NT.app.hoverOff, hover.dom);
        }, this);
    },

    initImages: function()
    {
        this.images = [];
        this.unHover();
        this.container.first().update( this.el.query('.gallery')[0].innerHTML);
        this.hover();
        var setItems = this.container.query(this.selector);
        Ext.each(setItems, function(item) {
            if(item.href) {
                this.images.push(item);
            }
        },this);
    },

    initEvents: function() {
        var close = function(ev) {
            ev.preventDefault();
            this.close();
        };

        this.container.first().on('click', function(ev){
            var target = ev.getTarget('a');

            if (target) {
                ev.preventDefault();
                this.pause();
                this.setImage(target);
                return;
            }
            target = ev.getTarget('.close');
            if(target)
            {
                this.close();
                return;
            }
            target = ev.getTarget('.pause');
            if(target)
            {
                this.pause();
                return;
            }
            else if(target = ev.getTarget('.play'))
            {
                this.play();
                return;
            }
            target = ev.getTarget('.next');
            if(target)
            {
                this.pause();
                var newImg = this.images[this.activeImage +1] || this.images[0];
                this.setImage(newImg);
                return;
            }
            target = ev.getTarget('.prev');
            if(target)
            {
                this.pause();
                var newImg = this.images[this.activeImage - 1] || this.images[this.images.length - 1];
                this.setImage(newImg);
                return;
            }
        }, this);
    },

    setImage: function(image) {
        var index = 0;
        while (this.images[index].href != image.href) {
            index++;
        }
        Ext.fly(this.images[this.activeImage]).first().removeClass('sel');
        this.activeImage = index;
        this.showImage();
    },

    showImage: function(no_anim, duration){
        Ext.fly(this.images[this.activeImage]).first().addClass('sel');
        NT.app.setActiveImage();
        NT.app.fadeImg(this.images[this.activeImage].href, no_anim, duration);
        this.preloadImages();
    },

    play: function() {
        if(!this.playing) {
            this.playTask = this.playTask || {
                run: function() {
                    this.playing = true;
                    var newImg = this.images[this.activeImage +1] || this.images[0];
                    this.setImage(newImg);
                },
                interval: this.interval*1000,
                scope: this
            };

            this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
                Ext.TaskMgr.start(this.playTask);
            }, this);

            this.playTaskBuffer.delay(this.interval*1000);
            this.playing = true;

            this.container.select('.play').replaceClass('play', 'pause');
        }
    },

    pause: function() {
        if(this.playing) {
            Ext.TaskMgr.stop(this.playTask);
            this.playTaskBuffer.cancel();
            this.playing = false;
            this.container.select('.pause').replaceClass('pause', 'play');
        }
    },

    enableKeyNav: function() {
        Ext.fly(document).on('keydown', this.keyNavAction, this);
    },

    disableKeyNav: function() {
        Ext.fly(document).un('keydown', this.keyNavAction, this);
    },

    keyNavAction: function(ev) {
        var keyCode = ev.getKey();

        if (
            keyCode == 88 || // x
            keyCode == 67 || // c
            keyCode == 27
        ) {
            this.close();
        }
        else if (keyCode == 80 || keyCode == 37){ // display previous image
            this.pause();
            var newImg = this.images[this.activeImage - 1] || this.images[this.images.length - 1];
            this.setImage(newImg);
        }
        else if (keyCode == 78 || keyCode == 39){ // display next image
            this.pause();
            var newImg = this.images[this.activeImage +1] || this.images[0];
            this.setImage(newImg);
        }
    },

    preloadImages: function(){
        var next, prev;
        if (this.images.length > this.activeImage + 1) {
            next = new Image();
            next.src = this.images[this.activeImage + 1].href;
        }
        if (this.activeImage > 0) {
            prev = new Image();
            prev.src = this.images[this.activeImage - 1].href;
        }
    },

    close: function(){
        this.isOpen = false;
        this.disableKeyNav();
        this.pause();
        this.container.hide();
        Ext.fly('articles').setDisplayed(true);
        Ext.fly('bg1').stopFx();
        Ext.fly('bg2').stopFx();
        NT.app.setThemeBg(true, 0.01);
        NT.app.setTopWidth();
        NT.app.setArticleScroll();
        this.fireEvent('close');
    },

    getViewSize: function() {
        return [Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)];
    },

    setDisplayed: function(show)
    {
        this[show ? 'open' : 'close']();
        Ext.fly('articles').setDisplayed(false);
    }
});