/*
Sept. 2011
    Rewritten for jQuery (was mootools)

Before Sept. 2011:
    Updated for Polopoly
    fireEvent change when migrating to 1.2.1 >> onBeforeInject == beforeInject
    
    possible enhancements:
    - transition fx
    - preloading
    - prev/next buttons
    - maxheight/maxwidth
    - centre horiz/vert
    - support that only some images has caption text. If one does not have it now, the order is messed up.

*/

(function ($) {
    
    NP.ZuprZlide = Class.extend({
        options: {
            'width': 780, // max width
            'startImg': 0, // what image in the index to start on
            'replace': true, // replace the contents of the container?
            'height': 400, // max height
            'derivative': "derivative_article_980",
            'container': document.body,
            'onBeforeInject': function(){}
        },
        init: function (imgs, descr, options) { // imgs: array, descr:array, options:object
            this.options = $.extend({}, this.options, options);

            if (!this.options.container) {
                this.options.container = imgs[0];
            }
            this.currentImg = this.options.startImg;
            this.collection = this.makeCollection(imgs,descr);

            var struct = this.buildGUI();
            
            this.options.onBeforeInject();

            if (this.options.container.get(0).nodeName == 'IMG'){
                struct.replaces(this.options.container);
            } else {
                if (this.options.replace) {
                    this.options.container.empty();
                }
                struct.prependTo(this.options.container);
            }
        },

        /* public methods */
        next: function () {
            var step = (this.collection[this.currentImg + 1]) ? this.currentImg + 1 : 0;
            this.goTo(step);
            this.currentImg = step;
        },
        prev: function () {
            var step = (this.collection[this.currentImg - 1]) ? this.currentImg-1 : this.collection.length;
            this.goTo(step);
            this.currentImg = step;
        },
        goTo: function(i){
            if(!this.collection[i]) {
                i = 0;
            }
            // go there
            var col = this.collection[i];
            var img = $('<img />', {
                'src': col.img,
                'alt': col.descr.text
            });
                        
            $(this.gui.img).replaceWith(img);

            this.gui.img = img;
            this.gui.descr.html(col.descr.html);
            this.gui.xofx.find('strong:first').text(i+1);
        },
        
        /* NON-public methods, do not use */
        buildGUI: function(){
            var struct = $('<div class="np-ZuprZlide" />');

            var cont = $('<div />', {
                    'class': 'np-cont',
                    'css': {
                        'height': this.options.height + 2
                    }
                }).prependTo(struct);

            var imgWrap = $('<div />', {
                    'class':'np-imgWrap',
                    'title':'Trykk for neste bilde'
                }).prependTo(cont).click(function(e){
                    e.preventDefault();
                    this.next();
                }.bind(this));

            var img = $('<img />', {
                    'src': this.collection[this.currentImg].img
                }).prependTo(imgWrap);

            var descr = $('<div />', {
                    'class': 'fw-imgCaption',
                    'css': {
                        'opacity': 0.7
                    },
                    'html': this.collection[this.currentImg].descr.html
                }).appendTo(struct);            

            var navBar = $('<div />', {
                    'css': {
                        'opacity': 0.7
                    },
                    'class': 'np-slideNav'
                }).appendTo(struct);

            var xofx = $('<p />',{
                    'html': 'Viser bilde <strong>' + (this.currentImg + 1) + '</strong> av <strong>' + this.collection.length + '</strong> bilder',
                    'class': 'np-xofx'
                }).appendTo(navBar);
                        
            var next = $('<a />', {
                    'html':'Neste bilde',
                    'class':'np-next'
                }).appendTo(navBar).click(function(e){
                    e.preventDefault();
                    this.next();
                }.bind(this));

            var prev = $('<a />', {
                    'html':'Forrige bilde',
                    'class':'np-prev'
                }).appendTo(navBar).click(function(e){
                    e.preventDefault();
                    this.prev();
                }.bind(this));

            struct.mouseenter(function () {
                descr.animate({
                    'opacity': 1
                });
                navBar.animate({
                    'opacity': 1
                });
            });
            
            struct.mouseleave(function () {
                descr.animate({
                    'opacity': 0.6
                });
                navBar.animate({
                    'opacity': 0.6
                });
            });
            
            this.gui = {
                img: img,
                descr: descr,
                html: struct,
                next: next,
                prev: prev,
                xofx: xofx
            };
            debug.log(struct);
            return struct;
        },
        makeCollection: function(imgs, descr){
            var collection = [];
            imgs.each(function (i, item) {
                collection.push({
                    'img': this.fixImgURL(item,this.options.width,this.options.height),
                    'descr': {
                        'html': $(descr[i]).html(),
                        'text': $(descr[i]).text()
                    }
                });
            }.bind(this));
            return collection;
        },
        fixImgURL: function(img, width, height){
            return $(img).attr('src').replace("derivative_article_480",this.options.derivative);
        }

    });
    
    //$.plugin('myclass', NP.MyClass); //Makes the class available as a jQuery plugin: $('#myElement').myclass();


}(jQuery));