var BLOCOS = function () {
    var LOADER = '/media/img/sc/ajax-loader.gif';
    var prefix = 'des_';
    var msgInicial = '<li>vazia</li>';
    return {
        setMsgInicial: function(msgInicialEl) {
            msgInicial = msgInicialEl;
        },
        resetRoteiro: function() {
            $('#roteiro').empty().append(msgInicial);
        },
        numDesfiles: function() {
            return $('#roteiro li').length;
        },
        addDesfileTela: function(bloco) {
            var formataData = function(data) {
                var d = data.split(/[-: ]/);
                var dia = d[2][0]==='0'? d[2][1] : d[2];
                var mes = parseInt(d[1],10); //inteiro pois dava erro no ie6
                var hora = d[3][0]==='0'? d[3][1] : d[3];
                return dia + '/' + mes + ' ' + hora + 'h';
            };
            $('#msgInicial').remove();
            var el = $('<li id="' + prefix + bloco.id + '">' +
                        bloco.nome + ' <i>' + formataData(bloco.data) + '</i>&nbsp;' +
                       '<img id="del_' + bloco.id + '" class="acao del_desfile" src="http://www.samba-choro.com.br/s-c/icons/error_32.png" height="16" width="16" title="Remover do roteiro"/>' +
                       '</li>').hide();
            el.data('data', bloco.data);
            var desfiles = $('#roteiro').children();
            var found = false;
            if (desfiles.length > 0) {
                for (var i=0; i < desfiles.length; i++) {
                    if (bloco.data < $(desfiles[i]).data('data') ) {
                        $(desfiles[i]).before(el);
                        found = true;
                        break;
                    }
                }
            }

            //trata 2 casos: lista vazia e maior que todos;
            if (!found) {
                $('#roteiro').append(el);
            }
            //animação para destacar novo elemento
            el.slideDown('slow');
        },
        removeDesfileTela: function(bloco) {
            $('#' + prefix + bloco.id).remove();

            if (this.numDesfiles() == 0) {
                this.resetRoteiro();
            }
        },
        addDesfile: function(desfileId) {
            var oldImg = $('#add_' + desfileId).attr('src');
            $('#add_' + desfileId).attr('src', LOADER);
            var atualizaTela = function(dados) {
                BLOCOS.addDesfileTela(dados);
                $('#add_' + desfileId).hide();
                $('#add_' + desfileId).attr('src', oldImg);
                
            };
            var ajaxParams = {type: 'POST',
                              url: 'roteiros/add',
                              data: {desfile: desfileId},
                              success: atualizaTela,
                              dataType: 'json'};
            var tryAgain = function() { //erro wsgi
                delete ajaxParams.error;
                $.ajax(ajaxParams);
            };
            ajaxParams.error = tryAgain;
            $.ajax(ajaxParams);
        },
        removeDesfile: function(desfileId) {
            $('#del_' + desfileId).slideUp('slow');
            var atualizaTela = function (data){
                BLOCOS.removeDesfileTela(data);
                $('#add_' + desfileId).show();
            };
            var ajaxParams = {type: 'POST',
                              url: 'roteiros/remove',
                              data: {desfile: desfileId},
                              success: atualizaTela,
                              dataType: 'json'};
            var tryAgain = function() { //erro maluco wsgi
                delete ajaxParams.error;
                $.ajax(ajaxParams);
            };
            ajaxParams.error = tryAgain;
            $.ajax(ajaxParams);
        },
        calculaGuiaOffset: function(guiaOffset, scrollTop, guiaHeight, 
                                    viewportHeight, topInicial) {
            if (scrollTop < topInicial) {
                return topInicial;
            }
            if (guiaHeight < viewportHeight || 
                guiaOffset > scrollTop) {//então está subindo
                return scrollTop;
            }
            if (guiaOffset <= scrollTop &&
                (guiaOffset+guiaHeight) >= (scrollTop+viewportHeight)) {
                return guiaOffset;
            }
            return scrollTop + viewportHeight - guiaHeight;
        }
}
}();

$(document).ready(function () {

    BLOCOS.setMsgInicial($('#msgInicial'));
    var guiaPane = $('#container'),
        guiaUL   = $('#guia'),
        topInicial = guiaPane.length?guiaPane.offset().top:null,              
        guiaScrolled = false;                  

    if (!guiaUL) {
        return; 
    }
    //widget de guia de blocos                  
    $('.add_desfile').live('click', function (){
                               var desfileId = this.id.split('_')[1];
                               BLOCOS.addDesfile(desfileId);
                           });       
    $('.del_desfile').live('click', function (){
                               var desfileId = this.id.split('_')[1];
                               BLOCOS.removeDesfile(desfileId);
                           });       
                      
    var posicionaGuia = function() {
        var scrollTop  = $(window).scrollTop(),
        guiaHeight = guiaUL.height(),
        viewportHeight = $(window).height(),
        guiaOffset = guiaPane.length?guiaPane.offset().top: null;
        var newGuiaOffset = BLOCOS.calculaGuiaOffset(guiaOffset, scrollTop, 
                                                     guiaHeight, viewportHeight, 
                                                     topInicial);
        if (newGuiaOffset != guiaOffset) {
            //subtrai pois calcula a pos absoluta e o elemento é relativo
            guiaPane.css('top', (newGuiaOffset - topInicial) + "px");
            guiaPane.css('z-index', "999999999999");
        }
    };
    posicionaGuia();            
    $(window).scroll(function() {
                         if (guiaUL) {guiaScrolled = true;}
                     });
                          
     setInterval(function(){
                    if (guiaScrolled) {
                        guiaScrolled = false;
                        posicionaGuia();
                    }
                 }, 200);

});