function TreCHeaderManager() {
	this.headers = new Array()
	this.currentIndex = -1
	this.initThumbs()
	this.replaceHeader()
}

TreCHeaderManager.prototype.manageClick = function(event) {
	Event.stop(event)
	this.pe.stop()
	this.selectThumb(Event.findElement(event).rel)
	this.pe = new PeriodicalExecuter(function(pe) {
		theThis.random()
	}, 15);
}

TreCHeaderManager.prototype.addThumb = function(item) {
	var thumb = new Element('a', {rel: item, href: '#'})
	thumb.setStyle({display: 'block',
		float: 'right',
		width: '25px',
		height: '25px',
		background: '#666 url(/wp/wp-content/plugins/tre3-header-manager/headers/' + item + '/thumb.png) center center no-repeat',
		margin: '2px',
		border: '1px #ccc solid'})
	this.thumbArea.insert(thumb)
	this.thumbs[item] = thumb
	Event.observe(thumb, 'click', this.manageClick.bind(this))
}

TreCHeaderManager.prototype.selectThumbTo = function(thumbIndex, newIndex) {
	var newImg = new Element('img')
	newImg.src = '/wp/wp-content/plugins/tre3-header-manager/headers/' + newIndex + '/' + (thumbIndex + 1) + '.png'
	newImg.setStyle({border: 'none', display: 'none'})
	var theHeader = this.headers[thumbIndex]
	theThis = this
	newImg.onload = function() {
		theHeader.childElements().each(function(item) {
			theThis.thumbs['' + theThis.currentIndex].setStyle({backgroundImage: 'url(/wp/wp-content/plugins/tre3-header-manager/headers/' + newIndex + '/thumb.png)'})
			if (!item.visible()) {
				Element.remove(item)
			}
			item.fade({queue: {position: 'end', scope: 'div' + thumbIndex}, duration: .2})
		})
		theHeader.insert(newImg)
		newImg.appear({queue: {position: 'end', scope: 'div' + thumbIndex}, duration: .8})
	}
}

TreCHeaderManager.prototype.selectThumb = function(newIndex) {
	if (this.currentIndex > 0 && this.thumbs['' + this.currentIndex]) {
		this.thumbs['' + this.currentIndex].setStyle({border: '1px #ccc solid'})
	}
	this.currentIndex = newIndex
	if (!this.thumbs['' + this.currentIndex]) return;
	this.thumbs['' + this.currentIndex].setStyle({border: '1px #c31 solid'})
	this.thumbs['' + this.currentIndex].setStyle({backgroundImage: 'url(/wp/wp-content/plugins/tre3-header-manager/images/loader.gif)'})
	for (i = 0; i < this.headers.length; i++) {
		this.selectThumbTo(i, newIndex)
	}
}

TreCHeaderManager.prototype.random = function() {
	newIndex = this.currentIndex
	while (this.currentIndex == newIndex) {
		newIndex = Math.floor(Math.random() * (this.thumbs.length - 1)) + 1
	}
	this.selectThumb(newIndex)
}

TreCHeaderManager.prototype.initThumbs = function() {
	this.thumbArea = new Element('div')
	this.thumbArea.setStyle({float: 'right', width: '220px', height: '57px'})
	$('homepage-link').insert({'before': this.thumbArea})
	theThis = this
	new Ajax.Request('/wp/wp-content/plugins/tre3-header-manager/getCount.php', {
		onSuccess: function(response) {
			theThis.thumbs = new Array()
			response.responseJSON.items.each(function(item) {
				theThis.addThumb(item)
			})
			theThis.createDivs()
		}
	});
}

TreCHeaderManager.prototype.createHeaderDiv = function(border, n) {
	var div = new Element('div')
	div.setStyle({overflow: 'hidden', float: 'left', height: '198px', width: '326px', borderRight: (border ? '1px #999 dashed' : 'none')})
	var img = new Element('img')
	img.src = '/wp/wp-content/plugins/tre3-header-manager/images/loader.gif'
	img.setStyle({border: 'none', marginTop: '87px', marginLeft: '151px', display: 'none'})
	div.insert(img)
	img.appear({duration: .1, queue: {position: 'end', scope: 'div' + n}})
	return div
}

TreCHeaderManager.prototype.createDivs = function() {
	// Tre immagini da 326 * 198
	this.headers.push(this.createHeaderDiv(true, 0))
	this.headers.push(this.createHeaderDiv(true, 1))
	this.headers.push(this.createHeaderDiv(false, 2))
	this.headers.each(function(item) {
		this.headerContainer.insert(item)
	}, this)
	this.random()
	theThis = this
	this.pe = new PeriodicalExecuter(function(pe) {
		theThis.random()
	}, 15);
}

TreCHeaderManager.prototype.replaceHeader = function() {
	this.headerContainer = new Element('div')
	this.headerContainer.setStyle({borderTop: '4px black solid', height: '198px', background: '#333'})
	var img = $('header-img')
	img.replace(this.headerContainer)
	//this.img.setStyle({border: 'none'})
	//this.headerContainer.insert(this.img)
}

function initTreCHeaderManager() {
	new TreCHeaderManager()
}

Event.observe(window, 'load', initTreCHeaderManager);