// Marquee compatibile con XHTML-Strict
// Autore: Andrea Fidone - afidone@gmail.com
// Utilizzo: TODO

function Marquee (containerId) {
	this.N = 0
	this.E = 1
	this.S = 2
	this.W = 3
	
	
	this.container = null
	this.content = null
	this.menubar = null
	this.button = null
	
	
	this.stopped = true
	this.paused = false
	this.pausable = false
	this.scrollable = false
	this.clicked = false
	
	
	this.interval = 10
	this.offset = 2
	this.pos = 0
	
	this.direction = this.N
	
	
	
	this.create = function () {
		this.container = document.getElementById(containerId)
		var contentHTML = this.container.innerHTML
		this.container.innerHTML = ""
		this.container.style.overflow = "hidden"
		this.container.style.position = "relative"
		
		this.content = document.createElement('div')
		this.content.id = containerId+"_content"
		this.content.style.position = "absolute"
		this.content.innerHTML = contentHTML
		
		//this.content.style.backgroundColor = "red"

		this.menubar = document.createElement('div')
		this.menubar.style.backgroundColor = "transparent"
		this.menubar.style.textAlign = "right"
		this.menubar.style.position = "relative"
		this.button = document.createElement('input')
		this.button.type = "button"
		this.button.value = "PAUSA"
		this.button.onclick = function () {
			document.getElementById(containerId).Marquee.pause()
		}
		this.menubar.appendChild(this.button)
		this.hideMenuBar(true)
		
		
		
		this.container.appendChild(this.content)
		this.container.appendChild(this.menubar)
		
		this.initPosition()
//		var mask = document.createElement('div')
//		mask.style.backgroundColor = "transparent"
//		mask.style.borderColor = "green"
//		mask.style.borderWidth = "1px"
//		mask.style.borderStyle = "solid"
//		mask.style.position = "absolute"
//		mask.style.top = 0
//		mask.style.left = 0
//		mask.setAttribute("class","transparent")
//		mask.setAttribute("className","transparent")
//		mask.style.width = this.content.offsetWidth
//		mask.style.height = this.content.offsetHeight
		//mask.innerHTML="xxx"
		//this.content.appendChild(mask)
		
		
				
		
		this.container.Marquee = this

		this.container.onmouseover = function () {
			var marquee = document.getElementById(containerId).Marquee
			if (!marquee.isPaused()) marquee.stop()
		}
		this.container.onmouseout = function () {
			var marquee = document.getElementById(containerId).Marquee
			if (!marquee.isPaused()) marquee.start()
			if (marquee.isScrollable()) marquee.content.onmouseup()
		}
		
		if (this.isScrollable()) {
			
			this.content.onmousedown = function (event) {
				var marquee = document.getElementById(containerId).Marquee
				document.body.style.cursor = (marquee.isVertical() ? "n-resize" : "w-resize")
				marquee.clicked = true
				event = (event) ? event : window.event
				marquee.pos = (marquee.isVertical() ? event.screenY : event.screenX)
			}
			this.content.onmouseup = function () {
				document.body.style.cursor = "default"
				var marquee = document.getElementById(containerId).Marquee
				marquee.clicked = false
			}
			this.content.onmousemove = function (event) {
				var marquee = document.getElementById(containerId).Marquee
				if (marquee.clicked) {
					document.body.style.cursor = (marquee.isVertical() ? "n-resize" : "w-resize")
					event = (event) ? event : window.event
					var cpos = (marquee.isVertical() ? event.screenY : event.screenX)
					
					if (marquee.isVertical()) marquee.content.style.top = parseInt(marquee.content.style.top) + (cpos - marquee.pos)
					else marquee.content.style.left = parseInt(marquee.content.style.left) + (cpos - marquee.pos)
					marquee.pos = cpos
				}
			}
		}
		
		
		var cmd = "Marquee.scroll('"+containerId+"')"
		setInterval(cmd,this.interval)
		
	}
	
	
	this.initPosition = function () {
		var temp
		switch (this.direction) {
			case this.N: {
				this.content.style.top = this.container.style.height 
				this.content.style.left = "0px"
				this.content.style.width = "100%"
				this.content.style.height = "auto"
				break
			}
			case this.S: {
				this.content.style.top = -this.content.offsetHeight
				this.content.style.left = "0px"
				this.content.style.width = "100%"
				this.content.style.height = "auto"
				break
			}
			case this.W: {
				this.content.style.top = "0px"
				this.content.style.left = this.container.style.width
				this.content.style.width = "auto"
				this.content.style.height = "auto"
				break
			}
			case this.E: {
				this.content.style.top = "0px"
				temp = (this.content.offsetWidth * (-1))
				temp = temp+"px"
				this.content.style.left = temp
				this.content.style.width = "auto"
				this.content.style.height = "auto"
				break
			}
		}
	}
	
	
	this.isVertical = function () {
		return (this.direction == this.N || this.direction == this.S)
	}
	
	
	this.setInterval = function (i) {
		this.interval = i
	}
	
	this.getInterval = function () {
		return this.interval
	}
	
	this.setOffset = function (o) {
		this.offset = o
	}
	
	this.getOffset = function () {
		return this.offset
	}
	
	this.hideMenuBar = function (hide) {
		if (hide) this.menubar.style.visibility = "hidden"
		else this.menubar.style.visibility = "visible"
	}
	
	this.start = function () {
		if (this.isPausable()) this.hideMenuBar(true)		
		this.stopped = false
	}
	
	this.stop = function () {
		if (this.isPausable()) this.hideMenuBar(false)
		this.stopped = true
	}
	
	this.pause = function () {
		if (!this.isPaused()) {
			this.paused = true
			this.button.value = "START"
		} else {
			this.paused = false
			this.button.value = "PAUSA"
		}
	}
	
	this.isStopped = function () {
		return this.stopped
	}
	
	this.isPaused = function () {
		return this.paused
	}
	
	this.isPausable = function () {
		return this.pausable
	}
	
	this.setPausable = function (pausable) {
		this.pausable = pausable
	}
	
	this.isScrollable = function () {
		return this.scrollable
	}
	
	this.setScrollable = function (scrollable) {
		this.scrollable = scrollable
	}
	
	this.getDirection = function () {
		return this.direction
	}
	
	this.setDirection = function (direction) {
		this.direction = direction
	}
	
	
	this.debug = function () {
		var text = ""
		
		text += "CONTAINER_ID: " + containerId + "\n"
		text += "STATUS: " + (this.isPaused() ? "PAUSE" : (this.isStopped() ? "STOP" : "START")) + "\n"
		text += "INTERVAL: " + this.interval + "\n"
		text += "OFFSET: " + this.offset + "\n"
		text += "DIRECTION: " + this.direction + "\n"
		text += "CONTAINER_W: " + this.container.style.width + "\n"
		text += "CONTAINER_H: " + this.container.style.height + "\n"
		text += "CONTENT_TOP: " + this.content.style.top + "\n"
		text += "CONTENT_OFFSET_WIDTH: " + this.content.offsetWidth + "\n"
		text += "CONTENT_OFFSET_HEIGHT: " + this.content.offsetHeight + "\n"
		
		alert(text)
	}
	
	
	Marquee.scroll = function (id) {
		var container = document.getElementById(id)
		var m = container.Marquee
		if (!m.isStopped()) {
			var content = document.getElementById(id+"_content")
			var dir = m.getDirection()
			var tot, fact, top
			var temp
			 
			if (m.isVertical()) {
			
				tot = (dir == m.N) ? (parseInt(content.offsetHeight)) : (parseInt(container.style.height))
				fact = (dir == m.N) ? (1) : (-1) 
				top = (dir == m.N) ? (parseInt(container.style.height)) : (-parseInt(content.offsetHeight)) 
				
				if ((parseInt(content.style.top) * (-1) * (fact)) > tot) {
					temp = top
				} else {
					temp = parseInt(content.style.top) - (m.offset * fact)
				}
				
				temp = temp+"px"
				content.style.top = temp
				
			} else {
			
				tot = (dir == m.W) ? (parseInt(content.offsetWidth)) : (parseInt(container.style.width))
				fact = (dir == m.W) ? (1) : (-1) 
				left = (dir == m.W) ? (parseInt(container.style.width)) : (-parseInt(content.offsetWidth)) 
				
				if ((parseInt(content.style.left) * (-1) * (fact)) > tot) {
					temp = left
				} else {
					temp = parseInt(content.style.left) - (m.offset * fact)
				}
				
				temp = temp+"px"
				content.style.left = temp
			} 
		}
	}
	



}



once = false
function runonce (text) {
	if (!once) {
		once = true
		alert("Run Once\nDEBUG\n"+text)
	}
}

function quickMarquee (id,interval,offset, pausable, scrollable, dir) {
	m = new Marquee(id)
	m.setInterval(interval)
	m.setOffset(offset)
	m.setPausable(pausable)
	m.setScrollable(scrollable)
	m.setDirection(dir)
	m.create()
//	m.start()				
	return m
}

