/************* GNR - Great North Run (Dry Run) ************\
             Courtesy of http://oopstudios.com/
 This site is an AJAX / JSON site, however will fallback
  onto a plain (clean) site when javascript is disabled.
\**********************************************************/

GNR = {};
//
// Preload the images we will use
//
GNR.IMG = [];
GNR.IMG.load = function (path) {
  var pic = new Image (10, 10);
  pic.src = path;
  GNR.IMG.push (pic);
};
GNR.IMG.load ("site/loading.gif");

/************************* LOADER *************************\
 Functions that load pages into the site, note the careful
  management of effects (chains and cancelling of)
\**********************************************************/

GNR.LOADER = {};
// Takes a path and does the necessary work
GNR.LOADER.onLoad = function (success, transport) {
  if (success) {
    // Format the JSON
    json = transport.responseText.evalJSON (true);
  } else {
    // Create an error
    json = {
      title: "Oops!",
      header: "site/header1.png",
      colour: "#FF0000",
      content: "<h2>Oops!</h2>"
    };
  }
  // Set the title
  document.title = json.title;
  // Write the content
  $ ("content").innerHTML = json.content;
  // Hide the loadbar
  new Effect.Morph ("loadbar", {
    duration: 0.5,
    queue: { position: "end", scope: "load" },
    style: { height: '0px' }
  });
  // Show the content
  new Effect.BlindDown ("content", {
    duration: 1,
    queue: { position: "end", scope: "load" }
  });
  // Morph the logo colour
  new Effect.Morph ("logo", {
    duration: 1,
    queue: { position: "end", scope: "load" },
    style: { backgroundColor: json.colour }
  });
  // Show the new header
  new Effect.Morph ("header_inner", {
    duration: 0.5,
    queue: { position: "end", scope: "header" },
    style: { marginTop: '100px' },
    afterFinish: function () {
      // OK, load up the image
      var pic = new Image (10, 10);
      pic.onload = function () {
        $ ("header_inner").style.backgroundImage = "url('" + this.src + "')";
        new Effect.Morph ("header_inner", {
          duration: 0.5,
          queue: { position: "end", scope: "header" },
          style: { marginTop: '0px' }
        });
      };
      pic.src = json.header;
    }
  });
};
// Takes a path and does the necessary work
GNR.LOADER.load = function (path) {
  if (!path) {
    var path = "home";
  }
  // Cancel the effects queue
  var queue = Effect.Queues.get ("load");
  queue.each (function (effect) { effect.cancel (); });
  // Hide the current content
  new Effect.BlindUp ("content", {
    duration: 1,
    queue: { position: "end", scope: "load" }
  });
  // Show the loadbar
  new Effect.Morph ("loadbar", {
    duration: 0.5,
    queue: { position: "end", scope: "load" },
    style: { height: "21px" },
    // Then load the content
    afterFinish: function () {
      new Ajax.Request (path, {
        method: 'post',
        parameters: {ajax: true},
        onSuccess: function (transport) { GNR.LOADER.onLoad (true, transport); },
        onFailure: function () { GNR.LOADER.onLoad (false); }
      });
    }
  });
};

/************************** LINKS *************************\
 Functions to convert plain links into active ones for the
  JS framework. Ties into the loader
\**********************************************************/

GNR.LINKS = {};
// Converts all the links for JS use
//  will accept a string or element
GNR.LINKS.convert = function (el) {
  // If we are given a string, conver the links in that
  if (typeof (el) == "String") {
    var tmp = document.createElement ("div");
    tmp.innerHTML = el;
  }
  // Convert all the elements
  var els = el.getElementsByTagName ("a");
  for (var e=0, l=els.length; e<l; e++) {
    var a = els[e];
    // Only internals please
    if (a.host.indexOf (location.host) >= 0) {
      // Clean up the hash
      a.path = a.pathname.replace (/(^\/|\/$)/, '');
      a.path = a.path.replace (/\//, '_');
      // ReallySimpleHistory method
      Event.observe (a, "click", function (event) {
        dhtmlHistory.add (this.path);
        GNR.LOADER.load (this.path);
        event.stop ();
      });
    }
  }
  // Return a string or not?
  if (typeof (el) == "String") {
    return tmp.innerHTML;
  }
};
// Use "reallysimplehistory" to deal with location changes
GNR.LINKS.onHashChange = function (newLocation, historyData) {
  GNR.LOADER.load (newLocation);
};
window.dhtmlHistory.create ({
  toJSON: function (o) {
    return Object.toJSON (o);
  },
  fromJSON: function (s) {
    return s.evalJSON ();
  }
});
Event.observe (window, 'load', function () {
  dhtmlHistory.initialize ();
  dhtmlHistory.addListener (GNR.LINKS.onHashChange);
});
// Things to do onload...
document.observe ("dom:loaded", function () {
  GNR.LINKS.convert (document);
  if (location.hash.length > 1) {
    GNR.LOADER.load (location.hash.substring (1));
  }
});