var disableAlpha = .75

/** Constructor. */
function SimpleWidgetArea(theItem) {
	this.widgetArea = theItem;
	this.index = 0
	this.initArrays()
	this.initLinks()
	this.checkRange()
	this.updateLabel()
	this.disabled = false
}

/*** Init arrays. */
SimpleWidgetArea.prototype.initArrays = function() {
	content = this.widgetArea.childElements()[0].remove()
	this.items = new Array()
	content.childElements().each(function(item) {
		this.items.push(item)
	}.bind(this))
}

/**  Init links. */
SimpleWidgetArea.prototype.initLinks = function() {
	this.label = new Element('p', {class: 'swab_label'})
	this.prev = this.createButton('left', 'Indietro')
	this.next = this.createButton('right', 'Avanti')
	this.swab_container = new Element('div', {class: 'swab_container'})
	this.scrolling = new Element('div', {class: 'swab_scroller'})
	this.scrolling.setStyle({width: (145 * this.items.size()) + 'px'})
	this.disable(this.prev)
	Event.observe(this.next, 'click', this.gotoNext.bind(this))
	Event.observe(this.prev, 'click', this.gotoPrev.bind(this))
	this.widgetArea.insert(this.prev)
	this.widgetArea.insert(this.swab_container)
	this.widgetArea.insert(this.next)
	this.widgetArea.insert(this.label)
	this.swab_container.insert(this.scrolling)
	this.items.each(function(item) {
		item.fade({to: disableAlpha, transition: Effect.Transitions.full})
		Event.observe(item, 'mouseover', mouseOver)
		Event.observe(item, 'mouseout', mouseOut)
		this.scrolling.insert(item)
		if (!item.down().visible()) {
			item.down().appear({duration: .5})
		}
	}.bind(this))
}

/** Next. */
SimpleWidgetArea.prototype.gotoNext = function(event) {
	Event.stop(event)
	if (this.disabled) return
	if (this.index >= this.items.size() - 1) return
	this.index++
	this.disableAll()
	new Effect.Move(this.scrolling, {x: -143, y: 0, mode: 'relative', transition: Effect.Transitions.sinoidal, duration: .2, afterFinish: this.updateLabel.bind(this)})
}

/** Prev. */
SimpleWidgetArea.prototype.gotoPrev = function(event) {
	Event.stop(event)
	if (this.disabled) return
	if (this.index == 0) return
	this.index--
	this.disableAll()
	new Effect.Move(this.scrolling, {x: 143, y: 0, mode: 'relative', transition: Effect.Transitions.sinoidal, duration: .2, afterFinish: this.updateLabel.bind(this)})
	
}

/** Update label. */
SimpleWidgetArea.prototype.updateLabel = function() {
	this.label.update(this.items[this.index].title)
	this.checkRange()
	this.disabled = false
}

/** Check range. */
SimpleWidgetArea.prototype.checkRange = function() {
	if (this.index == 0) {
		this.disable(this.prev)
	} else {
		this.enable(this.prev)
	}
	if (this.index >= this.items.size() - 1) {
		this.disable(this.next)
	} else {
		this.enable(this.next)
	}
}

/** Enable button. */
SimpleWidgetArea.prototype.enable = function(link) {
	link.removeClassName('disabled')
	link.disabled = 0
}

/** Disable button. */
SimpleWidgetArea.prototype.disable = function(link) {
	link.addClassName('disabled')
	link.disabled = 1
}

/** Disable button. */
SimpleWidgetArea.prototype.disableAll = function() {
	this.disable(this.prev)
	this.disable(this.next)
	this.disabled = true
}

/** Create a button. */
SimpleWidgetArea.prototype.createButton = function(img, label) {
	a = new Element('a', {title: label, href: '#', class: 'swab_' + img})
	return a
}


mouseOver = function(event) {
	Event.findElement(event, 'a').appear({duration: .2})
}
mouseOut = function(event) {
	Event.findElement(event, 'a').fade({to: disableAlpha, duration: .2})
}

Event.observe(window, 'load', function(event) {
	l = $$('.simple-widget-area')
	if (!l) {
		return
	}
	l.each(function(item) {
		new SimpleWidgetArea(item)
	})
});