$(document).ready(function(){
  var pocet_elementov=0;
  var timer;
  var snimok=1;
  
  $("#ref_menu ul li").hover(
    function(){
      over_funkcia(this);
      //console.log(snimok);
      var aktual=$(this).attr("id");
      $("#"+aktual).click();
    },
    function(){
      out_funkcia(this)
    });
  
  $("#ref_menu ul li").each(function(){
  pocet_elementov++;
  $(this).attr("id",pocet_elementov);
  })
  
  $("#ref_menu ul li").click(  
    function () {
    snimok=$(this).attr('id');
    $("#ref_menu ul li.active").removeClass("active");
  
    $(this).addClass("active");
  
    $("#ref_menu ul li").each(function(){
      if($(this).hasClass("active")){     
        over_funkcia(this);
      }
      else{
        out_funkcia(this);
      }
    });
    
    var cesta=$(this).find("img").attr("src");
    var linka=$(this).find("span").text();
    var pozadie=$(this).find("span").css('background-color');
    var pole=cesta.split("/");
    pole.reverse();
    var subor=pole[0].split(".");
    subor[0]=subor[0].slice(0,-2);
    subor[1]='jpg';
    subor=subor.join(".");
    //pole[0]=subor;
    pole.reverse();
    pole.pop();
    pole.push("orig",subor);
    pole=pole.join("/");
    var img = new Image();
    
    // wrap our new image in jQuery, then:
    $(img).addClass('loading');
    $("#referencie_obal").fadeOut(function(){
  
    
    
    //pasue(1000);
    $(img)
      // once the image has loaded, execute this code
      .load(function () { 
      
        
        // set the image hidden by default    
        $(this).hide();
  
        // with the holding div #loader, apply:
        $('#referencia')
          // remove the loading class (so no background spinner), 
          .removeClass('loading')
          // then insert our image
          .html(this);
          //console.log(obrazok);
        // fade our image in to create a nice effect
        //$(this).fadeIn();
        $(this).show();
        var obrazok=$('#referencia').html();
          $('#referencia').html("<a href=\""+linka+"\">"+obrazok+"</a>");
        $("#referencie_obal").css('background-color',pozadie);
        $("#referencie_obal").fadeIn();
      })
      
      // if there was an error loading the image, react accordingly
      .error(function () {
        // notify the user that the image could not be loaded
      })
      
      // *finally*, set the src attribute of the new image to our image
      .attr('src',pole);
       });
      
      /////ROLOVANIE
      var dalsi=eval(snimok);
      dalsi++;
      
      if(dalsi>pocet_elementov)
        dalsi=1;
  
      clearTimeout(timer);
      timer=setTimeout("$(\"#"+dalsi+"\").click()",7000); 
  });
  
$("#1").click();
}) ;

function pause(numberMillis)
{
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true)
{
now = new Date();
if (now.getTime() > exitTime)
return;
}
} 

function over_funkcia(el){
//alert($(el).attr("id"));
 // if($(el).hasClass("active"))
  //  return;
  var pole=$(el).find("img").attr("src").split("/");
    pole.reverse();
    var subor=pole[0].split(".");
    if(subor[0].search("_o")==-1)
      subor[0]=subor[0]+"_o";
    subor=subor.join(".");
    pole[0]=subor;
    pole.reverse();
    pole=pole.join("/");
    $(el).find("img").attr("src",pole);  
}

function out_funkcia(el){
  if($(el).hasClass("active"))
    return;
  var pole=$(el).find("img").attr("src").split("/");
    pole.reverse();
    var subor=pole[0].split(".");
    if(subor[0].search("_o")>-1)
      subor[0]=subor[0].slice(0,-2);
    subor=subor.join(".");
    pole[0]=subor;
    pole.reverse();
    pole=pole.join("/");  
    $(el).find("img").attr("src",pole);  
}