$(document).ready(function($){
	setFrameImg2();
});

function setFrameImg2() {
	//init path
	var rightArrowImg = "/img_common/right.gif";
	var leftArrowImg = "/img_common/left.gif";
	var MAX = 100;

	$(".flameimg").each(function(i) {
		$('<a href="###" id="leftBtn"><img src="'+leftArrowImg+'" width="20" height="20" /></a><a href="###" id="rightBtn"><img src="'+rightArrowImg+'" width="20" height="20" /></a>').appendTo(this);
		
		//init variable number
		var $this_firstImg = $(this).find("li:first img");
		var $this_ul = $(this).find("ul");
		var $this_li = $(this).find("li");
		var $this_liFirst = $(this).find("li:first");
		var $this_leftBtn = $(this).find("#leftBtn");
		var $this_leftBtnImg = $(this).find("#leftBtn img");
		var $this_rightBtn = $(this).find("#rightBtn");
		var $this_rightBtnImg = $(this).find("#rightBtn img");
		
		var BOX_W = $this_firstImg.width();
		var BOX_H = $this_firstImg.height();
		var PAGE_SUM = $this_li.size();
		var INBOX_W = PAGE_SUM*BOX_W;
		var LEFTBTN_Y = (BOX_H-$this_leftBtnImg.height())/2+"px";
		var RIGHTBTN_Y = (BOX_H-$this_rightBtnImg.height())/2+"px";
		var imgArray = new Array();
		
		var pagenum=0;
		
		//init styles
		$(this).css({
			'overflow':'hidden',
			'width':BOX_W,
			'height':BOX_H,
			'position':'relative'
		});
		$this_li.css({
			'position':'absolute',
			'top':'0px',
			'left':BOX_W
		});
		$this_liFirst.css({
			'left':'0px'
		});
		$this_li.each(function(j){
			$(this).css({
				'z-index':MAX-j
			});
			imgArray.push($(this));
		});
		$this_leftBtn.css({
			'position':'absolute',
			'top':'0px',
			'left':'0px',
			'height':BOX_H,
			'width':BOX_W/2,
			'z-index':MAX+2
		});
		$this_rightBtn.css({
			'position':'absolute',
			'top':'0px',
			'left':BOX_W/2,
			'height':BOX_H,
			'width':BOX_W/2,
			'z-index':MAX+1
		});
		$this_leftBtnImg.css({
			'padding-top':LEFTBTN_Y,
			'padding-bottom':LEFTBTN_Y,
			'padding-right':BOX_W/2-$this_leftBtnImg.width(),
			'opacity':'0'
		});
		$this_rightBtnImg.css({
			'padding-top':RIGHTBTN_Y,
			'padding-bottom':RIGHTBTN_Y,
			'padding-left':BOX_W/2-$this_rightBtnImg.width(),
			'opacity':'0'
		});
		
		checkArrow(pagenum);
		
		
		
		
		
		
		
		
		
		
		
		//set arrowBtn
		$this_rightBtn.click(function(){
			imgArray[pagenum].css({
				'left':'0px',
				'z-index':MAX,
				'opacity':'1'
			});
			imgArray[pagenum+1].css({
				'left':'0px',
				'z-index':MAX-1,
				'opacity':'1'
			});
			moveImg(pagenum);
			pagenum++;
			checkArrow(pagenum);
			return false;
		});
		$this_leftBtn.click(function(){
			imgArray[pagenum].css({
				'left':'0px',
				'z-index':MAX,
				'opacity':'1'
			});
			imgArray[pagenum-1].css({
				'left':'0px',
				'z-index':MAX-1,
				'opacity':'1'
			});
			moveImg(pagenum);
			pagenum--;
			checkArrow(pagenum);
			return false;
		});
		$this_leftBtn.hover(
			function () {
				$(this).find("img").stop(true, false).animate({
					'opacity':'0.9'
				},200, "easeOutQuart");
			},
			function () {
				$(this).find("img").stop(true, false).animate({
					'opacity':'0'
				},200, "easeOutQuart");
			}
		);
		$this_rightBtn.hover(
			function () {
				$(this).find("img").stop(true, false).animate({
					'opacity':'0.9'
				},400, "easeOutQuart");
			},
			function () {
				$(this).find("img").stop(true, false).animate({
					'opacity':'0'
				},400, "easeOutQuart");
			}
		);
		
		
		function moveImg(num){
			imgArray[num].animate({
				'left':BOX_W,
				'opacity':'0'
			},500, "easeOutQuart");
		}
		function checkArrow(num){
			if(num == 0){
				$this_leftBtn.hide();
			}else{
				$this_leftBtn.show();
			}
			
			if(num == PAGE_SUM-1){
				$this_rightBtn.css({
					'display':'none'
				})
			}else{
				$this_rightBtn.css({
					'display':'block'
				})
			}
		}
		
		
		
	});
}