function removeCDATA(_str) {																// removes cdata declarations
	var str = _str;
	str = str.replace('<!--[CDATA[','');
	str = str.replace('<![CDATA[','');
	str = str.replace('&lt;![CDATA[','');
	str = str.replace(']]-->','');
	str = str.replace(']]>','');
	str = str.replace(']]&gt;','');
	return str;
}

function maxLeft() {																	// gets the biggest left css value
	var maxX = 0;
	$('.scrollerElement').each(function(){
		var x = parseInt($(this).css('left')); 
		if(x > maxX) maxX = x;
	});
	
	return maxX;
}

jQuery.fn.extend({
	nonFlashScroller: function(url) {
		var dst = this;																	// save a reference to the container (used in callbacks);
		var speed = 1;																	// how many px to move every 50ms
		var pauseHover = false;															// flag to pause scrolling on hover
		
		$(dst).append('<div id="scrollerContainer"></div>'); 							// add a container div
		
		var animateScroller = function() {												// move the thumbs, and wrap
			if(!pauseHover) {															// only animate if not scrolling
				$('.scrollerElement').each(function(){
					newX = parseInt($(this).css('left')) - 1;							// calc new x
					if(newX < -120) {													// if the element is off the left, add it back to the end
						newX = maxLeft() + 120;
					}
					$(this).css('left',newX);
				});
			}
		};
		
		$.get(url,function(data,textStatus,XMLHttpRequest){								// load the xml feed
			var index = 0;
			
			var headlineURL = removeCDATA($(data).find('headline').text());	// grab the image URL for the top left
			var headlineHTML = '<img src="'+headlineURL+'" alt="" id="scrollerHeadline" />';
			$('#scrollerContainer',$(dst)).append(headlineHTML);
			
			$(data).find('mag').each(function(){										// loop through all <mag> elements in the xml (god I love jQuery)
				var title = removeCDATA($('title',$(this)).text());			// grab the title of the issue
				var titleurl = removeCDATA($('titleurl',$(this)).text());		// grab the url of the issue
				var imageurl = removeCDATA($('largeimageurl',$(this)).text());// grab the url of the larger image
				var thumburl = removeCDATA($('smallimageurl',$(this)).text());// grab the url of the thumbnail
				var price = removeCDATA($('price',$(this)).text());			// grab the price description
				var savings = parseInt($('savings',$(this)).text());			// savings %
				if(savings > 10) savings = 'SAVE '+savings+'%';							// only display savings over 10%
				else savings = '';
				
				var html = '\
					<a href="'+titleurl+'" title="view all offers" class="scrollerElement" style="left: '+(120*index)+'px;"> \
						<img src="'+imageurl+'" alt="'+title+'" price="'+price+'" savings="'+savings+'" thumb="'+thumburl+'" /> \
					</a>';
					
				$('#scrollerContainer',$(dst)).append(html);
				index++;
			});
			
			$('.scrollerElement img',$(dst)).bind('mouseover',function(e){
				pauseHover = true;														// pause the scrolling while we hover
				var title = $(this).attr('alt');										// grab the data from the custom attributes on the img tag
				var price = $(this).attr('price');
				var savings = $(this).attr('savings');
				var thumb = $(this).attr('thumb');
				
				var html =' \
					<div id="scrollerPopin"> \
						<img src="'+thumb+'" alt="'+title+'" /> \
						<div> \
							<h3>'+title+'</h3> \
							<h4>'+price+'</h4> \
							<h5>'+savings+'</h5> \
						</div> \
					</div>';
				$('#scrollerContainer',$(dst)).append(html);
				
				// set initial position
				var newX = $(e.currentTarget).parent().position().left + 110;
				$('#scrollerPopin',$(dst)).css('left',newX);
			});
			
			$('.scrollerElement img',$(dst)).bind('mouseout',function(){
				$('#scrollerPopin',$(dst)).remove();									// remove the popin
				pauseHover = false;														// resume the scrolling
			});
			
			setInterval(animateScroller,50);
		});
	}
});