gistfile1.js

jQuery(document).ready(function() {
  /**
   * Initialize background images
   * backgrounds: array[]
   * backgrounds[0] would appear first.
   * All background images would set in the Nav bar on the bottom.
   */
  var backgrounds = [
    "backgrounds/room1.jpg",
    "backgrounds/room2.jpg",
    "backgrounds/room3.jpg",
    "backgrounds/room4.jpg",
    "backgrounds/room5.jpg"
  ];
  initBackground(backgrounds);
  /**
   * Initialize furniture item images.
   * items: array[]
   * In the array of items, would be a object to describe a image.
   * @param: src
   *   full-path with filename
   * @param: type
   *   furniture type: chair, table, bed...etc.
   * @param: x, y
   *   furniture position
   */
  var items = [
    {
      src : 'items/table1.png',
      type: 'table',
      x   : 500,
      y   : 300
    },
    {
      src : 'items/chair1.png',
      type: 'chair',
      x   : 300,
      y   : 300
    }
  ];
  // setTimeout(function() {loadImages(items);}, 300); // prevent conflict with background

  // Backgrounds Navigation bar
  jQuery.each( backgrounds, function( i, val ) {
    $("#img-nav .bg").append('<img src='+val+' />');
  });
  $("#img-nav .bg img").click(function(event) {
    bgSwitch(this);
  });
  /**
   * Chair Example
   */
  var chairs = [
    'items/chair1.png',
    'items/chair2.png',
    'items/chair3.png'
  ];
  jQuery.each( chairs, function( i, val ) {
    $("#img-nav .chair").append('<img src='+val+' />');
  });
  $("#img-nav .chair img").click(function(event) {
    var add = [
      {
        src : this.src,
        type: 'chair'
      }
    ];
    loadImages(add);
  });
  /**
   * Table Example
   */
  var tables = [
    'items/table1.png',
    'items/table2.png',
    'items/table3.png'
  ];
  jQuery.each( tables, function( i, val ) {
    $("#img-nav .table").append('<img src='+val+' />');
  });
  $("#img-nav .table img").click(function(event) {

    var add = [
      {
        src : this.src,
        type: 'table'
      }
    ];
    loadImages(add);
  });
  /**
   * Bed Example
   */
  var beds = [
    'items/bed1.png',
    'items/bed2.png',
    'items/bed3.png'
  ];
  jQuery.each( beds, function( i, val ) {
    $("#img-nav .bed").append('<img src='+val+' />');
  });
  $("#img-nav .bed img").click(function(event) {
    var add = [
      {
        src : this.src,
        type: 'bed'
      }
    ];
    loadImages(add);
  });

});