/* START CAROUSEL*/
/*
 *	Carousel_Window
 *	<div id="carousel_product_window">
 *		Carousel_Band
 *		<ul id="carousel_product_band">
 *			Carousel_Frame [0]
 *			<li class="carousel-product-container"></li>
 *			Carousel_Frame [1]
 *			<li class="carousel-product-container"></li>
 *			... 
 * 		</ul>
 * 	</div>
 * 
 * 	WHERE '...product...' is entity
 * 
 * */

/*** Start Frame Object ***/
function Frame (entity)
{
	this.w	= 920;	//	width, px
	this.h	= 620;	//	height, px
	
	this.parent			= $('ul#carousel_' + entity + '_band');
	this.list			= $('li.carousel-' + entity + '-container');
	this.list_length	= this.list.length;
	
	/*li css setup*/
	this.list.css({
		'width'		: this.w + 'px',
		'height'	: this.h + 'px',
		'display'	: 'block',
		'position'	: 'relative',
		'float'		: 'left'
	});
}

Frame.prototype.get_last = function ()
{
	return this.parent.children('li:last')[0];
};

Frame.prototype.get_first = function ()
{
	return this.parent.children('li:first')[0];
};

Frame.prototype.is_last = function ()
{
	var css_left = parseInt(this.parent.css('left'));
	
	if (Math.abs(css_left) == (this.list_length - 1) * this.w)	return true;
	
	return false;
};

Frame.prototype.is_first = function ()
{
	var css_left = parseInt(this.parent.css('left'));
	
	if (Math.abs(css_left) == 0) return true;
	
	return false;
};
/*** End Frame Object ***/


/*** Start Carousel Object ***/
function Carousel (entity)
{
	this.mode		= 'manual';	// [auto, manual] (not implement)
	this.circular	= true;		// boolean, close frame_band to ring
	this.speed		= 1;		// frames per scroll (not implement)
	this.timeout	= 1000;//'slow';	// jQ .animate() [fast, normal, slow] or digits(msec)
	
	this.frames			= new Frame(entity);
	
	this.w	= this.frames.w * this.frames.list_length;	//	width, px
	this.h	= this.frames.h;	//	height, px
	
	this.scrollable = true;// boolean, used for scroll activate
	
	this.parent			= $('div#carousel_' + entity + '_window');
	/*div css setup*/
	this.parent.css({
		'position'		: 'relative',
		'overflow'		: 'hidden',
		'height'		: this.h + 'px',
    	'width'			: this.frames.w + 'px',
    	'margin-left'	: 40 + 'px'
	});
	
	this.carousel		= $('ul#carousel_' + entity + '_band');
	/*ul css setup*/
	this.carousel.css({
		'position'	: 'relative',
		'overflow'	: 'hidden',
		'margin'	: 0,
		'padding'	: 0,
		'top'		: 0,
		'left'		: 0,
		'display'	: 'block',
		'width'		: this.w + 'px'
	});
}

Carousel.prototype.scrolling = function (direction)
{
	if (!this.is_scrollable(direction)) return false;
	
	if (this.circular)
	{
		var css_left	= parseInt(this.carousel.css('left'));
		css_left		+= direction == 'next' ? this.frames.w : -this.frames.w;
		
		if (direction == 'next' && this.frames.is_last())
		{
			this.carousel
				.css({'left' : css_left + 'px'})
				.append(this.frames.get_first());
		}
		else if (direction == 'prev' && this.frames.is_first())
		{
			this.carousel
				.css({'left' : css_left + 'px'})
				.prepend(this.frames.get_last());
		}
	}
	
	var sign	= direction == 'next' ? '-' : '+';
	
	this.scrollable = false;
	
	var _this = this;
	this.carousel.animate({'left': sign + '=' + this.frames.w}, this.timeout, function (){ _this.scrollable = true; } );
};

Carousel.prototype.is_scrollable = function (direction)
{
	if (!this.scrollable)				return false;
	if (this.frames.list_length <= 1)	return false;
	
	if (!this.circular)
	{
		if (direction == 'next' && this.frames.is_last())	return false;
		if (direction == 'prev' && this.frames.is_first())	return false;
	}
	
	return true;
};
/*** End Carousel Object ***/

/* END CAROUSEL*/



$(function(){
	myC = new Carousel('product');
	
	$('.next_title, #next_cur').bind('click', slide_to_next_item);
	$('.prev_title, #prev_cur').bind('click', slide_to_previous_item);

	function slide_to_next_item(){
		myC.scrolling('next');
	}
	function slide_to_previous_item(){
		myC.scrolling('prev');
	}
	/*
	function autoslide_to_next_item(){
		myC.scrolling('next');
		setTimeout(autoslide_to_next_item, 2000);
	}
	*/
});