$(document).ready(function() {
    
    //Carga de canales inicial
    $.ajax({
        url: "/webservices/get_canales.php",
        type: 'post',
        dataType: 'json',
        data:"idioma=es&num=25&pag=0",
        async: false,
        success: function(data){
            var html = '';
            $.each(data, function(index,value) {
                if(data.length>0){
                    html += canal(value.id,value.nombre,value.idfoto,value.idiomas,value.gratis,value.calidad);           
                } else {
                    html += 'No hay canales disponibles'; 
                }
            }); 
            html += '<div id="1" class="showmore">Mostrar más canales</div>';
            $("DIV#canales").append(html); 
            
            /*FACEBOX WRAPPER*/  

            if($("DIV#initloadchannel").text() != ""){
                channel_name = $("DIV#initloadchannel").text();
                $("DIV#wrapper").overlay({
                    mask: {color: '#000',loadSpeed: 200,opacity: 0.5},
                    fixed:false, 
                    onBeforeLoad: function() {
                        $("DIV#wrapper").css("width","940px"); 
                        // En esta caso el id del div overlay se obtiene por defecto del atributo REL del lanzador (trigger) 
                        var wrap = this.getOverlay().find(".html");
                        // Se obtiene la url del atributo href del lanzador, en este caso el elemento que contenga la clase showoverlay
                        //canales.php?canal=' + id + '
                        //wrap.load(this.getTrigger().attr("href")); 
                        wrap.load("/canales.php?canal="+channel_name); 
                    },
                    onClose:function() {
                        this.close()
                    },
                    load: true                 
                });            
            }
            
            
            $("A.showoverlay").overlay({
                mask: {color: '#000',loadSpeed: 200,opacity: 0.5},
                fixed:false, 
                onBeforeLoad: function() {
                    $("DIV#wrapper").css("width","940px"); 
                    // En esta caso el id del div overlay se obtiene por defecto del atributo REL del lanzador (trigger) 
                    var wrap = this.getOverlay().find(".html");
                    // Se obtiene la url del atributo href del lanzador, en este caso el elemento que contenga la clase showoverlay
                    wrap.load(this.getTrigger().attr("href")); 
                },
                onClose:function() {
                    this.close()
                }
                 
            });
            /*FACEBOX WRAPPER*/               
                                   
        }
    }); 
          
    $('#showbyphoneiframe').live('click',function(){
        referencia = $('#refbyphone').val();
        DisableSASChat();
        $.ajax({
            url: "ajax/html-byphoneiframe.php",
            type: 'post',
            dataType: 'html',
            data:"ref="+referencia,
            async: false,
            success: function(data){
                $('#byphoneiframe').html(data);
            }
        });                      
    });          
            
    //Mostrar más canales
    $("DIV.showmore").live('click',function(){
        pag = $(this).attr("id");
        $.ajax({
            url: "/webservices/get_canales.php",
            type: 'post',
            dataType: 'json',
            data:"idioma=es&num=25&pag="+pag,
            async: false,
            success: function(data){
                var html = '';
                $.each(data, function(index,value) {
                    if(data.length>0){
                        html += canal(value.id,value.nombre,value.idfoto,value.idiomas,value.gratis,value.calidad);           
                    } else {
                        html += 'No hay canales disponibles'; 
                    }
                }); 
                html += '<div id="' + (parseInt(pag)+1) + '" class="showmore">Mostrar más canales</div>';
                $("DIV#canales").append(html); 
                $("DIV.showmore[id="+pag+"]").removeClass("showmore").addClass("pag").text("Página " + (parseInt(pag)+1));
                
                /*FACEBOX WRAPPER*/  
                $("A.showoverlay").overlay({
                    mask: {color: '#000',loadSpeed: 200,opacity: 0.5},
                    fixed:false, 
                    onBeforeLoad: function() {
                        $("DIV#wrapper").css("width","940px"); 
                        // En esta caso el id del div overlay se obtiene por defecto del atributo REL del lanzador (trigger) 
                        var wrap = this.getOverlay().find(".html");
                        // Se obtiene la url del atributo href del lanzador, en este caso el elemento que contenga la clase showoverlay
                        wrap.load(this.getTrigger().attr("href")); 
                    },
                    onClose:function() {
                        this.close()
                    }
                     
                });
                /*FACEBOX WRAPPER*/                   
                
            }                      
        });                       
    });              
}); 
    
function canal(id,nombre,idfoto,idiomas,gratis,calidad){
    var html = '';
    html += '<div id="' + id + '" class="canal">';
        //Imagen canal
        html += '<a class="showoverlay" rel="#wrapper" href="/canales.php?canal=' + nombre + '"><img src="http://fotos.sexywebcam.com/prev/176x132/' + idfoto + '.jpg" width="176" height="132" alt="' + nombre + '" /></a>';
        html += '<div class="nombre_canal">' + nombre.replace(/[-_]/g," ").toLowerCase() + '</div>';
        //Etiqueta gratis
        if(gratis && 1==2) {
            html += '<div class="thgratis"><img src="/img/gratis_es.gif" alt="GRATIS! FREE!" width="40" height="11" /></div>';
        } 
        //Iconos HD HQ              
        html += '<div class="thhd">';
        if (calidad === 'HD') {
            html += '<img src="/img/icon_hd.png" alt="HD" />';
        } else if (calidad === 'HQ') {
            html += '<img src="/img/icon_hq.png" alt="HQ" />';
        }
        html += '</div>';         
        //Icono WebCam        
        html += '<div class="thwebcamon"></div>';
        //Banderas
        html += '<div class="thflags">';
        var flags = idiomas.split(',');
        for(lang in flags) {
            html += '<img src="/img/flag_' + flags[lang] + '.gif" width="16" height="11" alt="' + flags[lang] +'" />';
        }
        html += '</div>';                        
    html += '</div>';
    return html;     
}