/*
 * 
 * Depends:
 *	ui.core.js
 *  jquery.jsize.js
 */

( function($) {

	$.widget("ui.amecarosel", {

		_init : function() {

			var self = this, o = this.options;
			this.pos = 0;
			this.items_width = 0;
			this.element.addClass("ame-amecarosel");
			this.autoplay = o.autoplay;

			this.parent_left = this.element.offset().left;
			this.width = this.element.width();
			this.items = $("> div", this.element).remove();
			this.items_length = self.items.length;

			this.container = $('<div />').addClass("ame-amecarosel-container");
			this.container.offset = 0;
			this.element.append(this.container);
			
			this.items
					.each( function(i) {
						this.num = i;
						self.container.append($(this).addClass(
								"ame-amecarosel-item"));
						this.item_width = $(this).outerWidth()
								+ $(this).margin().left
								+ $(this).margin().right
								+ $(this).padding().left
								+ $(this).padding().right;
						this.extra = (self.width - this.item_width) / 2
						self.items_width += this.item_width;
						this.advplay = true;
						
						this.viewWithoutPageView = function() {
							self.pos = this.num;
							// Calculate offset (dynamic to the current position
							// during each click)
							var left = -self.parent_left
									+ $(this).offset().left;
							var item_offset = -left + $(this).margin().left
									+ $(this).padding().left + this.extra;

							if (this.num == self.items_length - 1) {
								self.container.offset = -(self.items_width
										- self.width + this.extra);
								item_offset = 0;
							} else if (this.num == 0) {
								self.container.offset = 0;
								item_offset = 0 + this.extra;
							}

							// Keep track of the offset and animate the motion
							self.container.offset += item_offset;
							self.container.animate( {
								marginLeft : self.container.offset + 'px'
							}, 300);
							
							if ($(this).is('.timer-adv') && this.advplay) {
								if (!self.autoplay) {
									$(this).sleep(7000, function() {
										self.nextAutoplay();
									});
								}
								this.advplay = false;
							}
							
							if (self.autoplay) {
								$(this).sleep(7000, function() {
									self.nextAutoplay();
								});
							} 

						}
						
						this.view = function() {
							this.viewWithoutPageView();
							self._trigger("page_view", this.pos);
						}

						$(self.items[this.num]).click( function(e) {
							this.autoplay = false;
							if (this.num != self.pos) {
								this.view();
								return false;
							} else
								return true;
						});
					});

			if (o.value > -1 && this.items.length > 0)
				this.items[o.value].view();
		},

		value : function(newValue) {
			if (arguments.length == 0)
				return this.pos;
			this.autoplay = false;
			$(this.items[this.pos]).stop();
			this.pos = newValue;
			if (this.pos < 0)
				this.pos = 0;
			if (this.pos > this.items.length - 1)
				this.pos = this.items.length - 1;
			this.items[this.pos].view();
			return this;
		},

		length : function() {
			return this.items.length;
		},

		next : function() {
			this.autoplay = false;
			$(this.items[this.pos]).stop();
			if (this.pos == (this.items.length - 1)) {
				this.pos = 0;
			} else {
				this.pos += 1;
			}
			this.items[this.pos].view();
		},

		nextAutoplay : function() {
			if (this.pos == (this.items.length - 1)) {
				this.pos = 0;
			} else {
				this.pos += 1;
			}
			this.items[this.pos].viewWithoutPageView();
		},

		previous : function() {
			this.autoplay = false;
			$(this.items[this.pos]).stop();
			if (this.pos > 0) {
				this.pos -= 1;
			} else {
				this.pos = this.items.length - 1;
			}
			this.items[this.pos].view();
		}

	});

	$.extend($.ui.amecarosel, {
		getter : "value length",
		defaults : {
			value : 0,
			autoplay : false
		}
	});

	jQuery.fn.sleep = function sleep(time, callback) {
		this.animate( {
			opacity : 1.0
		}, time, callback);
	}

})(jQuery);