// www.itelligent.com.mx, Agosto 2010

var galeriebox = {
    def : {
        rows: 7,
        cols: 8,
        render: null
    },
    __interno: {
        back: null,
        next: null,
        matriz: null
    },
    __datos: {
        total: null,
        perpag: null,
        pages: null,
        cursor: null,
        content: null
    },
    show: function (content, opt) {
        this.def = $.extend(this.def, opt)
        this.__datos.content = content;

        this.__datos.total = this.__datos.content.length;
        this.__datos.perpage = this.def.cols * this.def.rows;

        this.__datos.pages = Math.ceil(this.__datos.total / this.__datos.perpage);
        this.__datos.cursor = 1;

        // PAGINADOR
        this.__interno.back = $('\
                            <div style=" \
                                    position: fixed; \
                                    top: 50%; \
                                    left: 10%; \
                                    width: 50px; \
                                    height: 50px; \
                                    margin-top: -25px; \
                                    margin-left: -80px; \
                                    border: 1px solid #fff; \
                                    z-index: 102; \
                                    cursor: pointer; \
                                    display: none; \
                                "></div>')
                            .click((function (galeriebox) { return function () {
                                galeriebox.view(galeriebox.actual - 1);
                                return ;
                            }})(this))

        if(document.all)
            this.__interno.back.css('position', 'absolute');

        $('body').append(this.__interno.back);

        this.__interno.next = $('\
                            <div style=" \
                                    position: fixed; \
                                    top: 50%; \
                                    left: 90%; \
                                    width: 50px; \
                                    height: 50px; \
                                    margin-top: -25px; \
                                    border: 1px solid #fff; \
                                    z-index: 102; \
                                    cursor: pointer; \
                                    display: none; \
                                "></div>')
                            .click((function (galeriebox) { return function () {
                                galeriebox.view(galeriebox.actual + 1);
                                return ;
                            }})(this))

        if(document.all)
            this.__interno.next.css('position', 'absolute');

        $('body').append(this.__interno.next);


        // MATRIZ

        this.view(1)

        return this;
    },
    view: function (cursor) {
        if(cursor <= 0 && cursor > this.__datos.pages)
            return this;

        this.actual = this.__datos.cursor = cursor;
        
        if(this.__interno.matriz)
            $(this.__interno.matriz).remove();

        // total de registros a mostrar en esta pagina
        var r_in_page = this.__datos.total - (this.__datos.cursor - 1) * (this.def.cols * this.def.rows);

        if(r_in_page < 0)
            return alert('Error en el paginado');

        if(r_in_page > this.__datos.perpage)
            r_in_page = this.__datos.perpage;

        var r_cols = r_in_page < this.def.cols ? r_in_page : this.def.cols;

        var w = Math.floor(100 / (r_cols));
        var h = Math.floor(100 / Math.ceil(r_in_page / this.def.cols));

        var aux = '';
        var contenido = '';

        for(var i = (this.__datos.cursor - 1) * this.__datos.perpage; i < this.__datos.total && i < this.__datos.cursor * this.__datos.perpage; i++) {
            aux += '<div \
                        class="box_col" \
                        style=" \
                            width: ' + w + '%; \
                            height: 100%; \
                            background: transparent; \
                            position: absolute; \
                            top: 0%; \
                            left:' + (i % r_cols * w) + '%; \
                    "> \
                        <div \
                            id="box_' + i + '" \
                            style=" \
                                position: absolute; \
                                top: 0px; \
                                left: 0px; \
                                width: 98%; \
                                height: 98%; \
                                background: transparent; "> \
                        </div> \
                    </div>';

            if((i + 1) % r_cols == 0 || i == this.__datos.total - 1) {
                contenido += '<div \
                                class="box_row" \
                                style=" \
                                    width: 100%; \
                                    height: ' + h + '%; \
                                    position: relative; \
                                    left: ' + ((i + 1) % r_cols != 0 ? Math.floor((100 - (i + 1) % r_cols * w) / 2): '0') + '%; \
                                    top: 0%; \
                                    background: transparent; \
                            ">' + aux + '</div>';
                aux = '';
            }
        }

        this.__interno.matriz = $('<div style="display: block; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; background: transparent; z-index: 102; ">' + contenido + '</div>');

        if(document.all) {
            this.__interno.matriz
                .css('position', 'absolute')
                .css('height', Math.max(
                        Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
                        Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
                        Math.max(document.body.clientHeight, document.documentElement.clientHeight)
                    ) * .8
                )
        }

        $('body').append(this.__interno.matriz)
        
        this.__datos.elements = [];

        this.__interno.matriz.find('.box_col div')
            .each((function (content, render) { return function () {
                if(!render)
                    return;

                var i = $(this).attr('id').replace('box_', '');

                var aux = render.apply(content[i], [this, i]);

                $(this).append(aux);

            }})(this.__datos.content, this.def.render))

        this.__interno.back.css('display', this.__datos.cursor > 1 ? 'block' : 'none')

        this.__interno.next.css('display', this.__datos.cursor < this.__datos.pages ? 'block' : 'none')

        return this;
    },
    hide: function () {
        if(document.all) {
            $("body","html").css({height: "auto", width: "auto"});
            $("html").css("overflow","");
        }

        for(a in this.__interno)
            if(this.__interno[a]) {
                this.__interno[a].remove();
                this.__interno[a] = null;
            }
    },


    block: function () {
        if(!this.__interno.matriz)
            return

        $(this.__interno.matriz).css('z-index', 1)
    },
    unblock: function () {
        if(!this.__interno.matriz)
            return
        
        $(this.__interno.matriz).css('z-index', 102)
    }


    
}