/*
	content.js - Content Loader for JavaScript-based Catalogs.
	Author - Eric L .Truitte
	Conception Date - 01-13-2008
  Updated with jQuery - 5-24-2010
	Caveats -
		This script should not need editing.  To add more categories or products to
		the catalog, follow format in ./houses.js and add them where needed.
*/

var SCRHIRES = 0;

function Category(cat, category, content, products) {
  return {
    cat: cat,
    category: category,
    content: content,
    products: products
  };
};

function Product(id, product, keyword, description, cost, imagelist) {
  return {
    id: id,
    product: product,
    keyword: keyword,
    descr: description,
    cost: cost,
    imagelist: imagelist
  };
};

function genthumbbrowser(c, h) {
  var navibox = $('#navibox');
	for (var i = 0; i < categories[c].products[h].imagelist.length; i++) {
		var inid = 'displaythumb' + i;
		var img = categories[c].products[h].imagelist[i];
		navibox.append('<img id="' + inid + '" class="thumb" src="thumbs/' + img + '.jpg" alt="thumbs/' + img + '.jpg" />');
		$('#' + inid).css('cursor', 'pointer')
      .attr('catid', c).attr('houseid', h).attr('imgindex', i)
      .click(function () {
        var $this = $(this);
        var img = categories[$this.attr('catid')].products[$this.attr('houseid')].imagelist[$this.attr('imgindex')];
	      $('#houseimage').attr('src', 'img/' + img + '.jpg').attr('alt', 'img/' + img + '.jpg');
      });
	};
  navibox.show();
};

function contentloader(category) {
  $('#display').text('Loading...').hide();
	var c = 0;
	for (; c < categories.length; c++) {
		if (categories[c].cat == category) {
			if (category.length > 0) { location.hash = '#' + category; } else { return; }
      var $content = $('#content');
      $content.empty();
      for (var h = 0; h < categories[c].products.length; h++) {
        var house = categories[c].products[h];
        $content.append($('<div></div>').addClass('listing')
          .append($('<div></div>').addClass('thumb').append(
            $('<img id="' + house.id + '" src="thumbs/' + house.imagelist[0] + '.jpg" alt="' + house.imagelist[0] + '"  catid="' + c + '" houseid="' + h + '"/>').click(function() {
              var $this = $(this);
	            var image = categories[$this.attr('catid')].products[$this.attr('houseid')].imagelist[0];
              $('#display').show()
                .html('  <div id="closediv"><font id="close">Close [X]</font></div>'
                + '  <div id="imagesbox">'
                + '    <div id="houseimagebox"><img id="houseimage" src="img/' + image + '.jpg" alt="' + image + '.jpg..." /></div>'
                + '    <div id="navibox"></div>'
                + '  </div>')
                .attr('left', (document.body.clientWidth / 2) - (this.width / 2));
              $('#close').click(function () { $('#display').text('Loading...').hide(); });
              if (categories[$this.attr('catid')].products[$this.attr('houseid')].imagelist.length > 1) {
                genthumbbrowser($this.attr('catid'), $this.attr('houseid'));
              };
            })
            .css('cursor', 'pointer')
          ))
          .append($('<div></div>').addClass('itemid').html('(Item #' + house.id + ')'))
          .append($('<div></div>').addClass('infocontainer')
            .append($('<div></div>').addClass('infotitle').html(house.product))
            .append($('<div></div>').addClass('info').html(house.descr))
            /* add pricing, quality, and order stuff here */
          )
        );
      };
		};
	};
};

/*
  Event Handlers
*/


function hashload() {
	/*
		grabs the hash from reload or load if linked.  Very useful client-side
		mechanism to change the content by, but only works when mechanically
		clicked on something.  For some reason the internet people NEVER put
		changes to the hash into the re-load or created a event for the changing
		of the hash.  -etruitte 01-14-08
	*/
	if (location.hash.length > 1) {
		var hashstring = location.hash.substr(1,location.hash.length).toLowerCase();
		contentloader(hashstring);
	};
};

function initmenu() {
  var $menu = $('#menu');
	for (var c = 0; c < categories.length; c++) {
	  $menu.append($('<div></div>').attr('id', 'cat'+c)
        .attr('category', categories[c].cat)
        .addClass('category')
        .text(categories[c].category)
        .click(function () { contentloader($(this).attr('category')); })
    );
	};
};