var NEWS_TIME = 5000;

var jsonNews;
var jsonFamilies;
var currentIdTimeoutNews;
var currentNew=0;

$(document).ready(function(){
    
    //Mostramos la precarga de imagenes
    $("#index_productsBarLoader").show();
    
    
    //Cargamos por ajax el JSON de productos.
    $.ajax({
        type: "POST",
        url: $("#relPath").val() + "common/classes/Servicios.asmx/jsonFamilias",
        contentType: "application/json; charset=utf-8",
        datatype:"json",
        success: function(msg) {         
            jsonFamilies = $.parseJSON(msg.d);        
            //setTimeout("showProducts();",3000);
            showProducts();            
        },
        error: function(res, status) {        
            if (status ==="error") {
                // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
                var errorMessage = $.parseJSON(res.responseText);
                alert(errorMessage.Message);
            }
        }
    });
    
           
    //Cargamos por ajax el JSON de noticias.
    $.ajax({
        type: "POST",
        url: $("#relPath").val() + "common/classes/Servicios.asmx/jsonNoticias",
        contentType: "application/json; charset=utf-8",
        datatype:"json",
        success: function(msg) {                
            jsonNews = $.parseJSON(msg.d);                    
            for(i=0; i<jsonNews.length;i++){                 
                $("#nav_news").append("<a id='news_" + i + "' class='news_item' onclick='expandNews(" + i + ");'>" + (i+1) + "</a> ");        
            }
            showNews(0);            
        },
        error: function(res, status) {        
            if (status ==="error") {
                // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
                var errorMessage = $.parseJSON(res.responseText);
                alert(errorMessage.Message);
            }
        }
    });
    
});


/**
* Show loaded news and switch it
*/
function showNews(number){
    
    var currentNew=number;
    
    //Ocultamos las noticias
    $("#content_news").fadeOut("slow",function(){
    
        //Marcamos la noticia seleccionada
        $(".news_item").css("font-weight","normal");
        $("#news_" + currentNew).css("font-weight","bold");
        
        //Titulo
        $("#title_news").html("<a onclick='expandNews(" + currentNew + ");'>" + jsonNews[currentNew].Titular + "</a>");
        
        //Body
        var maxNewsText = 300;
        if(jsonNews[currentNew].Cuerpo.length>maxNewsText){
            $("#body_news").html(jsonNews[currentNew].Cuerpo.substring(0,maxNewsText) + "...");
        }else{
            $("#body_news").html(jsonNews[currentNew].Cuerpo);
        }
        
        //Mostramos la noticia
        $("#content_news").fadeIn("slow");
        
        //Siguiente noticia
        if(currentNew==jsonNews.length-1){
            currentNew =0
        }else{
            currentNew += 1;
        }
        clearTimeout(currentIdTimeoutNews);       
        currentIdTimeoutNews = setTimeout("showNews(" + currentNew  + ");",NEWS_TIME); 
        
    });    
    
}

/**
* Muestra una noticia en una ventana modal
*/
function expandNews(number){

    showNews(number);
    clearTimeout(currentIdTimeoutNews);
    
    //Añadimos los datos de la noticia
    $("#hidCurrentNews").val(number);
    $("#pnlNews_title").html(jsonNews[number].Titular);
    $("#pnlNews_body").html(jsonNews[number].Cuerpo);    
    $find("mpeNews").show();
    
    
}

/**
* Oculta la ventana modal de las noticias
*/
function hideNews(){
       
    //showNews(parseInt($("#hidCurrentNews").val()));
    try{
    currentIdTimeoutNews = setTimeout("showNews(" + parseInt($("#hidCurrentNews").val()) + ");",NEWS_TIME); 
    }catch(e){}
    $find("mpeNews").hide();
    return false;
}


/**
* Oculta la ventana modal de las noticias
*/
function hideRecommended(){    
    $find("mpeRecommended").hide();
    return false;
}

function showRecommended(){    
    $find("mpeRecommended").show();
    return false;
}

function showProducts(){
    
    //Ocultamos la precarga
    $("#index_productsBarLoader").hide();    
    
    //Recogemos el contenedor
    var divContenedor = $("#index_products");
    
    //Ocultamos el contendor
    $(divContenedor).hide();
    
    var widthDiv = 0;
    
    //Recorremos el array de familias de producto
    for(i = 0; i< jsonFamilies.length;i++){
        
        //Añadimos la separación entre cada familia
        widthDiv += 6; 
        
        //Creamos una tabla por cada producto
        var currentTable = $("<table class='products_family' cellpading='0' cellspacing='0'></table>");
    
        
        //Le añadimos el borde al lateral izquierdo a todas menos la primera
        if(i!=0){
            $(currentTable).css("border-left","1px solid rgb(150,150,150)");
            widthDiv += 1; 
        }
        
        
        //Creamos la fila de productos
        var productsRow = $("<tr></tr>");
        for(j=0;j<jsonFamilies[i].modelosFamilia.length;j++){
            
            //Añadimos el ancho de cada producto
            widthDiv += 82;  
        
            var productCell = $("<td class='products_product'></td>");
            var productCellLink = $("<a href='" + $("#relPath").val() + "_public/products?p=" + jsonFamilies[i].modelosFamilia[j].IdModelo + "'></a>")
            var productImage = $("<div class='products_product_image' style='background-image:url(" + $("#relPath").val() + jsonFamilies[i].modelosFamilia[j].RutaImagenPortada + ")'></div>");
            var productTitle = $("<div class='products_product_title'>" + jsonFamilies[i].modelosFamilia[j].Nombre + "</div>");
            
            $(productCellLink).append(productImage);
            $(productCellLink).append(productTitle);
            $(productCell).append(productCellLink);
            $(productsRow).append(productCell);
        }
        
        var titleRow = $("<tr><td colspan='" + jsonFamilies[i].modelosFamilia.length + "' class='products_family_title'>" + jsonFamilies[i].Nombre + "</td></tr>");
        $(currentTable).append(productsRow);
        $(currentTable).append(titleRow);
        $(divContenedor).append(currentTable);
    
    }
    
    //Añadimos los binaurales
    
    
        widthDiv += 6; 
        
        //Creamos una tabla por cada producto
        var currentTableB = $("<table class='products_family' cellpading='0' cellspacing='0'></table>");
    
        $(currentTableB).css("border-left","1px solid rgb(150,150,150)");
        widthDiv += 1; 
                
        //Creamos la fila de productos
        var productsRowB = $("<tr></tr>");
        
        //Añadimos el ancho de cada producto
        widthDiv += 82;  
        
        var productCellB = $("<td class='products_product'></td>");
        var productCellLinkB = $("<a onclick='expandAcc();'></a>")
        var productImageB = $("<div class='products_product_image' style='background-image:url(" + $("#relPath").val() + "content/images/models/Binaurales.jpg)'></div>");
        var productTitleB = $("<div class='products_product_title'></div>");
            
        $(productCellLinkB).append(productImageB);
        $(productCellLinkB).append(productTitleB);
        $(productCellB).append(productCellLinkB);
        $(productsRowB).append(productCellB);
        
        
        var titleRowB = $("<tr><td class='products_family_title'>Binaurales</td></tr>");
        $(currentTableB).append(productsRowB);
        $(currentTableB).append(titleRowB);
        $(divContenedor).append(currentTableB);
    
    //Añadimos los accesorios
    
    
        widthDiv += 6; 
        
        //Creamos una tabla por cada producto
        var currentTableA = $("<table class='products_family' cellpading='0' cellspacing='0'></table>");
    
        $(currentTableA).css("border-left","1px solid rgb(150,150,150)");
        widthDiv += 1; 
                
        //Creamos la fila de productos
        var productsRowA = $("<tr></tr>");
        
        //Añadimos el ancho de cada producto
        widthDiv += 82;  
        
        var productCellA = $("<td class='products_product'></td>");
        var productCellLinkA = $("<a onclick='expandAcc();'></a>")
        var productImageA = $("<div class='products_product_image' style='background-image:url(" + $("#relPath").val() + "content/images/models/Accesorios.jpg)'></div>");
        var productTitleA = $("<div class='products_product_title'></div>");
            
        $(productCellLinkA).append(productImageA);
        $(productCellLinkA).append(productTitleA);
        $(productCellA).append(productCellLinkA);
        $(productsRowA).append(productCellA);
        
        
        var titleRowA = $("<tr><td class='products_family_title'>Accesorios</td></tr>");
        $(currentTableA).append(productsRowA);
        $(currentTableA).append(titleRowA);
        $(divContenedor).append(currentTableA);
    
    
    
    
    //Ajustamos el ancho de la capa contenedora    
    $(divContenedor).css("width",widthDiv+20 + "px");
    
    $(divContenedor).fadeIn("medium",function(){
        showButtons();
    });
        
}

var maxWidth = 974;
var margin = 30;

function buttonEvent(bto){
        
    var widthElement = 80;
    var numElements = 2;
    var speed = 750;
            
    switch(bto.id){
   
        case "btoLeft":                                         
            //$("#index_products").animate({left:"+=" + (numElements * widthElement)},speed,function(){showButtons();});            
            $("#index_products").animate(
                    {left:"+=" + (numElements * widthElement)},
                    {duration:speed,queue:false,complete:function(){showButtons();}}
                );
        break;
        
        case "btoRight":                               
            $("#index_products").animate({left:"-=" + (numElements * widthElement)},
                    {duration:speed,queue:false,complete:function(){showButtons();}}
                );        
        break; 
   
   }
        
}


function showButtons(){
          
    var widthContainer = parseInt($("#index_products").css("width").substring(0,$("#index_products").css("width").length-2));
    var currentPosition  = parseInt($("#index_products").css("left").substring(0,$("#index_products").css("left").length-2));
    
    //Mostramos u ocultamos los botones    
    if(currentPosition>0+margin){
        $("#btoLeft_gradient").hide();
        
    }else{       
        $("#btoLeft_gradient").show();
    }
    
    if( currentPosition  + widthContainer  < maxWidth - margin){       
        $("#btoRight_gradient").hide();
    }else{        
        $("#btoRight_gradient").show();
    }
    
}


/**
* Muestra una noticia en una ventana modal
*/
function expandAcc(){
    var Titulo = $('[id$="hidBinauralesTitle"]').val();
    var Contenido = $('[id$="hidBinauralesContent"]').val();
    $("#pnlAcc_title").html(Titulo);
    $("#pnlAcc_body").html(Contenido);            
    $find("mpeAcc").show();
}

function hideAcc(){    
    $find("mpeAcc").hide();
    return false;
}