$.collage = {
	id: 'collage',
	hPics: [],
	vPics: [],
	hPicsLoaded: [],
	vPicsLoaded: [],
	baseHrefV: '/themes/wb3/images/collage/vertical',
	baseHrefH: '/themes/wb3/images/collage/horizontal',
	pic: 0,
	picOrder: ['v1','v2','h1','h2'],
	
	init: function(options)
	{	
		for (var thing in options)
			this[thing] = options[thing];	
		if (this.baseHrefH.length > 0) $.each(this.hPics, function(i) { $.collage.hPics[i] = $.collage.baseHrefH + '/' + $.collage.hPics[i] });
		if (this.baseHrefV.length > 0) $.each(this.vPics, function(i) {	$.collage.vPics[i] = $.collage.baseHrefV + '/' + $.collage.vPics[i] });
		
		var c = $('#'+this.id);
		if ($('#v1a').size() == 0) c.append($('<img />').addClass('v1').attr('id','v1a'));
		if ($('#v1b').size() == 0) c.append($('<img />').addClass('v1').attr('id','v1b'));
		if ($('#v2a').size() == 0) c.append($('<img />').addClass('v2').attr('id','v2a'));
		if ($('#v2b').size() == 0) c.append($('<img />').addClass('v2').attr('id','v2b'));
		if ($('#h1a').size() == 0) c.append($('<img />').addClass('h1').attr('id','h1a'));
		if ($('#h1b').size() == 0) c.append($('<img />').addClass('h1').attr('id','h1b'));
		if ($('#h2a').size() == 0) c.append($('<img />').addClass('h2').attr('id','h2a'));
		if ($('#h2b').size() == 0) c.append($('<img />').addClass('h2').attr('id','h2b'));
		
		$('#v1a').css('z-index','20'); $('#v1b').css('z-index','21').hide();
		$('#v2a').css('z-index','20'); $('#v2b').css('z-index','21').hide();
		$('#h1a').css('z-index','20'); $('#h1b').css('z-index','21').hide();
		$('#h2a').css('z-index','20'); $('#h2b').css('z-index','21').hide();

		setTimeout("$.collage.preLoad(0,'v')", 0);
		setTimeout("$.collage.preLoad(0,'h')", 0);
		setTimeout("$.collage.fadeImages()", 1000);
	},
	
	preLoad: function(i,o)
	{
		var arr = (o == 'v' ? this.vPics : this.hPics);
		var arrLoaded = (o == 'v' ? this.vPicsLoaded : this.hPicsLoaded);
		
		if (i >= arr.length)
			return;
		
		$('<img />')
			.attr('src', arr[i])
			.load(function() {
				arrLoaded[arrLoaded.length] = arr[i];
				setTimeout("$.collage.preLoad(" + (i+1) + ", '" + o + "')", 0); 
			});
	},

	randomPic: function(orientation)
	{
		var newSrc = '';
		if (orientation == 'v')
		{
			var src1 = $('#v1a').attr('src');
			var src2 = $('#v1b').attr('src');
			newSrc = src1;
			while (newSrc == src1 || newSrc == src2)
				newSrc = this.vPicsLoaded[Math.floor(Math.random()*this.vPicsLoaded.length)];
		}
		else
		{
			var src1 = $('#h1a').attr('src');
			var src2 = $('#h1b').attr('src');
			newSrc = src1;
			while (newSrc == src1 || newSrc == src2)
				newSrc = this.hPicsLoaded[Math.floor(Math.random()*this.hPicsLoaded.length)];
		}
		return newSrc;
	},
	
	fadeImages: function()
	{
		var p = this.picOrder[this.pic];
		var newSrc = this.randomPic(p.substr(0,1));
		this.fadeToFrom(newSrc, p);
	},
	
	fadeToFrom: function(newSrc, img)
	{
		$('#' + img + 'b')
			.attr('src', newSrc)
			.fadeIn('slow', function() {
				$('#' + img + 'a').attr('src', newSrc);
				$('#' + img + 'b').hide();
				$.collage.pic = ($.collage.pic+1)%4;
				setTimeout('$.collage.fadeImages()', 500);
			});
	}
};