var Banner = function(element){	
this.element = element;
this.itemCount = 0;
this.itemWidth = 320;
this.index = 0;
this.init();	
this.timer = null
return this;
};
Banner.prototype = {
init : function() {
	var c = this;
	var e = c.element;
	var s = $('<div class="scroller" />');	
	var b = $('<div class="btn" />');
	var a ;
	e.find("img").each(function(i,e){
		$(e).removeAttr("title").removeAttr("alt").addClass("item").appendTo(s);
		$(e).attr("width", "320");
		a = $('<a/>').text("กด").click(function(){c.btnClick(i)}).appendTo(b);
	})
	e.html("").append(s).append(b);
	c.itemCount = e.find(".item").size();
	s.css("width",((c.itemCount+1)*c.itemWidth)+"px");
	
	c.setIndex(0);
	return this;
}
, setIndex : function(n) {
	var c = this;
	c.index = n;
	if(c.index<0){c.index=(c.itemCount-1);}
	if(c.index>(c.itemCount-1)){c.index=0;}
	c.update();
	c.timer = setTimeout(function(){c.next()},2000)
}
, update : function(){
	var c = this;
	var x = c.index * c.itemWidth * -1;
	c.element.find('.scroller').animate({"left":x+"px"});
	c.element.find('.btn a').each(function(i,e){
		if(i==c.index){
			$(e).addClass("current");
		} else {
			$(e).removeClass("current");
		}
	});
	
}
, next : function() {
	var c = this;
	c.setIndex(c.index+1);
}
, btnClick : function(i) {
	var c = this;
	clearInterval(c.timer )	;
	c.setIndex(i);
}
}
$(document).ready(function(){
var banner = new Banner($("#banner"));
});