function SetImageWidth(data) {

   var wrap = $("div#image_gallery #image_wrap");
   var img = wrap.find("img");

   //img.removeAttr('width');
   wrap.css("height", img.height());
   img.hide();
   img.attr("src",data.src);
   img.attr("imgid",data.imgid);
   img.load(function() {
      var height = data.height;
      
      //set image width
      if (data.width > 630) {
         img.css("width","630px");
         height = data.height / data.width * 630;
      }
      else {
         img.css("width",data.width);
      }
      
      wrap.animate( {
         height: height 
      }, {
         queue: false, 
         duration: 300
      });
      img.show();
   });
   
}

function SetSingleImageSize() {
   var wrap = $("div#image_gallery #image_wrap");
   //we have a single picture in #image_wrap
   //get image id
   var imgId = wrap.find("img").attr("rel");
    
   if ($.trim(article_picture_author_array[imgId]).length > 0){
      $("div#article_picture_author").show();
      $("div#article_picture_author").css("color", "#82878c");
      $("div#article_picture_author").html(article_picture_author_array[imgId]);
   }else{
   //$("div#article_picture_author").hide();
   }
    
   $.getJSON("http://"+location.host+"/services/getimagesize.php",
   {
      "src" : article_picture_url_array[imgId],
      "imgid" : imgId
   },
   SetImageWidth
   );
}

// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
   
   //this is for single image (no gallery)
   if ( $("div#image_gallery").length ) {
      //check if thumscroller is loaded
      var n = $("div#image_gallery div.d_thumbscroller").length;
      if (n==0) {
         SetSingleImageSize();
      }
   }
                                                                                                                                                                                                                                                                                                                       
   $("div#image_gallery .items div.thumbnail_overlay span img").click(function() {
      // see if same thumb is being clicked
      if ($(this).parent().parent().hasClass("active")) {
         return;
      }

      // get large image url from rel
        
      var imgId = $(this).parent().parent().attr("rel");
      var url = article_picture_url_array[imgId];
        
      // get handle to element that wraps the image and make it semi-transparent
      var wrap = $("div#image_gallery #image_wrap");
        
      
      if ($.trim(article_picture_author_array[imgId]).length > 0){
         $("div#article_picture_author").show();
         $("div#article_picture_author").css("color", "#82878c");
         $("div#article_picture_author").html(article_picture_author_array[imgId]);
      }else{
      //$("div#article_picture_author").hide();
      }
        
        
      //set single piksle image to shiw loader image
      /*var flowpicture = wrap.find("img");
      flowpicture.attr("src","/assets/delo_v3/gallery/img/blank1x1.gif");
      flowpicture.attr("heigth","400");
      flowpicture.attr("width","400");*/
        
      //make json call to server to get image size
      $.getJSON("http://"+location.host+"/services/getimagesize.php",
      {
         "src"   : url,
         "imgid" : imgId
      },
      SetImageWidth
      );

      /*/set fade efect to image object
      var img = new Image();

      // call this function after it's loaded
      img.onload = function() {
         // make wrapper fully visible
         wrap.fadeTo("fast", 1);
      // change the image
      //wrap.find("img").attr("src", url);
      };*/
           
      // set active frame around thumbnail 
      $("div#image_gallery .items div.thumbnail_overlay").removeClass("active");
      $(this).parent().parent().addClass("active");
   });
   // when page loads simulate a "click" on the first image
   $("div#image_gallery .items div.thumbnail_overlay span img").filter(":first").click();      
   
                                                                                                                                                                                                                                                                                                                            
   // initialize scrollable
   $("div#image_gallery .scrollable").scrollable({
      activeClass:"active",
      circular:true,
      clonedClass:"cloned",
      disabledClass:"disabled",
      easing:"swing",
      initialIndex:0,
      item:null,
      items:".items",
      keyboard:true,
      mousewheel:false,
      prev:".prev",
      next:".next",
      speed:400,
      touch:true,
      vertical:false,
      wheelSpeed:0
   });
       
});