//  <![CDATA[
var top5fx = [];
var	cnt = 0;

window.addEvent("domready", function(){
	
	$$("div.efekt").each(function(el){
		if(el.getStyle("display")=="none"){
			el.setStyles({"display": "block", "opacity": "0"});
		}
		top5fx.push(new Fx.Styles(el, {duration:500}));
	})
	
	fx.periodical(5000);
	new globaldizajn_marquee($("scroller"),{direction:'vertical',width:170,height:120})
})

function fx(){
	cnt++;
	if (cnt==top5fx.length) cnt = 0;
	top5fx[cnt].start({
		opacity : [0,1]
	})
	
	$$("div.efekt").each(function(el, indx){
		if(el.getStyle("opacity")!=0){
			top5fx[indx].start({
				opacity: [1,0]
			})
		}
	})
}


var globaldizajn_marquee = new Class({
		options: {
			direction: 'vertical', //'vertical', //horizontal
			speed: 50,
			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().size.y : this.newDiv.getSize().size.x;
			this.limit = this.options.direction=="vertical" ? this.element.getSize().size.y : this.element.getSize().size.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);
// ]]>