$(document).ready(function(){
    set_height_gallery(); //auto size menu left and right

   var lim_count_show =2; //loop to see images
   var count_show=1;
   var time_slide = 5000;
   var start_pic = 2;
   var show_slide = true;

   //first image to see
    img(pic_array[1],1);
    $("#screen_img").css("display", "block");

   if(show_slide)
   {
        //auto show pictures
        $(".gal_button:first").everyTime(time_slide, 'timer1', function() {

              if(start_pic < pic_array.length)
              {
                img(pic_array[start_pic], start_pic);
                start_pic++;
              }
              else
              {
                  $("#screen_img").stop();
                if(count_show < lim_count_show){start_pic=1; count_show++;}else{$(".gal_button:first").stopTime('timer1');}
              }
        });
   }

    function img(src, n) {
        
         $("#screen_img").ready(function(){
             $("#screen_img").fadeOut(1000, function (){

                $("#screen_img").attr("src",src).load( function (){
                    $("#screen_img").fadeIn(1000);});

             });

              active_button(n);
         });
    }


    function active_button(t){
        $(".gal_button").removeClass("gal_button_active");
        $(".gal_button:nth-child("+(t)+")").addClass("gal_button_active");
    }

 
   $(".gal_button").click(function(){
       img(pic_array[this.innerHTML], this.innerHTML);
       $(".gal_button:first").stopTime('timer1'); //stop timer auto show pictures
   });


   function set_height_gallery(){
        var newh = $("#main_container").attr("clientHeight");
        if(!newh){newh = $("#main_container").attr("offsetHeight");} /*for IE*/
        $('#galery').css("height",newh+'px');
        set_height_main(newh);
   }

   function set_height_main(h){
       var glery_button = $('#glery_button').attr("clientHeight");
        if(!glery_button){glery_button = $("#glery_button").attr("offsetHeight");} /*for IE*/

       //auto size menu left and right
        $('#leftmenu').css("height", glery_button+h+'px');
        $('#maincontent').css("height", glery_button+h+'px');
        $('#rightmenu').css("height", glery_button+h+'px');
   }
  
 });