var globaldizajn_marquee = new Class({
	options: {
		direction: 'vertical', //'vertical', //horizontal
		speed: 25,
		width: 150,
		height: 150
	},

	initialize: function(el, options) {
		this.setOptions(options);
		this.element = el;
		this.periodical = "";
		
		this.newDiv = new Element("div");
		
		if(this.options.direction!="vertical"){
			this.newDiv.setStyles({
				"white-space":"nowrap",
				position:"absolute"
			})
		}
			
		this.element.setStyles({
			width : this.options.width,
			height: this.options.height,
			overflow:"hidden",
			position:"absolute"
		})
		this.newDiv.innerHTML = this.element.innerHTML;
		
		this.element.innerHTML = "";
		this.newDiv.injectInside(this.element);
		
		this.newDiv.addEvents({
			
			"mouseover" : function() {
				$clear(this.periodical)	
			}.bind(this),
			"mouseout"  : function() {
				
				this.periodical = this.anim.bind(this).periodical(this.options.speed)
				
			}.bind(this)
			
		})
		
		this.marqueeSize = this.options.direction=="vertical" ? this.newDiv.getSize().y : this.newDiv.getSize().x;
		this.limit = this.options.direction=="vertical" ? this.element.getSize().y : this.element.getSize().x;
		this.position = this.limit;
		
		this.periodical = "";
		
		this.style = this.options.direction=="vertical" ? "margin-top" : "left";
		
		this.periodical = this.anim.bind(this).periodical(this.options.speed);

	},
	anim: function() {
		
		if(this.position<(-1*this.marqueeSize)) this.position = this.limit;
		this.newDiv.setStyle(this.style,this.position--);
		
	}

})
globaldizajn_marquee.implement(new Options, new Events);