// DO NOT USE scrollingHorizontal FOR CSS SINCE THAT IS REMOVED LATER ON
// USE scrollerHorizontalOuter INSTEAD

var scrollingHorizontalSpeed = 20; // ms per pixel


function initScrollingHorizontal() {
	// uppercase requested texts
	// we don't do that by CSS because this may be unwanted if not animated
	// (if JS is off)
	jQuery('.scrollingUppercase').css('text-transform', 'uppercase');

	// we have a CSS bug in MSIE 6 and 7; don't run there
	// dirty workaround, does not look the same
	if (navigator.appName == 'Microsoft Internet Explorer') {
		jQuery('.scrollingHorizontal').each(function(){
			var jThis = jQuery(this);

			var singleHTML = jThis.html();
			singleHTML += ' &mdash; ';
			var repeated = '';
			for (var i=0; i<100; i++) {
				repeated += singleHTML;
			}

			jThis.wrap('<marquee></marquee>');
			jThis.html(repeated);
		});

		return; // end processing
	}

	// transform every element with triggerering class
	jQuery('.scrollingHorizontal').each(function(){
		var jThis = jQuery(this);

		// append --- separator
		jThis.append('&nbsp;&mdash;&nbsp;'); 

		// wrap into a clipping div
		jThis.wrap('<div style="overflow: hidden;" class="scrollerHorizontalOuter"></div>');
		var outer = jThis.parent();

		// wrap again into the scroller div
		jThis.wrap('<div style="position: relative;" class="scrollerHorizontalInner"></div>');
		var jInner = jThis.parent();
		var inner = jInner[0];
		
		// remove trigger class
		jThis.removeClass('scrollerHorizontal');

		// get single text width by cloning
		var clone = jThis.clone().prependTo('body');
		clone.css({'display': 'block', 'position': 'absolute', 'top': -200});
		var singleWidth = clone.width();
		clone.remove();

		// get available surrounding width
		var surroundingWidth = outer.width();

		// transfer margin to outer div
		outer.css('margin-top', jThis.css('margin-top'));
		outer.css('margin-bottom', jThis.css('margin-bottom'));
		outer.css('margin-left', jThis.css('margin-left'));
		outer.css('margin-right', jThis.css('margin-right'));

		// make original object inline to seamlessly append with others
		jThis.css('display', 'inline');

		// clone one time for animation (must be done at least one time!)
		clone = jThis.clone().appendTo(jInner);

		// repeat until necessary width is met (twice the surrounding area)
		var totalWidth = 2 * singleWidth;
		while (totalWidth < 2*surroundingWidth) {
			jThis.clone().appendTo(jInner);
			totalWidth += singleWidth;
		}

		// prepare animation
		var animationTime = singleWidth * scrollingHorizontalSpeed;
		jInner.css('width', 2*surroundingWidth + 100); // needs some extra space on Safari?

		// store necessary information in object
		inner.animationTime = animationTime;
		inner.singleWidth = singleWidth;
		inner.animationFunction = function() {
			var jThis = jQuery(this);
			jThis.css('left', 0);
			// animation also needs some additional offset
			jThis.animate({'left': -this.singleWidth+4}, this.animationTime, 'linear', this.animationFunction);
		}
		
		// start animation
		inner.animationFunction();
	});
}

jQuery(document).ready(initScrollingHorizontal);
