var Panorama = function(args){
		var args = args || {};
		this.img = args.img || {counter : {left : 0 , right : 0 } , height : 600, width : 503, sum :100 , ini : 0};
		this.timer = args.timer || {id : null, interval : 700};
		this.ie7 = args.ie7 || (navigator.userAgent.indexOf("MSIE") !=-1 && navigator.userAgent.indexOf("Trident/") == -1) ?  true  : false ;

		if(this.ie7){return false;}

		this.img.ini = parseInt(Math.random() * (this.img.sum - 1));

		this.balloon = args.balloon || [];

		this.balloon[94] = {left : 121, top : 31 , id : 32,width : 160, height : 160};
		this.balloon[93] = {left : 154, top : 366 , id : 129,width : 160, height : 160};
		this.balloon[91] = {left : 55, top : 32 , id : 116,width : 160, height : 160};
		this.balloon[90] = {left : 29, top : 28 , id : 497,width : 160, height : 160};
		this.balloon[88] = {left : 147, top : 42 , id : 295,width : 160, height : 160};
		this.balloon[86] = {left : 206, top : 58 , id : 128,width : 160, height : 160};
		this.balloon[84] = {left : 107, top : 21 , id : 80,width : 160, height : 160};
		this.balloon[82] = {left : 120, top : 52 , id : 443,width : 160, height : 160};
		this.balloon[78] = {left : 440, top : 63 , id : 3,width : 160, height : 160};
		this.balloon[76] = {left : 200, top : 103 , id : 15,width : 160, height : 160};
		this.balloon[74] = {left : 150, top : 54 , id : 384,width : 160, height : 160};
		this.balloon[73] = {left : 32, top : 103 , id : 274,width : 160, height : 160};
		this.balloon[72] = {left : 127, top : 77 , id : 444,width : 160, height : 160};
		this.balloon[71] = {left : 348, top : 383 , id : 260,width : 160, height : 160};
		this.balloon[70] = {left : 326, top : 415 , id : 94,width : 160, height : 160};
		this.balloon[69] = {left : 173, top : 48 , id : 120,width : 160, height : 160};
		this.balloon[67] = {left : 461, top : 394 , id : 278,width : 160, height : 160};
		this.balloon[66] = {left : 48, top : 97 , id : 230,width : 160, height : 160};
		this.balloon[63] = {left : 294, top : 407 , id : 126,width : 160, height : 160};
		this.balloon[61] = {left : 365, top : 49 , id : 299,width : 160, height : 160};
		this.balloon[60] = {left : 17, top : 20 , id : 323,width : 160, height : 160};
		this.balloon[59] = {left : 114, top : 189 , id : 309,width : 160, height : 160};
		this.balloon[57] = {left : 217, top : 66 , id : 115,width : 160, height : 160};
		this.balloon[56] = {left : 84, top : 80 , id : 12,width : 160, height : 160};
		this.balloon[54] = {left : 98, top : 113 , id : 500,width : 160, height : 160};
		this.balloon[53] = {left : 150, top : 400 , id : 50,width : 160, height : 160};
		this.balloon[51] = {left : 21, top : 63 , id : 95,width : 160, height : 160};
		this.balloon[49] = {left : 280, top : 388 , id : 244,width : 160, height : 160};
		this.balloon[48] = {left : 60, top : 326 , id : 316,width : 160, height : 160};
		this.balloon[43] = {left : 242, top : 90 , id : 81,width : 160, height : 160};
		this.balloon[42] = {left : 241, top : 71 , id : 258,width : 160, height : 160};
		this.balloon[41] = {left : 69, top : 71 , id : 310,width : 160, height : 160};
		this.balloon[39] = {left : 66, top : 253 , id : 113,width : 160, height : 160};
		this.balloon[38] = {left : 90, top : 60 , id : 296,width : 160, height : 160};
		this.balloon[37] = {left : 83, top : 63 , id : 144,width : 160, height : 160};
		this.balloon[34] = {left : 206, top : 83 , id : 1,width : 160, height : 160};
		this.balloon[33] = {left : 216, top : 70 , id : 340,width : 160, height : 160};
		this.balloon[31] = {left : 386, top : 416 , id : 141,width : 160, height : 160};
		this.balloon[30] = {left : 70, top : 27 , id : 389,width : 160, height : 160};
		this.balloon[27] = {left : 448, top : 73 , id : 378,width : 160, height : 160};
		//this.balloon[25] = {left : 255, top : 268 , id : null,width : 160, height : 160};
		this.balloon[23] = {left : 264, top : 475 , id : 135,width : 160, height : 160};
		this.balloon[22] = {left : 180, top : 194 , id : 317,width : 160, height : 160};
		this.balloon[21] = {left : 120, top : 53 , id : 449,width : 160, height : 160};
		this.balloon[20] = {left : 186, top : 134 , id : 423,width : 160, height : 160};
		this.balloon[19] = {left : 292, top : 483 , id : 54,width : 160, height : 160};
		this.balloon[18] = {left : 550, top : 27 , id : 312,width : 160, height : 160};
		this.balloon[17] = {left : 282, top : 405 , id : 427,width : 160, height : 160};
		this.balloon[16] = {left : 229, top : 52 , id : 51,width : 160, height : 160};
		this.balloon[15] = {left : 7, top : 29 , id : 286,width : 160, height : 160};
		this.balloon[14] = {left : 0, top : 170 , id : 204,width : 160, height : 160};
		this.balloon[11] = {left : 440, top : 69 , id : 445,width : 160, height : 160};
		this.balloon[10] = {left : 225, top : 420 , id : 246,width : 160, height : 160};
		this.balloon[9] = {left : 15, top : 369 , id : 142,width : 148, height : 88};
		this.balloon[7] = {left : 173, top : 100 , id : 35,width : 160, height : 160};
		this.balloon[4] = {left : 94, top : 194 , id : 511,width : 160, height : 160};
		this.balloon[3] = {left : 101, top : 28 , id : 17,width : 160, height : 160};
		this.balloon[1] = {left : 13, top : 387 , id : 301,width : 160, height : 160};

		//screen,scroller生成
		$('body').prepend('<div id="panorama"><div class="panorama"></div><div id="switch" style="position:absolute;width:62px;height : 557px"><img src="http://www.earthdaymarket.com/panorama/images/himo.png" title="アースデイマーケットの全景がみられるパノラマです" alt="これがアースデイマーケットだ！" width="54" height="540" /><img class="fusa2" style="display:none;position:absolute;left:14px;top:265px;" src="http://www.earthdaymarket.com/panorama/images/himo2.png" alt="" width="58" height="60" /><img class="fusa1" style="position:absolute;left:20px;top:265px;" src="http://www.earthdaymarket.com/panorama/images/himo1.png" alt="" width="61" height="59" /></div></div>');
		$('#panorama').css({position: 'absolute',width:'82px'});
		$('#panorama .panorama').hide();
		$('#panorama .panorama').css({borderBottom : 'solid 3px #321C0F',background:'#3C2619 url(http://www.earthdaymarket.com/panorama/images/bg.png) repeat'});
		$('#panorama .panorama').append('<div class="header" style="height:70px;"><img src="http://www.earthdaymarket.com/panorama/images/title.png" alt="代々木公園けやき並木 2010/07/25 まもなく開店！" style="float:left;margin-top:5px;margin-left:15px;" width="342" height="64" /><img class="close" src="http://www.earthdaymarket.com/panorama/images/close.png" title="パノラマを閉じます" alt="閉じる" width="33" height="42" style="padding:10px 10px 10px 0;float:right;cursor:pointer;" /></div>');
		$('#panorama .panorama').append('<div class="screen"><div class="scroller"></div></div>');
		$('#panorama .panorama .screen').css({backgroundColor:'#000',height: this.img.height + 'px',position : 'relative' , overflow : 'hidden'});
		$('#panorama .panorama .scroller').css({height: this.img.height + 'px',position : 'relative'});

		$('#panorama .panorama').append('<div class="left2 navi"><img src="http://www.earthdaymarket.com/panorama/images/left.png" alt="&laquo;" width="53" height="59" style="padding :71px 0 70px" /></div><div class="left navi"><img src="http://www.earthdaymarket.com/panorama/images/left.png" alt="&laquo;" width="42" height="47" style="padding :77px 30px 76px 0" /></div><div class="right navi"><img src="http://www.earthdaymarket.com/panorama/images/right.png" alt="&raquo;" width="42" height="47" style="padding :77px 0px 76px 30px" /></div><div class="right2 navi"><img src="http://www.earthdaymarket.com/panorama/images/right.png" alt="&raquo;" width="53" height="59" style="padding :71px 0 70px" /></div>');

		$('#panorama .panorama .navi').css({'z-index' : 300 ,position : 'absolute', height : '200px',top :'270px'});
		$('#panorama .panorama .left2').css({left: '2px',cursor: 'w-resize'});
		$('#panorama .panorama .left').css({left : '45px',cursor: 'w-resize'});

		$('#panorama .panorama .right2').css({right: '2px',cursor: 'e-resize'});
		$('#panorama .panorama .right').css({right : '45px',cursor: 'e-resize'});
		$('#panorama .panorama .navi').hide();

		$('#panorama .panorama').append('<div class="footer" style="padding:5px;font-size:10px;text-align:right;color:white">Photo by Emi Maeda. Directed by Toshimasa Tanaka.</div>');

		$('#panorama #switch').css({paddingLeft:'20px',cursor: 'pointer'});

		setInterval(function(){
			$('#panorama #switch .fusa1').toggle(0,function(){$('#panorama #switch .fusa2').toggle(0).delay(200).toggle(0,function(){$('#panorama #switch .fusa1').toggle(0)});});
		},3000);


		var that = this;

		$('#panorama #switch').click(function(){
			$('#panorama').css({width:'100%'});
			$('#panorama .panorama').slideDown(3000,function(){
				$('#panorama .panorama .navi').show();
			});
			that.preLoad();
			$('#panorama .panorama .balloon').show();
			pageTracker._trackPageview("/panorama/open");
		});

		$('#panorama .panorama .close').click(function(){
			$('#panorama .panorama').slideUp(500,function(){$('#panorama').css({width:'82px'});});
			$('#panorama .panorama .navi').hide();
			clearInterval(that.timer.id);
			pageTracker._trackPageview("/panorama/close");
		});
			

		$('#panorama .panorama .right2').hover(
		function(){
  			$('#panorama .panorama .scroller').clearQueue().stop().animate({"left": "-=50000px"}, 75000,'linear');

		},
		function(){$('#panorama .panorama .scroller').clearQueue().stop();}
		);

		$('#panorama .panorama .left2').hover(
		function(){
  			$('#panorama .panorama .scroller').clearQueue().stop().animate({"left": "+=50000px"}, 75000,'linear');
		},
		function(){$('#panorama .panorama .scroller').clearQueue().stop();}
		);

		$('#panorama .panorama  .right').hover(
		function(){
  			$('#panorama .panorama .scroller').clearQueue().stop().animate({"left": "-=50000px"}, 270000,'linear');
		},
		function(){$('#panorama .panorama .scroller').clearQueue().stop();}
		);

		$('#panorama .panorama .left').hover(
		function(){
  			$('#panorama .panorama .scroller').clearQueue().stop().animate({"left": "+=50000px"}, 270000,'linear');
		},
		function(){$('#panorama .panorama .scroller').clearQueue().stop();}
		);


		$('#panorama .panorama .navi').hover(
		function(){
  			$('#panorama .panorama .balloon').hide();
		},
		function(){
			$('#panorama .panorama .balloon').show();
		}
		);

}

Panorama.prototype.pushRight = function(){
	var index = (this.img.counter.right + this.img.ini) % this.img.sum;
	var left = this.img.counter.right * this.img.width;

	this.appendImage(index,left);

	this.img.counter.right ++;
}

Panorama.prototype.pushLeft = function(){
	var index = (- this.img.counter.left + this.img.ini)  % this.img.sum - 1;
	index = (index < 0) ? this.img.sum + index : index ;
	
	var left = - ( 1 + this.img.counter.left) * this.img.width;
	
	this.appendImage(index,left);

	this.img.counter.left ++;
}

Panorama.prototype.appendImage = function(index,left){
	var name = 'http://www.earthdaymarket.com/panorama/images/panorama/' + index + '.jpg';
	$('#panorama .panorama .scroller').append('<img src="' + name + '" width ="' + this.img.width + '" height ="' + this.img.height +  '" style="z-index:100;position:absolute;top:0px;left:' + left + 'px" />');

	if(this.balloon[index]){//このインデックスにballoonが存在する
		left = left + this.balloon[index].left;
		var top = this.balloon[index].top;
		var height = this.balloon[index].height;
		var width = this.balloon[index].width;
		var url = 'http://www.earthdaymarket.com/' + this.balloon[index].id;
		var src = 'http://www.earthdaymarket.com/panorama/images/balloons/' + this.balloon[index].id + '.png';
// width="' + width + '" height="'  + height + '"
		$('#panorama .panorama .scroller').append('<a href="'+ url +'" style="display:none" class="balloon"><img src="'+ src + '" style="z-index:200;border:0;position:absolute;top:' + top + 'px;left:' + left + 'px" alt="' + index + '" /></a>');

	}

}

Panorama.prototype.preLoad = function(){
	var that = this;
	if(this.img.counter.right == 0){
		var ini = $('#panorama .panorama .screen').width() / this.img.width + 1;
		for(i = 1; i <= ini; i++){this.pushRight();}
	}
	this.timer.id = setInterval(function(){
		
		var current = $('#panorama .panorama .scroller').position().left;

		if(- current + $('#panorama .panorama .screen').width() > (that.img.counter.right - 1) * that.img.width){that.pushRight();}
		if($('#panorama .panorama .scroller').position().left > (that.img.counter.left - 1) * that.img.width){that.pushLeft();}
	},that.timer.interval);
}