window.addEvent('domready', function(){
	$$('#logocontainer').each(function(el){
		new LogoSlide(el);
	});
});

var LogoSlide = new Class({

	options: {
		width: 915,
		speed: 375,
		contentSel: '.logoimages',
		box1Id: 'box1',
		box2Id: 'box2',
		box3Id: 'box3',
		box4Id: 'box4'
	},

	initialize: function(el) {
		this.element = $(el);
		this.content = this.element.getElementsBySelector(this.options.contentSel)[0];
		this.fx = this.content.effect('left', {duration: this.options.speed, transition: Fx.Transitions.Quad});
		this.total = this.content.getElementsByTagName('img').length;
		this.counter = 1;
		this.content.setStyle('left', 0);
		$(this.options.box1Id).addEvent('click', this.doShift.bindWithEvent(this, '1'));
		$(this.options.box2Id).addEvent('click', this.doShift.bindWithEvent(this, '2'));
		$(this.options.box3Id).addEvent('click', this.doShift.bindWithEvent(this, '3'));
		$(this.options.box4Id).addEvent('click', this.doShift.bindWithEvent(this, '4'));
		this.fx.start(0);
		this.periodicalTimer = this.updateCount.periodical(4000, this);
	},

	updateCount: function(){
		this.counter++;
		if (this.counter > this.total) {
			this.counter = 1;
		} else if (this.counter < 1) {
			this.counter = this.total;
		}
		var shift = (( this.counter * this.options.width) - this.options.width);
		if (shift != 0) {
			shift = "-" + shift + "px";
		}
		this.fx.start(shift);

		if (this.counter==1) {
			var div2 = document.getElementById("box1");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box1");
			div2.style.backgroundColor = "#FFFFFF";
		}
		if (this.counter==2) {
			var div2 = document.getElementById("box2");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box2");
			div2.style.backgroundColor = "#FFFFFF";
		}
		if (this.counter==3) {
			var div2 = document.getElementById("box3");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box3");
			div2.style.backgroundColor = "#FFFFFF";
		}
		if (this.counter==4) {
			var div2 = document.getElementById("box4");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box4");
			div2.style.backgroundColor = "#FFFFFF";
		}

    },

	doShift: function(event, next) {
		event = new Event(event).stop();

		if (next=='1') {
			this.counter = 1;
		}
		if (next=='2') {
			this.counter = 2;
		}
		if (next=='3') {
			this.counter = 3;
		}
		if (next=='4') {
			this.counter = 4;
		}

		if (this.counter==1) {
			var div2 = document.getElementById("box1");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box1");
			div2.style.backgroundColor = "#FFFFFF";
		}
		if (this.counter==2) {
			var div2 = document.getElementById("box2");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box2");
			div2.style.backgroundColor = "#FFFFFF";
		}
		if (this.counter==3) {
			var div2 = document.getElementById("box3");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box3");
			div2.style.backgroundColor = "#FFFFFF";
		}
		if (this.counter==4) {
			var div2 = document.getElementById("box4");
			div2.style.backgroundColor = "#ABD6EA";
		}
		else {
			var div2 = document.getElementById("box4");
			div2.style.backgroundColor = "#FFFFFF";
		}


		if (this.counter > this.total) {
			this.counter = 1;
		} else if (this.counter < 1) {
			this.counter = this.total;
		}
		var shift = (( this.counter * this.options.width) - this.options.width);
		if (shift != 0) {
			shift = "-" + shift + "px";
		}
		this.fx.start(shift);

		$clear(this.periodicalTimer);

	}

});