var clknex = 0;
var clkpre =0;
var nex= 4;
var pre = 0;
var longitud;
var ls = 1;
$(document).ready(function (){
    longitud = $('.list_'+ls).children('li').length;
    var title = $('#ls_'+ls).val();
    $('.title').html(title);
    this.list = $('.list_'+ls);
    var lista = this.list.children('li');
    var cont = 0;
    while (lista.length>cont){
        var wdth = 142 + (142 * cont);
        $('.list_'+ls).width(wdth);
        cont++;
    }

////para la modal
//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});


})

function prev(){
    if (pre!=0){
        wdth = 142 + 142*clkpre;
        //$('.list_'+ls).css('left', wdth+'px');
        $('.list_'+ls).animate({"left": wdth+"px"}, "slow");
        clkpre++;
        clknex--;
        nex--;
        pre++;
    }
    else{
        if(ls==1){
            ls=5;
            clkpre = 0;
            clknex=0;
            nex =4;
            resize(ls);
            $('.list_1').hide();
            $('.list_1').css('left', '0px');
            $('.list_'+ls).show();
        }
        else{
            clkpre = 0;
            clknex=0;
            nex =4;
            ls--;
            resize(ls);
            var oldls = ls + 1;
            $('.list_'+oldls).hide();
            $('.list_'+oldls).css('left', '0px');
            $('.list_'+ls).show();
        }
    }

}
function next(){
    if (longitud>nex){
        wdth = 142 + 142*clknex;
        //$('.list_'+ls).css('left', '-'+wdth+'px');
        $('.list_'+ls).animate({"left": "-"+wdth+"px"}, "slow");
        clknex++;
        clkpre--;
        nex++;
        pre--;
    }
    else{
        if(ls!=5){
            clknex = 0;
            clkpre=0;
            nex =4;
            pre=0;
            ls++;
            resize(ls);
            var newls = ls -1;
            $('.list_'+newls).hide();
            $('.list_'+newls).css('left', '0px');
            $('.list_'+ls).show();
        }
        else{
            ls=1
            clknex = 0;
            clkpre=0;
            nex =4;
            pre=0;
            resize(ls);
            $('.list_5').hide();
            $('.list_5').css('left', '0px');
            $('.list_'+ls).show();
        }
    }
    
}
function resize(lss){
    longitud = $('.list_'+lss).children('li').length;
    var title = $('#ls_'+lss).val();
    $('.title').html(title);
    this.list = $('.list_'+lss);
    var lista = this.list.children('li');
    var cont = 0;
    while (lista.length>cont){
        var wdth = 142 + (142 * cont);
        $('.list_'+lss).width(wdth);
        cont++;
    }
}



             function modalhv(){ 
                                /* $("#myModal").dialog({
                                         title: "Interactivo Contact Center",
                                         modal: true,
                                         show: "blind",
                                         hide: "explode",
                                         buttons: {
				            Aceptar: function() {
					    $( this ).dialog( "close" );
				          }}
                                   });*/


				  //Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$("#myModal").css('top',  winH/2-$(id).height()/2);
		$("#myModal").css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$("#myModal").fadeIn(2000);
                                  

                                }