(function() {
    var Y = NB.Lib;
    
    NB.MarsPress.ImageLayer = function(config) {
        NB.MarsPress.ImageLayer.superclass.constructor.apply(this, arguments);

        if(Y.get("#image-layer"))
        {
            throw new Error("image layer already created");
        }

        this.render("#page");

        this.get("element").set("id", "image-layer");
        this.set("content", this.getContentHtml());

        this._imageWrapEl = Y.get("#image-layer-image-wrap");
        this._imageEl = Y.get("#image-layer-image");
        this._titleEl = Y.get("#layer-image-info-title");
        this._sizeEl = Y.get("#layer-image-info-size");
        this._formatEl = Y.get("#layer-image-info-format");
        this._addToStorageEl = Y.get("#layer-image-info-add");
        this._galleryTitleEl = Y.get("#image-layer-gallery-title");

        this._imageEl.on('click', this.onImageClick, this);

        /*this._imageNavigator = new NB.MarsPress.ImageNavigator({
            arrowLeft : Y.get('#image-layer-image-scroll-left'),
            arrowRight : Y.get('#image-layer-image-scroll-right'),
            element : this._imageEl
        });
        this._imageNavigator.on('navigateLeft', this.onImageNavigation, this);
        this._imageNavigator.on('navigateRight', this.onImageNavigation, this);*/



        this.gallery = new NB.MarsPress.ImageGallery({
            thumbWidth : 59,
            thumbHeight : 59
        });
        this.gallery.render("#image-layer-gallery-bd");
        this.gallery.on("select", this.onGallerySelect, this);
    };
    
    NB.MarsPress.ImageLayer.NAME = "imageLayer";
    NB.MarsPress.ImageLayer.ATTRS = {
        categoryId : {
            value : 0,
            setter : function(value) {
                var categories = this.get("categoriesData");
                if(categories.hasOwnProperty(value))
                {
                    this.gallery.set("images", categories[value].images);

                    if(this._galleryTitleEl)
                    {
                       this._galleryTitleEl.setContent(categories[value].name);
                    }
                    
                    return value;
                }


                return value;
            }
        },
        imageId : {
            value : 0,
            setter : function(value) {

                // Searching image in current category
                var image = null;
                var category = this.get("categoriesData")[this.get("categoryId")];

                var index = 0;
                for(var i = 0; i < category.images.length; i++)
                {
                    if(category.images[i].id == value)
                    {
                        image = category.images[i];
                        index = i;
                        break;
                    }
                }

                // Image not found
                if(image === null)
                {
                    return 0;
                }

                // Setting image HTML
                this.setData(image);

                this.gallery.set("selectedIndex", index);
                
                return value;
            }
        },
        categoriesData : {
            value : null
        },
        langData : {
            value : {}
        }
    };
    
    Y.extend(NB.MarsPress.ImageLayer, NB.UI.Layer, {
        getText : function(key) {
            var lang = this.get("langData");
            return lang.hasOwnProperty(key) ? lang[key] : "";
        },
        getContentHtml : function() {
            return [
                 '<div id="image-layer-content" class="layer-padding">',
                     '<div id="image-layer-image-wrap">',
                        '<div id="image-layer-image">',
                           '<a href="#prev" id="image-layer-image-scroll-left" class="image-layer-image-scroll"></a>',
                           '<a href="#next" id="image-layer-image-scroll-right" class="image-layer-image-scroll"></a>',
                        '</div>',
                     '</div>',
                     '<div id="image-layer-main" class="palette-forecolor">',
                        '<div id="image-layer-separator"></div>',

                        '<div id="image-layer-gallery">',
                           '<div id="image-layer-gallery-hd">' + this.getText('galleryHd') + '</div>',
                           '<div id="image-layer-gallery-bd"></div>',
                        '</div>',

                        '<div id="layer-image-info">',
                           '<div id="layer-image-info-title"></div>',
                           '<div id="layer-image-info-size"></div>',
                           '<div id="layer-image-info-format"></div>',
                           '<a href="#add-to-cart" id="layer-image-info-add">' + this.getText('add') + '</a>',
                        '</div>',
                     '</div>',
                     '<div class="clear"></div>',
                 '</div>'

            ].join("");
        },
        onGallerySelect : function(e) {
            var category = this.get("categoriesData")[this.get("categoryId")];
            Y.later(50, this, this.setData, category.images[e.selectedIndex]);
            //this.updateNavigator(e.selectedIndex);
        },
        onImageClick : function(e) {
            var selectedIndex = this.gallery.get('selectedIndex');
            if(selectedIndex == this.gallery.get('images').length - 1)
            {
                this.gallery.scroll(-this.gallery.get('images').length + 1);
                this.gallery.set('selectedIndex', 0);
            }
            else
            {
                this.gallery.scroll(1);
                this.gallery.set('selectedIndex', selectedIndex + 1);
            }            
        },
        /*updateNavigator : function(selectedIndex) {
            
            var leftArrowEnabled = selectedIndex > 0;
            this._imageNavigator.set('leftArrowEnabled', leftArrowEnabled);
            
            var rightArrowEnabled = selectedIndex < this.gallery.get('images').length - 1;
            this._imageNavigator.set('rightArrowEnabled', rightArrowEnabled);            
        },*/
        setData : function(image) {
            var thumb = image.thumbnail.large;
            //var html = '<img src="' + thumb.src + '" width="' + thumb.size[0] + '" height="' + thumb.size[1] + '" />';
            this._imageEl.setStyle("backgroundImage", "url(" + thumb.src + ")");

            this._titleEl.setContent(image.filename);
            this._sizeEl.setContent(this.getText("imageSize") + ": " + image.size);
            this._formatEl.setContent(this.getText("format") + ": " + image.format);
            this._addToStorageEl.set("className", "storage-add-icon add-image-to-storage-" + image.id);
            if(NB.MarsPress.userStorage.contains("image", image.id))
            {
                this._addToStorageEl.addClass("storage-added");
            }
            else
            {
                this._addToStorageEl.removeClass("storage-added");
            }
        }
    });    

})();