//This script uses jQuery only for it's animations and selectors. Everything else is driven by Prototype.
//Set noConflict so the two scripts work with each other.
jQuery.noConflict();

var ClearValue = Class.create({
	
	initialize: function(element, value) {
		
		this.element = element;
		this.value = value;
		
		if(!element.value)
			element.value = value;
		else
			this.value = element.value;
			
		Event.observe(this.element, 'focus', this.clearText.bind(this));
		Event.observe(this.element, 'blur', this.replaceText.bind(this));
		
	},
	
	clearText: function(event) {
		
		if(this.element.value == this.value)
			this.element.value = '';
		
	},
	
	replaceText: function(event) {
		
		if(this.element.value == '')
			this.element.value = this.value;
		
	}
	
});

var IBanner = Class.create({
	
	initialize: function(rootelement, transitionspeed) {
		
		this.root = rootelement;
		
		this.icons = icons = jQuery('.small-icons ul li a', this.root);
		this.images = images = jQuery('.image ul li', this.root);
		
		this.ppages = ppages = $$('.small-icons ul li a');
		
		this.size = size = ppages.length;
		
		this.busy = false;
		this.timer = false;
		this.speed = transitionspeed;
		
		this.hide();
		
		if((size == jQuery(icons).size()) && (size == jQuery(images).size())) {
		
			this.active = this.setActive(0);
			this.autoTransition(false);
			
		}
		
		for (var index = 0; index < ppages.length; index++) {
			Event.observe(ppages[index], 'click', this.goTo.bind(this), false);
		}
		
		this.show();
		
	},
	
	next: function(event) {
			
		var next = this.active + 1;
		
		if(this.active == this.size - 1)
			next = 0;
		
		this.autoTransition(true);
		
		this.resignActive(this.active);
		this.active = this.setActive(next);
		
		this.autoTransition(false);
		
		if(event)
			Event.stop(event);
		
	},
	
	previous: function(event) {
		
		var previous = this.active - 1;
		
		if(this.active == 0)
			previous = this.size - 1;
		
		this.autoTransition(true);
		
		this.resignActive(this.active);
		this.active = this.setActive(previous);
		
		this.autoTransition(false);
		
		if(event)
			Event.stop(event);
		
	},
	
	goTo: function(event) {
		
		var element = Event.element(event);
		
		this.autoTransition(true);
		
		//Even though we clicked on an anchor, Prototype selected the image within
		//so, we will just go up one level back to the anchor.
		for (var index = 0; index < this.ppages.length; index++) {
			if(this.ppages[index] == element.up(0)) {
				this.resignActive(this.active);
				this.active = this.setActive(index);
			}
		}
		
		this.autoTransition(false);
		
		if(event)
			Event.stop(event);
		
	},
	
	autoTransition: function(busy) {
		
		this.busy = busy;
		
		if(!busy)
			this.timer = this.next.bind(this).delay(this.speed);
		else
			 clearTimeout(this.timer);
		
	},
	
	setActive: function(index) {
		
		jQuery(this.icons).eq(index).addClass('active');
		jQuery(this.images).eq(index).fadeIn('slow');
		
		return index;
		
	},
	
	resignActive: function(index) {
		
		jQuery(this.icons).eq(index).removeClass('active');
		jQuery(this.images).eq(index).css('display', 'none');
		
	},
	
	hide: function() {
		
		jQuery(this.root).css('display', 'none');
		jQuery(this.icons).each(function(index) {
			jQuery(this).css('display', 'none');
		});
		jQuery('.image ul li', this.root).css('display', 'none');
		
	},
	
	show: function() {
		
		jQuery(this.root).css('display', 'block');
		jQuery(this.icons).each(function(index) {
			//jQuery(this).delay(index * 200).fadeIn('slow');
			jQuery(this).show();
		});
		
	}
	
});

document.observe("dom:loaded", function() {
	
	var searchbox = new ClearValue($$('input[name="searchterm"]')[0], 'Search');
	var iBanner = new IBanner($$('.i-banner')[0], 7);
	
});