// JavaScript Document
var Site = {
	
	start: function(){		
		if ($('kwick')) Site.parseKwicks();
	},
	
	parseKwicks: function(){
		var kwicks = $$('#kwick .kwick');
		var fx = new Fx.Elements(kwicks, {wait: false, duration: 200, transition: Fx.Transitions.quadOut});
		kwicks.each(function(kwick, i){
			kwick.addEvent('mouseenter', function(e){
				if(this.hasClass('screenshot')) {
					$('ajaxtab').setStyle('background-position', '396px -65px');
				}					
					
				var obj = {};
				obj[i] = {
					'width': [kwick.getStyle('width').toInt(), 265]
				};
				kwicks.each(function(other, j){
					if (other != kwick){
						var w = other.getStyle('width').toInt();
						if (w != 200) obj[j] = {'width': [w, 200]};
					}
				});
				fx.start(obj);
			});
		});
		
		$('kwick').addEvent('mouseleave', function(e){			
			var obj = {};
			kwicks.each(function(other, j){
				
				if(other.hasClass('selected')) {
					obj[j] = {'width': [other.getStyle('width').toInt(), 265]};
				} else {
					obj[j] = {'width': [other.getStyle('width').toInt(), 200]};
				}
				
				if(other.hasClass('screenshot') && other.hasClass('selected')) { 
					$('ajaxtab').setStyle('background-position', '396px -65px');
				} else {
					$('ajaxtab').setStyle('background-position', '396px 0');
				}
			});
			fx.start(obj);			
		});
	}	
}

window.addEvent('domready', function(){

	var kwicks = $$('#kwick .kwick');
	kwicks.each(function(kwick, i){
		kwick.addEvent('click', function(e){	
			new Event(e).stop();
			
			var url = this.getProperty('href');

			new Ajax(url, {
				method: 'get',
				update: $('ajaxoutput'),
				evalScripts: true
			}).request();
			
			this.addClass('selected');			
			kwicks.each(function(other, j){
				if (other != kwick){
					other.removeClass('selected');
				}
			});
			
			if(this.hasClass('screenshot') && this.hasClass('selected')) { 
				$('ajaxtab').setStyle('background-position', '396px -65px');
			} else {
				$('ajaxtab').setStyle('background-position', '396px 0');
			}		
				
		});	
		
		if(kwick.hasClass('selected')) {
			kwick.setStyle('width', '265px');
		} else {
			kwick.setStyle('width', '200px');
		}		
	});
	
});

window.addEvent('load', Site.start);

