//JavaScript, lol

window.addEvent('domready', function(){
	
	function loadImage(theID) {
		var req = new Request.HTML({'url':'imageLoader.php','update':$('theFrame'),'data':{'sel':theID},
			onRequest:function() {
				var makeScroll = new Fx.Scroll(window,{duration:'1000'}).toTop();
			},
				onComplete:function(){
				$('loadicator').setStyle('display','block');
				$('theImage').addEvent('load', function(){
					$('theImage').setStyle('display','block');
					$('loadicator').setStyle('display','none');
			});
			},
		}).send();
	};
	
	$('pickerList').getElements('li').each(function(index,id) {
		index.getElement('img').setStyle('width','150px');
				index.addEvent('click', function() {
								loadImage(this.id);
		});
	});
	
	$('selectorPanel').getElements('span').each(function(index){
		index.addEvent('click',function() {
			var clickedButton = index;
			var theSelector =  'li.'+index.getProperty('id');
			$('pickerList').getElements('li.'+index.getProperty('id')).each(function(index) {
				if (!index.hasClass('hidden')) {
								index.fade('toggle').slide('toggle').addClass('hidden');
								clickedButton.setStyles({'text-decoration':'line-through','color':'#CC0000'});
				} else {
								index.fade('toggle').slide('toggle').removeClass('hidden');
					clickedButton.setStyles({'text-decoration':'none','color':'#333'});
				}
			});
		});
	});
});