/**
 * 16.02.2009
 */
 
/*
 * function to create Carousal Effect
 * requires: 
 * 	   1. Id containing the carousal eg. '#carousal', '#carousal1'
 *     2. Width of the slide in the carousal eg. 332
 */

var carousal = function( carousalID,slideWidth){
		
		/*
		 * Steps
		 * 1. Get the width of the single box ( containing the slide including its margins)
		 *    This box should not have any padding or margin, it should be neat width box.
		 * 2. Find out number of boxes
		 * 3. Get the style/s for the end of the list
		 * 4. Engage the carousal

		 */

		
		if ($(carousalID).length) {

			var boxes = 0;
			var slideUnit = slideWidth;
			var toShow = 1;
			var box = 1;

			boxes = $('#sliderBelt li').length;

			/*
			 * adjusts the width of the slider-belt, or else 
			 * all the boxes will not show... only those fitting in the width showup 
			 */
			
			var nwidth = (slideUnit * boxes) + 'px'; 
				$('#sliderBelt').css('width', nwidth);
				if (boxes >= toShow) {
					$('#next').click(function(){
						if (box < boxes) {
							$("#sliderBelt").animate({
								"left": "-="+slideUnit+"px"
							}, "slow");
							box++;
							if(box == boxes ){
								$('#next').addClass('atLast');
							}
						}
						else {
							//alert('you are at last');
						}

						$('#prev').removeClass('atFirst');
					});
					$('#prev').click(function(){
						if (box > 1) {
							$("#sliderBelt").animate({
								"left": "+="+slideUnit+"px"
							}, "slow");
							box--;
							if(box == 1){ $('#prev').addClass('atFirst');}

						}else{
							//alert('you are at the beginning');
						}

						$('#next').removeClass('atLast');
					});
					
				}//if$ boxes
		}//if$ carousal
}//carousal()