(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

function onload() {
	jQuery('.content_box').hide();
	jQuery('h4.hide').hide();
	jQuery("div[id~=info]").hide();
	jQuery("h3.show").stop().toggle(function() {
		jQuery(this).css("background-color","#C70D0C");
		jQuery(this).css("color", "white");
   		var id = jQuery(this).attr("id");
   		jQuery("h4[id=bottom" + id + "]").stop().fadeIn();
   		jQuery("div[id=info" + id + "]").stop().fadeIn();
   		var imageHrefs = new Array();
   		jQuery("div[id=info" + id + "] div.image_box div.scrollable div.items").children().children().each(function() {
   			jQuery.preLoadImages(jQuery(this).attr("href"));
   		});
    }, function() {
   		var id = jQuery(this).attr("id");
   		jQuery(this).css("background-color","#F5F5F5");
   		jQuery(this).css("color","black");
   		jQuery("h4[id=bottom" + id + "]").stop().fadeOut();
   		jQuery("div[id=info" + id + "]").stop().fadeOut();
    });

	jQuery("ul.headline").stop().toggle(function() {
		jQuery(this).css("background-color","#C70D0C");
		jQuery(this).css("color", "white");
   		var id = jQuery(this).attr("id");
   		jQuery("div[id=" + id + "_box]").stop().fadeIn();
   		var imageHrefs = new Array();
   		jQuery("div[id=" + id + "_box] div.image_box div.scrollable div.items").children().children().each(function() {
   			jQuery.preLoadImages(jQuery(this).attr("href"));
   		});
    }, function() {
   		var id = jQuery(this).attr("id");
   		jQuery(this).css("background-color","#F5F5F5");
   		jQuery(this).css("color","black");
   		jQuery("div[id=" + id + "_box]").stop().fadeOut();
    });	
}

function wrapToWidth(divId, maxWidth) {
	var sumWidth = 0;
	jQuery("#" + divId).children().each(function() {
		sumWidth = sumWidth + jQuery(this).width();
		if (sumWidth == maxWidth) {
			jQuery(this).addClass("wrap");

			jQuery(".wrap").wrapAll("<div />");
			jQuery(".wrap").removeClass("wrap");
			sumWidth = 0; 
		} else if (sumWidth > maxWidth) {
			jQuery(".wrap").wrapAll("<div />");
			jQuery(".wrap").removeClass("wrap");
			sumWidth = 0;
			
			jQuery(this).addClass("wrap");
		} else {
			jQuery(this).addClass("wrap");
		}
	});

	jQuery(".wrap").wrapAll("<div />");
	jQuery(".wrap").removeClass("wrap");
}


/*
 * Copyright 2011 Nicholas C. Zakas. All rights reserved.
 * Licensed under BSD License.
 *
 * This function determines if the browser is currently in a particular media
 * media mode. Use the same media query as you would in CSS or on a <link>
 * element.
 *
 * The theory is the same as many CSS detection techniques:
 * 1. Create a hidden <div> with a specific ID.
 * 2. Add a <style> element with a media query.
 * 3. See if the style was applied to the div.
 *
 * The function accepts a single argument, the media query string, and returns true
 * if the browser is currently in the given media mode or false if not. Note that
 * this is limited to the browser's support for CSS media queries. IE < 9, for
 * example only supports simple media types like "screen" and "print", so any
 * advanced queries will always return false. For this reason, this method's
 * purpose is to determine if the given browser understands the media query AND
 * the media mode is active.
 *
 * This function works back through IE6.
 */

var isMedia = (function(){

    var div;

return function(query){
if (!div){
div = document.createElement("div");
div.id = "ncz1";
div.style.cssText = "position:absolute;top:-1000px";
document.body.insertBefore(div, document.body.firstChild);
}

div.innerHTML = "_<style media=\"" + query + "\"> #ncz1 { width: 1px; }</style>";
div.removeChild(div.firstChild);
return div.offsetWidth == 1;
};
})();