var dot_width = 20;
var dot_height = 7;

function tweenMarker(el,at,c,link_el,first){
	var dot_tween = new Fx.Tween(el);
	var top = el.getSize().y - dot_height;
	(at<0 ? dot_tween.start('background-position',c+'px '+el.getSize().y+'px',c+'px '+top+'px') : dot_tween.start('background-position', at+'px '+top+'px', c+'px '+top+'px'));
	dot_tween.addEvent('complete',function(){ 
 		document.location.href = link_el.get('href');
	});
	setupSlideAnimation(c);
}

function setupSlideAnimation(at){
	$$('.slide_animation li a').each(function(el,i){
		el.removeEvents();
		el.addEvent('click',function(e){
			e.stop();
//			console.log(this.getParent().getParent().getPosition().x);
//			console.log(this.getParent().getPosition().x);
//			var c = this.getParent().getPosition().x + this.getParent().getSize().x / 2 - dot_width / 2;
			var c = (this.getParent().getPosition().x - this.getParent().getParent().getPosition().x)+ this.getParent().getSize().x / 2 - dot_width / 2;
			tweenMarker(this.getParent().getParent(),at,c,this);
		});
	});
}

function setDotPosition(){
	$$('.slide_animation li.active').each(function(el,i){
	
//		console.log(el.getPosition().x);
	
//		var at = el.getPosition().x + el.getSize().x / 2 - dot_width / 2;
		var at = (el.getPosition().x - el.getParent().getPosition().x) + el.getSize().x / 2 - dot_width / 2;
//					(this.getParent().getPosition().x - this.getParent().getParent().getPosition().x)
		var top = el.getParent().getSize().y - dot_height;
		el.getParent().setStyle('background-position',at+'px '+top+'px');
		setupSlideAnimation(at);
	});
}