// default this to false
var loadImages = false;

// used as "onLoad" of document
$(document).ready(
  function(){
    // loadImages is set to true on those templates that require it
    if(loadImages) {
      get_bpark_images();
    }
  }
);

var bpark_images = [];

function get_bpark_images() {
  // load via json
  $.getJSON('/javascripts/bpark.json',
    function(data) {
      bpark_images = data;
      load_random_bpark_image();
    }
  );
}

function load_random_bpark_image() {
  if(bpark_images.length < 1) {
    get_bpark_images();
  }
  //get a random image and display it
  image = bpark_images[Math.floor(Math.random()*bpark_images.length)];
  // clear the paragraph AFTER the bpark image
  // show the loader
  $("#bpark-image").attr("src", "/images/ajax-loader.gif");
  $("#after-image-para").remove();
  // then change the image
  $("#bpark-image").attr("src", image.image);
  $("#bpark-image").wrap(document.createElement("a"));
  $("#bpark-image").parent().attr('href', image.link);
  $("#bpark-image").parent().attr('target', "flickr_bpark");
  $("#bpark-image").parent().after("<p id=\"after-image-para\">Title: <a href=\"" + image.link + "\" target=\"flickr_bpark\">" + image.title + "</a><br />Photo Credit: <a href=\"" + image.author_link + "\" target=\"flickr_bpark\">" + image.author + "</a></p>");
  
  $("#bpark-image-another").show();
}