Stuff

<html>
<head>
<title>Test Site</title>

<!-- Prototype Framework -->
<script src="js/prototype.js" type="text/javascript"></script>

<!-- Scriptaculous Resources (Req: Prototype) -->
<script src="js/scriptaculous.js" type="text/javascript"></script>

</head>
<body id="body">


<script type="text/javascript">

	/* Configuration */
	var scrollerHeight = 400;
	var scrollerWidth = 200;
	
	// Image width default
	var imageWidth = 100;
	
	// Padding around images (top/bottom) in px
	var imagePadding = 4;
	
	// Scroller Speed (Milliseconds per iteration (which moves by one pixel))
	var scrollSpeed = 10;
	
	/* Not to be touched */
	var Item = Class.create();
	
	// Item ID
	var ItemID = 0;
	
	// Temp Height; Used when positionning images initially
	var tempHeight = 0;
	
	// The left location of all images
	var leftPos = (scrollerWidth/2) - (imageWidth/2);
	
	Item.prototype = 
	{
		// Fields
		
		imgURL: '',
		desc: '',
		price: '',
		element: '',
		
		// Constructor
		initialize: function(parentObj, imgURL, desc, price)
		{
			this.imgURL = imgURL;
			this.desc = desc;
			this.price = price;
			
			// Create the imagetag
			this.element = Builder.node('img', {src: imgURL, style: 'position: absolute; width: '+imageWidth+'px; padding: '+imagePadding+'px;', id: ++ItemID});
						
			parentObj.appendChild(this.element);			

			parentObj.appendChild(Builder.node('br'));
			
			/* Finally, add mouse/event listeners to the element */
			Event.observe(this.element, 'click', window.stopMoving);
		},
		
		getElement: function()
		{
			return this.element;
		}
	
	};
	
	// Takes an array of items
	initItems = function(obj)
	{
		for (i=0;i<obj.length;i++)
		{	
			var element = obj[i].getElement();		
			
			console.log("Set "+element.id+" to "+tempHeight);
			
			element.setStyle( {top: tempHeight+'px', left: leftPos+'px'} );
			
			var nextHeightInc = (element.height+imagePadding);
			
			tempHeight += nextHeightInc;
		}
		
		return;
	}
	
	// Places an item on the end of the current list (presumably from the top)
	placeEnd = function(obj)
	{
		// Get the bottommost position in items
		var highestTop = 0; 
		var highestImgHeight = 0;
		
		for (i=0;i<items.length;i++)
		{
			var element = items[i].getElement();
			
			// Get the element's top attr
			var top = parseFloat(element.getStyle('top'));
			
			// Compare to highest so far
			if (top > highestTop)
			{
				// Set the new furthest-from-top reading
				highestTop = top;
				
				// Set the height of the new champion
				highestImgHeight = element.height;
				
				// console.log("New Highest! ("+(height)+"/"+(highestImgHeight)+")");
			}
		}
		
		// Reposition the obj in question
		
		var newHeight = highestTop+(imagePadding+highestImgHeight);
		
		obj.getElement().setStyle( { top: newHeight } );
			
	}
	
	// Takes an array of items
	stepUp = function(obj)
	{				
		var currentHeight = obj.getStyle('top');
		var newHeight = parseFloat(currentHeight) - 1;
		
		// console.log("Scrolling "+obj.id+" to "+(newHeight));
		
		// Move it up a bit
		obj.setStyle( { top: newHeight+'px' } );
	}
	
	var breakVar = false;
	var breakVar2 = false;
	
	doScroll = function()
	{
		for (i=0; i<items.length; i++)
		{
			var obj = items[i].getElement();
			
			// If their current position(plus their height and padding) is non-negative
			if ((parseFloat(obj.getStyle('top')) + obj.height + imagePadding) > 0)
			{
				stepUp(obj);
			}
			else
			{
				placeEnd(items[i]);
			}
		}		
	}
		
	// Create the main div	
	var _scrollerDiv = Builder.node('div', {style:'position: absolute; left: 50px; top: 50px; text-align: center; border: 1px solid red; width: 200px; height: '+scrollerHeight+'px; overflow: hidden;', id: 'scrollerdiv'}); 
	
	/* Data Structures */
	var items = new Array(
		new Item(_scrollerDiv, "image.jpg", "Description", "£123.30"),
		new Item(_scrollerDiv, "image2.jpg", "Description 2", "£153.30"),
		new Item(_scrollerDiv, "image3.jpg", "Description 3", "£193.30"),
		new Item(_scrollerDiv, "image4.jpg", "Description 4", "£293.30"),
		new Item(_scrollerDiv, "image5.jpg", "Description 5", "£593.30"),
		new Item(_scrollerDiv, "image6.jpg", "Description 6", "£893.30")
	);
			
	/* Code */
	// Add the div to the body
	$(body).appendChild(_scrollerDiv);
	
	initItems(items);

	var timer;
	
	startMoving = function()
	{
		timer = setInterval(doScroll, 10);	
	}
	
	stopMoving = function()
	{
		clearInterval(timer);
	}
	
	startMoving();
	
</script>

<div style="position: absolute; left: 400px; top: 50px; text-align: center; border: 1px solid green; width: 200px; height: 500px;" id="testscroller">
	<img src="image.jpg" style="position: absolute; top: 0px; left: 50px; width: 100px; height: 80px; padding: 4px;">
	<img src="image2.jpg" style="position: absolute; top: 84px; left: 50px; width: 100px; height: 80px; padding: 4px;">
	<img src="image3.jpg" style="position: absolute; top: 168px; left: 50px; width: 100px; height: 80px; padding: 4px;">
	<img src="image4.jpg" style="position: absolute; top: 252px; left: 50px; width: 100px; height: 80px; padding: 4px;">
	<img src="image5.jpg" style="position: absolute; top: 336px; left: 50px; width: 100px; height: 80px; padding: 4px;">
	<img src="image6.jpg" style="position: absolute; top: 420px; left: 50px; width: 100px; height: 80px; padding: 4px;">
</div>




</body>
</html>