$(function () {
    var buttons = []
    var rows = []
    var pos = 0;
    
    var anclas = $('.submenu > ul:eq(1) li a').each(function () {

        var href = $(this).attr('href');

        rows.push((function (id, anio) { return function (start, limit, row) {
            // PATCH: se agrega un elemento extra al listado ,para no descontrolar el paginado del componente se resta el elemento
            if(start != 0)
                start--;

            bpage.showMessage();
            
            parameters = {
                'categoria': categoria,
                'inicio': start,
                'limite': limit
            }

            if(id != '')
                parameters.id = id;

            if(anio != '')
                parameters.anio = anio

            var data = modTT780(
                'obras_c.jsList',
                parameters,
                function (data) {
                    try {
                        data = eval('(' + data.responseText + ')')
                    } catch(e) {
                        alert('No se pudo recuperar el listado, presione \'ESC\' para terminar');
                        return null;
                    }
    
                    bpage.hideMessage();

                    $(data).each(function () {
                        var item = $('<div></div>')
                            .css({
                                'position': 'absolute',
                                'top': '60px',
                                'bottom': '60px',
                                'left': '0px',
                                'width': '90%',
                                'height': Math.floor($(window).height() - 120) + 'px',
                                'display': 'none'
                            })
                            .appendTo(continuos.__body.body.find('> div:eq(' + row + ')'))


                        item.html(continuos.conf.draw.apply(item, [this]))
                    })

                    if(start == 0)
                        continuos.__body.body
                            .find('> div:eq(' + row + ')')
                                .find('> div:eq(0)').css({
                                    'display': 'block',
                                    'left': '5%'
                                })

                    return null;
                }
            )
    
            return []

        }})(href.indexOf('cat_id')!= -1 ? href.match(/&cat_id=(\d+)/)[1] : '', href.indexOf('anio') != -1 ? href.match(/&anio=(\d+)/)[1] : ''))

    })

    if(rows.length == 0)
        rows.push(function (start, limit, row) {
            // PATCH: se agrega un elemento extra al listado ,para no descontrolar el paginado del componente se resta el elemento
            if(start != 0)
                start--;

            bpage.showMessage();
            
            parameters = {
                'categoria': categoria,
                'inicio': start,
                'limite': limit
            }
            var data = modTT780(
                'obras_c.jsList',
                parameters,
                function (data) {
                    try {
                        data = eval('(' + data.responseText + ')')
                    } catch(e) {
                        alert('No se pudo recuperar el listado, presione \'ESC\' para terminar');
                        return null;
                    }
    
                    bpage.hideMessage();

                    $(data).each(function () {
                        var item = $('<div></div>')
                            .css({
                                'position': 'absolute',
                                'top': '60px',
                                'bottom': '60px',
                                'left': '0px',
                                'width': '90%',
                                'height': Math.floor($(window).height() - 120) + 'px',
                                'display': 'none'
                            })
                            .appendTo(continuos.__body.body.find('> div:eq(' + row + ')'))


                        item.html(continuos.conf.draw.apply(item, [this]))
                    })

                    if(start == 0)
                        continuos.__body.body
                            .find('> div:eq(' + row + ')')
                                .find('> div:eq(0)').css({
                                    'display': 'block',
                                    'left': '5%'
                                })

                    return null;
                }
            )
    
            return []
        })

    var i = 0;
    $('.submenu h2').each(function () {
        var offset = $(this).offset()

        $('<span>[<a href="#">box</a>]</span>')
            .cssp(' \
                this { \
                    color: #000; \
                    font-size: 9px; \
                    margin-right: 10px; \
                    position: absolute; \
                    top: ' + (offset.top + 15) + 'px; \
                    left: ' + (offset.left + $(this).width() + 10) + 'px; \
                } \
                a { \
                    color: #B22D42; \
                    font-size: 9px; \
                    text-decoration: none; \
                } \
            ').appendTo(document.body)
            .click(function () {
                continuos.show({
                    row: 0,
                    matrix: rows,
                    draw: function (data) {
                        // es encabezado
                        if(data.total)
                            return $('<div>' + data.categoria + '</div>')
                                .css({
                                    'font-size': '60px',
                                    'color': '#B22D42',
                                    'text-align': 'center',
                                    'line-height': Math.floor($(window).height() * .9) + 'px'
                                })
        
                        // es elemento
                        var parent = $(' \
                              <div> \
                                <div> \
                                  <h2>' + data['titulo'] + '</h2> \
                                  <p class="descripcion">' + data['descripcion'] + '</p> \
                                  ' + data['series'] + '\
                                  ' + data['tema'] + '\
                                  <p class="fecha">' + data['fecha'] + '</p> \
                                </div> \
                              </div> \
                            ')
                            .cssp(' \
                                this { \
                                    text-align: center; \
                                    width: 100%; \
                                    height: 100%; \
                                    background-image: url(scripts/loadingr.gif); \
                                    background-repeat: no-repeat; \
                                    background-position: center center; \
                                } \
                                > div:eq(0) { \
                                    position: absolute; \
                                    right: 0px; \
                                    bottom: 0px; \
                                    display: none; \
                                    padding: 10px; \
                                    width: 150px; \
                                    overflow: hidden; \
                                    text-align: left; \
                                } \
                                > div:eq(0) h2 { \
                                    color: #B22D42; \
                                    font-size: 14px; \
                                } \
                                > div:eq(0) .descripcion { \
                                    margin-top: 10px; \
                                } \
                                > div:eq(0) .temas { \
                                    margin-top: 10px; \
                                } \
                                > div:eq(0) .temas span { \
                                    color: #B22D42; \
                                    display: block; \
                                } \
                                > div:eq(0) .fecha { \
                                    margin-top: 10px; \
                                    color: #B22D42; \
                                } \
                                > div:eq(0) .temas a { \
                                    text-decoration: none; \
                                    color: #666; \
                                } \
                            ')
    
                        // si es imagen calcula el centrado
                        if(!data['video'] && data['imagen']) {
                            parent.append($('<img src="' + data['imagen'] + '" style="display: none; ">'))
    
                            parent.find('img')
                                .load(function () {
                                    var imagen = $(this)
    
                                    if(imagen.attr('ready'))
                                        return;
    
                                    imagen.attr('ready', false)
    
                                    var b = {
                                        width: Math.floor($(window).width() * .9),
                                        height: Math.floor($(window).height() - 120)
                                    }
    
                                    var referencia_1 = data['width'] / data['height'] < b.width / b.height ? 'height' : 'width';
                                    var referencia_2 = referencia_1 == 'height' ? 'width' : 'height';
    
                                    data[referencia_2] = Math.floor(data[referencia_2] * b[referencia_1] / data[referencia_1]);
                                    data[referencia_1] = Math.floor(b[referencia_1])
    
                                    $(this).css({
                                        'width': data['width'],
                                        'height': data['height']
                                    })
    
                                    var target = parent.find('> div:eq(0)')
    
                                    target
                                        .css({
                                            'position': 'absolute',
                                            'bottom': Math.floor((b['height'] - data['height'])/ 2),
                                            'right': Math.floor((b['width'] - data['width'])/ 2 - 170)
                                        })
                                        .fadeIn('fast')
    
                                    imagen.fadeIn('slow', function () {
                                        parent.css('background-image', 'none')
                                    })
    
                                })
                                .each(function () {
                                    if(this.complete)
                                        $(this).load()
                                })
    
                        }
                        else if(data['video'] != '') {
                            var width = 350;
                            var height = 290;
        
                            var target = $('<div></div>')
                                .css({
                                    'width': width + 'px',
                                    'height': height + 'px',
                                    'border-width': '1px',
                                    'border-color': '#B5B5B5',
                                    'border-style': 'solid',
                                    'position': 'absolute',
                                    'top': '50%',
                                    'left': '50%',
                                    'margin-left': -1 * Math.floor(width / 2) + 'px',
                                    'margin-top': -1 * Math.floor(height / 2) + 'px'
                                })
                                .flash({
                                    src: 'swf/flvplayer.swf',
                                    flashvars: {
                                        'allowfullscreen': true,
                                        'file': '../' + data['video'],
                                        'image': data['imagen'],
                                        'backcolor': '0xFFFFFF',
                                        'frontcolor': '0x5C3937',
                                        'lightcolor': '0xAE2341'
                                    },
                                    width: width,
                                    height: height,
                                    wmode: 'OPAQUE',
                                    bcolor: '#000000'
                                })
    
                            parent.append(target)
    
                            var b = {
                                width: Math.floor($(window).width() * .9),
                                height: Math.floor($(window).height() * .9)
                            }
    
                            parent
                                .css({
                                    'display': 'block'
                                })
                                .find('> div:eq(0)')
                                    .css({
                                        'position': 'absolute',
                                        'bottom': Math.floor((b['height'] - height)/ 2),
                                        'right': Math.floor((b['width'] - width)/ 2 - 170),
                                        'display': 'block'
                                    })
    
                        }
                        else
                            parent.cssp(' \
                                this { \
                                    display: block; \
                                    background-image: none; \
                                } \
                                > div:eq(0) { \
                                    top: 20%; \
                                    left: 20%; \
                                    right: auto; \
                                    bottom: auto; \
                                    width: 60%; \
                                    height: 60%; \
                                    display: block; \
                                } \
                            ')
    
                        return parent;
                    }
                })
    
                continuos.__body.body.append(
                    $(' \
                      <span> \
                        <img src="scripts/box_logo.jpg" width="189" height="46" title="Magali Lara"> \
                        <ul> \
                          <li>' + (idioma == 'en' ? 'Use the keyboard to navigate' : 'Use el teclado para navegar') + '</li> \
                          <li>' + (idioma == 'en' ? 'Press \'Esc\' to close' : 'Presione \'ESC\' para salir') + '</li> \
                        </ul> \
                      </span> \
                    ')
                        .cssp('\
                            this { \
                                display: block; \
                                position: absolute; \
                                top: 5px; \
                                left: 0px; \
                                width: 100%; \
                                height: 46px; \
                                z-index: 151; \
                            } \
                            img { \
                                position: absolute; \
                                top: 0px; \
                                left: 50px; \
                                border: 0px; \
                                cursor: pointer; \
                            } \
                            ul { \
                                display: block; \
                                position: absolute; \
                                top: 0px; \
                                right: 50px; \
                            } \
                            li { \
                                display: block; \
                                float: left; \
                                line-height: 46px; \
                                color: #B22D42; \
                                font-size: 13px; \
                                font-weight: 800; \
                                padding-left: 40px; \
                                text-align: left; \
                                margin-left: 15px; \
                            } \
                            li:eq(0) { \
                                background-image: url(scripts/box_cruz.gif); \
                                background-repeat: no-repeat; \
                                background-position: center left; \
                            } \
                            li:eq(1) { \
                                background-image: url(scripts/box_cerrar.gif); \
                                background-repeat: no-repeat; \
                                background-position: center left; \
                                cursor: pointer; \
                            } \
                        ')
                        .find('img')
                            .click(function () {
                                continuos.hide();
                                return false;
                            })
                            .end()
                        .find('li:eq(1)')
                            .click(function () {
                                continuos.hide();
                                return false;
                            })
                            .end()
                )
                
                return false;
            })
    })
})