var Cycle = Class.create({
	initialize: function(id, width, height) {
		this.target = $(id);
		this.width = width;
		this.height = height;
		this.current = 0;
		this.margin = 0;

		this.target.setStyle({ 'float': 'left', width: this.width + 'px', height: (this.height + 44) + 'px', overflow: 'hidden' });
		this.title = this.target.appendChild(new Element('div').setStyle({ height: '20px', padding: '5px 7px', background: 'rgb(32, 128, 90) url(http://static.geensoft.com/themes/website/images/corner.top.right.jpg) top right no-repeat' }));
		this.display = this.target.appendChild(new Element('div').setStyle({ 'float': 'left', width: this.width + 'px', height: this.height + 'px', overflow: 'hidden' }));
		this.sub = this.display.appendChild(new Element('div').setStyle({ 'float': 'left', width: this.width + 'px', height: (this.height * 2) + 'px' }));

		this.elements = [
			{
				image: 'http://static.geensoft.com/themes/website/images/train.jpg',
				html: 'Develop and validate your critical embedded systems <a style="color: white; font-size: 20px;" href="/en/article/controlbuild">ControlBuild</a> and <a style="color: white; font-size: 20px;" href="/en/article/reqtify">Reqtify</a>'
			},
			{
				image: 'http://static.geensoft.com/themes/website/images/reqtify.box.jpg',
				html: 'Geensoft announces <a style="color: #FFFFFF; font-size: 20px;" href="/en/article/reqtify20101a">Reqtify 2010</a>'
			},
			{
				image: 'http://static.geensoft.com/themes/website/images/plane.jpg',
				html: 'Manage requirements traceability and impact analysis with <a style="color: white; font-size: 20px;" href="/en/article/reqtify">Reqtify</a>'
			},
			{
				image: 'http://static.geensoft.com/themes/website/images/eolienne.jpg',
				html: 'Integrate, validate and qualify control software with <a style="color: white; font-size: 20px;" href="/en/article/controlbuild">ControlBuild</a>'
			},
			{
				image: 'http://static.geensoft.com/themes/website/images/antenna.jpg',
				html: 'Analyze and simulate real-time systems with <a style="color: white; font-size: 20px;" href="/en/article/rtbuilder">RT-Builder</a>'
			},
			{
				image: 'http://static.geensoft.com/themes/website/images/car.jpg',
				html: 'Create, configure and validate your AUTOSAR applications with <a style="color: white; font-size: 20px;" href="/en/article/autosarbuilder">AUTOSAR Builder</a> and <a style="color: white; font-size: 20px;" href="/en/article/reqtify">Reqtify</a>'
			}
		];

		for(var i = 0, c = this.elements.size(); i < c; i++) {
			this.elements[i].element = new Element('div').setStyle({ width: this.width + 'px', height: this.height + 'px', background: 'no-repeat left top url(' + this.elements[i].image + ')' });
			this.elements[i].element.appendChild(new Element('div').setStyle({ 'float': (i % 2 == 0 ? 'left' : 'right'), fontSize: '20px', color: 'white', background: 'repeat url(http://static.geensoft.com/themes/website/images/green.png)', width: '190px', padding: '10px', height: (this.height - 20) + 'px' }))
				.insert(this.elements[i].html);
		}

		this.next = this.current + 1 == this.elements.size() ? 0 : this.current + 1;
		this.sub.appendChild(this.elements[0].element);
		window.setTimeout(this.cycle.bind(this), 8000);
	},
	cycle: function() {
		this.sub.appendChild(this.elements[this.next].element);
		this.interval = window.setInterval(this.move.bind(this), 5);
	},
	move: function() {
		this.margin--;
		this.sub.setStyle({ marginTop: this.margin + 'px' });

		if(this.margin == -200) {
			window.clearInterval(this.interval);
			this.elements[this.current].element.remove();
			this.sub.setStyle({ marginTop: '0px' });
			this.current = this.next;
			this.next = this.current + 1 == this.elements.size() ? 0 : this.current + 1;
			this.margin = 0;
			this.timeout = window.setTimeout(this.cycle.bind(this), 8000);
		}
	}
});