var products = {
	browse: function(sender)
	{
		switch (sender)
		{
			case 'bubbles':
				$('title_'+sender).className = 'selected';
				$('title_colors').className = '';
				$('bubbles').show();
				$('colors').hide();
			break;
			case 'colors':
				$('title_'+sender).className = 'selected';
				$('title_bubbles').className = '';
				$('bubbles').hide();
				$('colors').show();
			break;
		}
	},
	bubbles: function(sender)
	{
		$('bubble_long_descr').innerHTML = $F('bub_descr-'+sender)
		$('bubble_title').innerHTML = $F('bub_title-'+sender)
	},
	images: {
		pi: null,
		big: null,
		path: null,
		id: null,
		loaded: null,
		smalls: null,
		smallEvent: null,
		init: function()
		{
			pi = products.images;
			pi.big = $('big').down();
			pi.smalls = $$('div.submenu span');
			pi.smallEvent = pi.smallClick.bindAsEventListener();
			pi.loaded = new Array;
			pi.startObserve();
		},
		startObserve: function() 
		{
			for (i=0; i<pi.smalls.length; i++)
				Event.observe(pi.smalls[i], 'click', pi.smallEvent)
		},
		stopObserve: function()
		{
			for (i=0; i<pi.smalls.length; i++)
				Event.stopObserving(pi.smalls[i], 'click', pi.smallEvent)
		},
		smallClick: function(event)
		{
			pi.stopObserve();

			var small = event.currentTarget || event.srcElement;
			if (small.tagName == 'SPAN')
				small = small.down();
				
			pi.path = small.src.replace('closeup','big');
			tmp = small.title.split('--');
			pi.id = tmp[1];
			
			for (i=0; i<pi.smalls.length; i++)
				pi.smalls[i].className = '';
			if (window.navigator.appName == 'Microsoft Internet Explorer')
				var span = small.parentElement;
			else
				var span = small.up();
			span.className = 'selected';
			
			 
			Effect.Fade(
				pi.big,
				{
					duration: 0.5,
					afterFinish: function()
					{
						if (!pi.loaded[pi.id])
						{
							var image = new Image();
							image.src = pi.path;
							pi.loaded[pi.id] = image.src;
							$('loader').show();
							Event.observe(
								image, 
								'load',
								function()
								{
									pi.big.src = image.src;
									$('loader').hide();
									Effect.Appear(
										pi.big,
										{
											duration: 0.5
										}
									);
									pi.startObserve();
								}
							);
						}
						else
						{
							pi.big.src = pi.loaded[pi.id];
							Effect.Appear(
								pi.big,
								{
									duration: 0.5
								}
							);
							pi.startObserve();
						}
					}
				}
			);
		}
	}
}

function initialize() {
	products.images.init();
}

if (window.addEventListener) window.addEventListener('load', initialize, false);
else window.attachEvent('onload', initialize);