// NOTE: jQuery() is used instead of $() because IE does not handle it correctly

// Vars to set
var actual	= 1;
var timeout	= 6000;
if(typeof doAnimation	== 'undefined') var doAnimation = true;
if(typeof props == 'undefined') var props = 6;
if(typeof visibleProps == 'undefined') var visibleProps = 3;

// wrapper around the boxes
var slider = jQuery('#proposal');

// set boxes that are out of slider invisible
for(var i = visibleProps +1;i <= props; i++)
	jQuery('#prop_' + i).css('display', 'none');

if(doAnimation) {
    var propCount = props;
	
	function prop_animation() {
		var lastVisibleProp = jQuery('#prop_' + (actual + visibleProps));
		var actualProp = jQuery('#prop_' + actual++);
		
		// 1. fade first box out
		actualProp.fadeOut("slow", function() {
			/* actualProp has display-none now, so we have got to fill the gap by setting
			 * a new left-value to the wrapper */
			slider.css('left', '190px');
			// 2. move the wrapper let smoothly
			slider.animate({left:'-=190px'}, 1000, 'swing', function() {
				// 3. fade the last box in
				lastVisibleProp.fadeIn("slow", function() {
					// add the faded-out box content to the end of the wrapper again
					slider.append('<div class="proposal_box" id="prop_' + (++propCount) + '" style="display: none;">' + actualProp.html() + '</div>');
					actualProp.remove();
				});
			});
		});
		
		setTimeout("prop_animation()", timeout);
	}
	
	setTimeout("prop_animation()", timeout);
}