// JavaScript Document
var dispTime = 7000;  // milliseconds
$(document).ready(function() {
  //alert('randpic.js loaded!');
  setTimeout(getPicture, dispTime);  // timeout in miliseconds e.g. 5000 = 5 seconds
});

//==========================
function getPicture() {
    // Place a JSONP call to fetch new picture details. These will be passed 
    // as an argument to the callback function (showWeather())
    //var url = "http://blackmyre/weather/realtime_json.php?callback=?";
    //alert('updatePicture invoked');
    var url = "common/randpic_json.php";
    url += '?current=' + $('div.picture > img').attr('src');
    // Add a timestamp otherwise IE will incorrectly cache the response (the *only* browser that does!)
    url += '&t=' + new Date().getTime();   
    //$('span.debug').text('url: ' + url);
    $.getJSON(url, processPic, "jsonp");
}

function processPic(data) {
  //$('span.debug').text('showPic() data: ' + data);
  var fadeSpeed = 3000; // Milliseconds
  //$('.debug').text('showPic() invoked, file is ' + data.file);
  // Could load the new image directly into the img element but, until an image 
  // is cached, the fadeIn is well under way (or even finished) before the image 
  // is loaded. That makes display stuttered and messy. 
  // Load into temporary img element instead, and transfer from there when 
  // loading is complete. This works very well - in every browser except 
  // Internet Explorer (v8 tested). Use the smooth approach for decent browsers
  // - those using Internet Explorer will just have to put up with some clunkiness.
  if ( $.browser.msie ) {
  //if ( false ) {
    // Internet Explorer
    //$('.debug').text('MSIE loading new picture');
    showPic(data);    
  } else {
    // Non-Microsoft browser
    //$('.debug').text('Decent browser loading new picture');
    //$('img.temp').attr('src', data.file + new Date().getTime()).load(function() {
    var $img = $("<img />").attr('src', data.file).load(function() {
      //$('.debug').text(data.file + ' Image loaded');
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      //if (false) {
         //alert('broken image! nW is ' + this.naturalWidth);
         //$('.debug').text('Error - naturalWidth is ' + this.naturalWidth);
      } else {
        // New image completely loaded. Put it into the page. 
        showPic(data);
      }
    });       
  }    
}

function showPic(data) {
  var fadeSpeed = 3000; // Milliseconds
  //var h = $('div.picture').height();
  $('div.picture').height($('div.picture').height());
  //alert('picdiv height: ' + h);
  $('div.picture > img.feature').fadeOut(fadeSpeed, function() {
    $(this).attr('src', data.file)
    .fadeIn(fadeSpeed, function() {
      $('.debug').text('');
      setTimeout(getPicture, dispTime);  // timeout in miliseconds e.g. 5000 = 5 seconds
    });
  })
  .siblings('.copyright').fadeOut(fadeSpeed, function() {
    $(this).text(data.copyright)
    .fadeIn(fadeSpeed);
  })
  .siblings('.caption').fadeOut(fadeSpeed, function() {
    $(this).text(data.caption)
    .fadeIn(fadeSpeed);
  });    
}