var MGMarquee = {
	defaultSpeed: 50, // Pixels per second

	setup: function() {
		jQuery(function(){ $(".MGMarquee").hide(); });
		$(window).load(this.install);
	},
	
	
	installForElement: function(element) {
		var clipSize = {width: $(element).innerWidth()+"px", height: $(element).innerHeight()+"px"};
		var speed = element.getAttribute("mg:marqueespeed");
		if(!speed) speed = this.defaultSpeed;
		
		var clip = document.createElement("div");
		clip.className = "MGMarqueeClip";
		$(clip).insertAfter($(element));
		
		var content = document.createElement("span");
		content.className = "MGMarqueeContent";
		$(content).appendTo($(clip));
		content.innerHTML = element.innerHTML;
		
		var contentWidth = $(content).innerWidth()+1;
		
		$(content).css({
			display: "block",
			width: contentWidth+"px",
			left: 0
		});
		
		var content2 = document.createElement("span");
		content2.className = "MGMarqueeContent";
		$(content2).appendTo($(clip)).css({
			display: "block",
			width: contentWidth+"px",
			left: contentWidth
		});
		content2.innerHTML = element.innerHTML;
		
		
		$(clip).css(clipSize);
		$(element).remove();
		
		this.startCycle(contentWidth, content, content2, speed);
	},
	
	
	install: function() {
		jQuery.each($(".MGMarquee"), function(i, element){
			MGMarquee.installForElement(element);
		});
	},
	

	startCycle: function(contentWidth, firstElement, secondElement, speed) {
		var distance = parseInt(secondElement.style.left);
		var duration = distance/speed;
		
		$([firstElement,secondElement]).unbind().hover(function() {
			$([secondElement, firstElement]).stop();
		}, function() {
			$([firstElement,secondElement]).unbind();
			MGMarquee.startCycle(contentWidth, firstElement, secondElement, speed);
		});
	
		$(firstElement).animate({left: -contentWidth}, duration*1000, "linear", function(){
			$(secondElement).stop();
			$(firstElement).css({left: 0});
			$(secondElement).css({left: contentWidth});
			MGMarquee.startCycle(contentWidth, firstElement, secondElement, speed);
		});
		$(secondElement).animate({left: 0}, duration*1000, "linear");
	}
};


MGMarquee.setup();