/*
 * Full-screen background image jquery technique ganked
 * from jQuery Backstretch 1.0
 * http://srobbin.com/jquery-plugins/jquery-backstretch/
 *
*/


$(function() {
  var home = new Home();
  home.init();
});

var Home = function() {

  var feed = [];
  var i_counter = 0;
  var img_container;
  var img_id_prefix = 'bg_img_';
  var current_img;
  var img_ratio;
  var fade_next_img_time = 900;
  var show_next_img_time = 8500;
  var next_img_interval;
  
  
  var apiURL = "http://api.flickr.com/services/feeds/photoset.gne?set=72157623392209875&nsid=92197765@N00&lang=en-us&api_key=ef75a5182527f24de3d6cc26ebdbf4d8&format=json&jsoncallback=?";
  
  // Startup sequence
  var init = function() {
    initPhotoContainer();
    getRemoteData();
    $(window).resize(adjust_img);    
  }
  this.init = init;
  
  var getRemoteData = function() {
    $.getJSON(apiURL, function(data) {
      $.each(data.items, function(i,item) {
        var src = item.media.m.replace(/_m/i, '_b');
        var id = img_id_prefix + i;
        var img = $("<img/>").attr({id:id});
        var obj = { title:item.title, src:src, description:item.description, img:img, isLoaded:false, id:id };
        $(img).bind("load", function(){on_img_load(obj)});
        feed.push(obj);
      });
      if (feed.length>0) {
       show_next_image();
      }
    });
  };
  
  var on_img_load = function(obj) {
    if(current_img) { $(current_img).fadeOut(fade_next_img_time) };
    var img = obj.img;
    current_img = $(img);
    obj.isLoaded = true;
    img_ratio = $(img).width() / $(img).height();    
    adjust_img();
    $(img).hide().fadeIn(fade_next_img_time, show_next_img_complete);   
    $('h2').text(obj.title);
    $('h3').html(obj.description);
    $('h3 p:last').css({display:'block'});    
  }
  this.on_img_load = on_img_load;
  
  var initPhotoContainer = function() {
    var wrap = $("<div />").attr("id", "backstretch-wrap").css( {position: "absolute", left: 0, top: 0, zIndex: -1} );
    img_container = $("<div />").attr("id", "backstretch").css( {position: "fixed", left: 0, top: 0, overflow: "hidden", zIndex: -1} ).appendTo(wrap);
    $("body").prepend(wrap)
  }
  
  var show_next_image = function() {
    clearInterval(next_img_interval);
  
    console.log('show_next_image ' + i_counter);


    // Check data set boundaries
    if (i_counter > feed.length-1) i_counter = 0;
    if (i_counter < 0) i_counter = feed.length-1;
    var obj = feed[i_counter];
    
    if (obj.isLoaded) {
      
      console.log('obj.isLoaded ' + i_counter);
          
      if(current_img) { 
        $(current_img).fadeOut(fade_next_img_time); console.log('hide_current');
      }
      
      current_img = $(obj.img);
      
      img_ratio = $(current_img).width() / $(current_img).height();
      
      adjust_img();
      
      $('h2').text(obj.title);
      $('h3').html(obj.description);
     
      $(current_img).hide().fadeIn(fade_next_img_time, show_next_img_complete);
      
    } else {
      console.log('obj.img is NOT Loaded ' + i_counter);
      $(obj.img).appendTo($(img_container)).attr({src:obj.src});  
    }
    
  }
  this.show_next_image = show_next_image;
  
  
  
  var show_next_img_complete = function() {
    i_counter++;
    console.log('show_next_img_complete ' + i_counter);

    next_img_interval = setInterval(show_next_image, show_next_img_time);
  }
  this.show_next_img_complete = show_next_img_complete;
    
  
  
  
  var adjust_img = function() {
    if (current_img && img_ratio) {
      var bg_width = $(window).width(),
      var bg_height = bg_width / img_ratio;
      if(bg_height < $(window).height()) {
        bg_height = $(window).height();
        bg_width = bg_height * img_ratio;
      }    
      $(current_img).width( bg_width ).height( bg_height );
    }
  }
  this.adjust_img = adjust_img;

  
  

  
}