(function(){

	var laser = function(){
	//	alert("hi");
		backgroundImageAsHeader({ 'height': 150, 'url': 'logos/laser.png'})
	}

	var paintOnPrint = function(){
		backgroundImageAsHeader({ 'height': 150, 'url': 'logos/paint.on.print.png'})
	}
	
	var logos = function(){
	//	alert("hi2")
		var height = width = 86
		var logoUrl = 'logos/logogifs/'
		var imgs = [ { 'url': logoUrl + 'B.gif', 'width': width },
		             { 'url': logoUrl + 'O.gif', 'width': width },
		             { 'url': logoUrl + 'N.gif', 'width': width },
		             { 'url': logoUrl + 'G.gif', 'width': width },
		             { 'url': logoUrl + 'S.gif', 'width': width }
		]
		seriesOfImagesAsHeader(height, imgs)
	}
	
	var seriesOfImagesAsHeader = function(height, imgs){
		var imgs = MochiKit.Iter.cycle(imgs)

		var windowWidth = $(window).width()
		var totalWidth = 0;
		
		// build string to insert into page
		var htmlChunk = '<nobr>'
		while (totalWidth < windowWidth) {
			var img = imgs.next()
			htmlChunk += '<img src="'+img.url+'" width="'+img.width+'">'
			totalWidth += img.width
		}
		htmlChunk += '</nobr>'

		var css = {
			'backgroundImage':  'none',
			'display':          'block'
		}
		$("#header").html(htmlChunk).height(height).css(css)
	}
	
	var backgroundImageAsHeader = function(img){ // {height: Integer, url: String}
		var css = {
			'backgroundImage':  'url(' + img.url + ')',
			'backgroundRepeat': 'repeat-x',
			'display':          'block'
		}
		$("#header").html("").height(img.height).css(css)
	}

	var headers = MochiKit.Iter.cycle([
					laser, logos, paintOnPrint
	])
	
	var nextHeader = function(){
//		alert(headers);
		(headers.next())()
	}
	
	$("#header").click(nextHeader)
	nextHeader()
	
	
})()