/*
includować tak:
<script LANGUAGE="JavaScript" SRC="js_utils.js">
</script>
robi to np. layout.php w LLayoutMetatags 
*/

String.prototype.trim = function() {
  a = this.replace(/^\s+/, '');
  return a.replace(/\s+$/, '');
};


$(document).ready(function()
//$(function() 
{
	//każdy link/dowolny inny element który będzie klasy "open_dialog" jest klikalny i spowoduje otwarcie
	//elementu o id=dialog (np. <div id="dialog"></div> )
	//ewent. można podać inny id dialogu. Przykład elementu pokazującego dialog:
  //<p class="pseudolink open_dialog"  href="http://konradp.com" data-image-link="http://corlive.com/rybki/uploads/files/800px-Pelvicachromis_pulcher__28female_29.jpg" data-title="tytuł">test link</p>
  
  
  //wersja z użyciem dialog w jquery-ui   	
  /*$(".open_dialog").click(function(){
    var dlgId=$(this).attr("data-dialog-id");if(dlgId==undefined)dlgId="dialog";
    var link=$(this).attr("data-image-link");
    var title=$(this).attr("data-title");
    //pic1= new Image();pic1.src=link;//preloading: i tak nie działa...     
    $("#"+dlgId).dialog('close');
    $("#"+dlgId).dialog('option', 'height', 400);//dziwne, ale konieczne, bo inaczej ie czasem pokazuje bardzo niski dialog
    $("#"+dlgId).dialog({height:400,width:600,autoOpen:false}).dialog('open').dialog('option', 'title', title);//.show('blind');
    var html='<div style="height:400px"><img src="'+link+'" style="width:100%;"></div>';
    $("#"+dlgId).html(html);
  })  
  */            
  
  $(".open_dialog").click(function(){
    var dlgId=$(this).attr("data-dialog-id");if(dlgId==undefined)dlgId="dialog";
    var dlgImgDivId=dlgId+"_imgdiv";//div w którym jest img
    var dlgImgId=dlgId+"_img";//sam img element
    var dlgTitleId=dlgId+"_title";//title
    
    $("#"+dlgImgDivId).html("");//czyścimy dotychcz. zawartość.
    $("#"+dlgImgId).css("width","100%");//przywracamy "normalny" styl
    var link=$(this).attr("data-image-link");
    var title=$(this).attr("data-title");
    var species_name_latin=$(this).attr("data-species-name-latin");
    //myImage = new Image(); 
    //myImage.src = link;     
    var html='<div style=""><img id="'+dlgImgId+'" src="'+link+'" style="width:100%;"></div>';
    $("#"+dlgId).show("scale","","",function(){$("#"+dlgImgDivId).html(html);});
    /*$("#"+dlgImgDivId).click(function(){
      $("#"+dlgImgId).css("width","200%");
    });*/
    //title - min. link "zobacz artykuł"
    var titleHtml='<a href="show.php?species_name_latin='+species_name_latin+'">Zobacz artykuł</a>';
    $("#"+dlgTitleId).html(titleHtml);
    $("#"+dlgTitleId).click(function(){$("#"+dlgId).hide()});//zamknięcie dialogu gdy user kliknie np. na "zobacz artykuł"
  })  

//gdy już wszystkie obrazki się załadują:             
$(window).load(function(){
  $("#page_loading_progress").hide();//jeśli istnieje ten element (najczęściej obrazek), to go ukrywamy
})

})