function miniBasketDropDown(){

	

	

	<!-- set the number of items per column -->

	productsPerColumn=4;

	<!-- calculate the total items in a column and therefore height of container -->

	if(totalProducts >= productsPerColumn){

		mostProductsInColumn = productsPerColumn;

	}

	else{

		mostProductsInColumn = totalProducts;

	}

	<!-- calculate total columns -->

	totalColumns = Math.ceil(totalProducts / productsPerColumn);

	<!-- set a counter to keep track of which column we are on -->

	thisColumn = 1;

	<!-- set the starting position of the minibasket -->

	startBottom=42;

	<!-- set the height of the links in the bottom of the minibasket -->

	linksHeight=65;

	<!-- set the height required per product in the minibasket -->

	productHeight=88;

	<!-- set the height required per product in the minibasket -->

	columnWidth=209;

	<!-- set the end position of the minibasket when revealed -->

	endBottom = (0 - (mostProductsInColumn*productHeight) + startBottom - linksHeight); 

	<!-- create an effect object called dropDown that changes the position of the minibasket container -->

	var dropDown = new Fx.Style('minibasketContainer', 'bottom',{duration:500});

	<!-- create mouse events if there are products in basket -->

	if (totalProducts > 0){

		$('shoppingBag').addEvent('mouseenter', function(){			

			dropDown.stop();

			dropDown.start(endBottom);

		});

		$('minibasketContainer').addEvent('mouseenter', function(){		

			dropDown.stop();

			dropDown.start(endBottom);

		});

		$('shoppingBag').addEvent('mouseleave', function(){			

			dropDown.stop();

			dropDown.start(startBottom);

		});

		$('minibasketContainer').addEvent('mouseleave', function(){			

			dropDown.stop();

			dropDown.start(startBottom);

		});

	}

	<!-- create an effect object called nextPrevious that changes the position of the minibasket product columns -->

	var nextPrevious = new Fx.Style('minibasketProductContainer2', 'margin-left',{duration:500});

	<!-- create mouse events if there are next/previous actions required -->

	if (totalColumns > 1){

		$('next').removeClass('hide');

		$('next').addEvent('click', function(){

			thisColumn = thisColumn + 1;

			nextPosition = (thisColumn * columnWidth)-columnWidth;

			nextPrevious.start(-nextPosition);	

			$('previous').removeClass('hide');

			if(thisColumn == totalColumns){

				$('next').addClass('hide');

			}

		});

		$('previous').addEvent('click', function(){

			$('next').removeClass('hide');

			thisColumn = thisColumn - 1;

			previousPosition = (thisColumn * columnWidth)-columnWidth;

			nextPrevious.start(-previousPosition);

			if(thisColumn == 1){

				$('previous').addClass('hide');

			}

		});

	}

}