var filtersLoded = false;
var keyboardActive = false;

$(document).ready(function() {

    /**
     * Clear Search
     */
    $('.clear-search').click(function(){
        $('#q').val('');
    });

    /**
     * If outside keyboard is clicked, keyboard is closed
     */
    $('*').live('click',function(){
        if (($(this).find('#keyboardContainer').length > 0) &&  $('#keyboardContainer').css('display') !== 'none') {
            $('#keyboardContainer').hide();
        }
    });

    /**
     * Open/Close Virtual Keyboard
     */
    $('.vkey').live('click',function(){
        if (false == keyboardActive) {
            VirtualKeyboard.toggle($(this).attr('id').replace('vkey-for-',''), 'keyboardContainer');
            keyboardActive = true;
        }
        if ($('#keyboardContainer').css('display') !== 'none') {
            $('#keyboardContainer').hide();
        } else {
            $('#keyboardContainer').show();
        }
    });
    
    /**
     * Enter Submits
     */
    $('#kb_benter').live('click',function(){
        $('form').submit();
    });

    /**
     *Show 'Loading'
     */
    $('#search').submit(ajaxLoad);

    $('#form-contact').validate({
        //errorContainer: '#messages-container',
        //errorLabelContainer: "#messages",
        //errorElement: 'li',
        rules:{
            'name':{
                required:true
            },
            'email':{
                required:true,
                email:true
            },
            'message':{
                required:true
            }
        },
        messages:{
            'name':{
                required:'Campo obrigatório.'
            },
            'email':{
                required:'Campo obrigatório.',
                email:'Email inválido.'
            },
            'message':{
                required:'Campo obrigatório.'
            }
        }
    });

    /**
     * Tag cloud
     */
    if ($(".tags").length > 0) {
        $("#tags").tagcloud({
            type:"list",
            sizemin:10,
            sizemax:30
            //colormin:"ff0",
            //colormax:"00f"
        });

       $("#tags-brands, #tags-categories").tagcloud({
            type:"list",
            sizemin:15,
            sizemax:15
            //colormin:"ff0",
            //colormax:"00f"
        });
    }

    /**
     * inicializa o plugin scrollable
     */
    scrollable();

    /**
     * Busca Marcas e dá foco na aba de marcas
     */
    $('.button.marcas').live('click',function(){
        $('#produtos, #categorias, .prevpage, .nextpage, .results').hide();
        $('#marcas').show();
        $('.button').removeClass('active');
        $(this).addClass('active');
        loadFilters();
    });

    /**
     * Busca Categorias e dá foco na aba de categorias
     */
    $('.button.categorias').live('click',function(){
        $('#produtos, #marcas, .prevpage, .nextpage, .results').hide();
        $('#categorias').show();
        $('.button').removeClass('active');
        $(this).addClass('active');
        loadFilters();
    });

    /**
     * Dá foco na aba de produtos
     */
    $('.button.produtos').live('click',function(){
        $('.prevpage, .nextpage, .results').show();
        $('#marcas, #categorias').hide();
        if ($('#produtos').find('li').length > 0) {
            $('#produtos').show();
        }
        $('.button').removeClass('active');
        $(this).addClass('active');
    });
    
    /**
     * Desabilita os links que
     */
    $('a.prevpage, a.nextpage').live('click',function(){
        if($(this).attr('href') !== '#') {
            ajaxLoad();
            window.location.href = $(this).attr('href');
        }
    });

    /**
     * Faz o click da li se comportar da mesma forma como se estivesse clicando
     * no link
     */
    $('#categorias li:not(.active), #marcas li:not(.active)').live('click',function(){
        ajaxLoad();
        var url = $(this).find('a:first').attr('href');
        $(this).addClass('active').parents('div').find('li').removeClass('active');
        window.location.href = url;
    });

});

/**
 * Inicia scrollable.
 * Opcoes para o scrolalble:
 * activeClass:"active"      circular:false    clonedClass:"cloned",
 * disabledClass:"disabled"  easing:"swing"    initialIndex:0,
 * item:null                 items:".items"    keyboard:true,
 * mousewheel:false          next:".next"      prev:".prev",
 * speed:400                 vertical:false    wheelSpeed:0
 */
function scrollable(){
    try {
        //$('#main, .scrollable').unbind();
        // main vertical scroll
        $("#main").scrollable({
            // basic settings
            vertical: true,
            // up/down keys will always control this scrollable
            keyboard: 'static',
            // assign left/right keys to the actively viewed scrollable
            onSeek: function(event, i) {
                horizontal.eq(i).data("scrollable").focus();
            }
        // main navigator (thumbnail images)
        }).navigator("#main_navi");

        // horizontal scrollables. each one is circular and has its own navigator instance
        var horizontal = $(".scrollable").scrollable({
            circular: true,
            prev: '.anterior',
            next: '.proximo'
        }).navigator(".navi");
        // when page loads setup keyboard focus on the first horzontal scrollable
        horizontal.eq(0).data("scrollable").focus();
    } catch (e){}

    //alinha bolinhas (navegador do scrollable)
    $('div.navi').each(function(){
        var num = $(this).siblings('.scrollable')
        .children('.items')
        .children('.item')
        .not('.cloned')
        .length;

        //8px image + 3 margin
        var imagesWidth = (14 * num);

        //500px div width
        var margin = ((500 - imagesWidth)/2);
        $(this).css('margin-left',margin);
    });
}

/**
 * Carrega os filtros de Marcas e Categorias
 */
function loadFilters() {

    if (filtersLoded) return;

    ajaxLoad();

    $.ajax({
        url: baseUrl,
        type: 'POST',
        //async: false,
        data: {
            'q' : queryString['q'],
            'pp': 999999
        },
        success: _loadFilters,
        error: function() {
            var ok = confirm('Um erro ocorreu na tentativa de carregar as Categorias e Marcas. Gostaria de repetir a ação?');
            if (ok) loadFilters();
        },
        complete: function() {
            ajaxUnload();
        }
    });
}

function ajaxLoad() {

    if ($('#ajax-loader').length == 0) {
        var div = '<div id="ajax-loader" style="display:none; overflow:hidden;">'
        +    '<span style="width:100px;height:30px;background:black; padding:20px;">Carregando...</span>'
        + '</div>';

        $('body').prepend(div);
    }

    $('#ajax-loader').openDOMWindow({
        modal:1,
        windowSourceID:"#ajax-loader",
        windowBGColor:'none',
        borderSize :0,
        height:100,
        width:150,
        overlayColor:'#000',
        overlayOpacity:'50'
    });
}
function ajaxUnload(){
    $('#ajax-loader').closeDOMWindow();
}

/**
 * Carrega os filtros
 */
var categoryLi = '<li class="{class}"><a href="{url}">{name}<br /><span class="total">({total_products})</span></a></li>';

var brandLi = '<li class="{class}"><a href="{url}"><img src="{img}" alt="{alt}" align="left" hspace="10">{name}</a>'
+ '<br /><span class="total">({total_products})</span></li>'

var noFilterLi = '<li style="line-height:60px;" class="center {class}"><a href="{url}">TODAS AS {filter}</a></li>';

var url = baseUrl + '?'
+ 'q=' + queryString['q']
+ '&ma={brand}&ca={category}';


function _loadFilters(json) {
    if (json.success == true) {
        filtersLoded = true;
        var brands = json.brands.brands;
        var categories = json.categories.categories;
        var category, brand;
        var li = '';
        var liClass = '';
        var liSeq = 1;

        //monta categorias
        var ul = $('<ul>');
        ul.append(noFilterLi.replace('{class}',(queryString['ca']=='') ? 'active' : '')
            .replace('{filter}','CATEGORIAS')
            .replace('{url}', url.replace('{category}','')).replace('{brand}',urlencode(queryString['ma'])));
        liSeq = 1;

        $('#categorias').html(ul);
        for( var i = 0; i < categories.length; ++i) {
            category = categories[i];
            liClass = 'bb bl';
            if (category.name == queryString['ca']){
                liClass += ' active';
            }
            if(++liSeq <= 3) {
                liClass += ' bt';
            }
            if(((liSeq%3) == 0) || ((categories.length -1) == i) ) {
                liClass += ' br';
            }
            
            li = categoryLi.replace('{name}', category.name)
            .replace('{url}', url.replace('{category}',urlencode(category.name)).replace('{brand}',urlencode(queryString['ma'])))
            .replace('{total_products}', '' + category.numberOfProducts + ' produto' + (category.numberOfProducts > 1 ? 's' : ''))
            .replace('{class}',liClass);
            ul.append(li);
        }

        //monta marcas
        ul = $('<ul>');
        ul.append(noFilterLi.replace('{class}',(queryString['ma']=='') ? 'active' : '')
            .replace('{filter}','MARCAS')
            .replace('{url}', url.replace('{brand}','')).replace('{category}',urlencode(queryString['ca'])));
        liSeq = 1;
        liClass = 'bb bl';
        $('#marcas').html(ul);
        for(i = 0; i < brands.length; ++i) {
            brand = brands[i];
            category = categories[i];
            liClass = 'bb bl';
            if (brand.name == queryString['ma']){
                liClass += ' active';
            }
            if(++liSeq <= 3) {
                liClass += ' bt';
            }
            if(((liSeq%3) == 0) || ((brands.length -1) == i) ) {
                liClass += ' br';
            }
            
            li = brandLi   .replace('{name}', brand.name)
            .replace('{img}', json.brands.logoPath + brand.logo)
            .replace('{alt}', brand.name)
            .replace('{url}', url.replace('{category}',urlencode(queryString['ca'])).replace('{brand}',urlencode(brand.name)))
            .replace('{total_products}', '' + brand.numberOfProducts + ' produto' + (brand.numberOfProducts > 1 ? 's' : ''))
            .replace('{class}',liClass);
            ul.append(li);
        }
    }
}

/**
 * Substitue espacos por '+'
 */
function urlencode(string) {
    return string.replace(/\s/g,'+')
    .replace('&','%26');
}