/**
 * @author femto
 */
var OverLayWin = new Class({
	Implements: [Options, Events],
	options: {
		closeMode: 'both',//'button'or'both'
		bodyType: {
			'A': '・ジュエルディーバ<br />未定（0811発売）',
			'B': 'ジュエルローザエフ<br />ジュエル<br />ジュエルライトエフ<br />ジュエルライトソフト',
			'C': 'プチジュエルF<br />プチジュエル<br />プチソフトピュア<br />プチソフトナノ',
			'D': '未定（0911発売）'
		},
		bodyHeight: {
			'A': '162cm,157cm',
			'B': '155cm,150cm',
			'C': '140cm',
			'D': '150cm'
		},
		faceMaterial: {
			'A': ['シリコン','images/common/icon_s.gif'],
			'B': ['シリコン/ソフビから選択可能','images/common/icon_sv.gif']
		},
		winOffsetY: 50
	
	},
	
	initialize: function(overLayWin, maskLayer, imageFolder, options){
		this.setOptions(options);
		
		this.overLayWin = overLayWin;
		this.overLayWin.set('opacity', 0);
		this.maskLayer = maskLayer;
		this.maskLayer.set('opacity', 0);
		
		this.selectedCurrentThum = '';
		
		this.imageFolder = imageFolder;
		
		this.bodyType = this.options.bodyType;
		
		this.bodyHeight = this.options.bodyHeight;
		
		
		this.cordinateScroll = new Fx.Scroll($('cordinateThumnailsContainer'));
		
		
		/* event */
		
		$$('#prevItem a')[0].addEvent('click',function(e){
			e = new Event(e).stop();
			e.preventDefault();
			
			var tmp = 0;
			
			if(this.selectedCurrentThum.length<6){
				tmp = this.selectedCurrentThum.substr(4,1).toInt();
			}else{
				tmp = this.selectedCurrentThum.substr(4,2).toInt();
			}
			
			if (tmp > 1) {
						tmp = tmp - 1;
						
						this.setCordinateCaption(tmp);
						this.setCordinateImage($$('#thum' + tmp + ' img')[0]);
						document.fireEvent('switch_thumnail')
			}
		}.bind(this))

		$$('#nextItem a')[0].addEvent('click',function(e){
			e = new Event(e).stop();
			e.preventDefault();
			
			var tmp = 0;
			
			if(this.selectedCurrentThum.length<6){
				tmp = this.selectedCurrentThum.substr(4,1).toInt();
			}else{
				tmp = this.selectedCurrentThum.substr(4,2).toInt();
			}
			
			tmp = tmp + 1;
			
			if ($$('#thum' + tmp + ' img')[0]) {
						this.setCordinateCaption(tmp);
						this.setCordinateImage($$('#thum' + tmp + ' img')[0]);
						document.fireEvent('switch_thumnail');
			}
		}.bind(this))
		
		
		
		$('cordinateThumnailsContainer').addEvent('scroll',function(e){
			
			this.setStateCordinateThumnailListScroller();

		}.bind(this))
		
		
		$$('#left-scroll a')[0].addEvent('click', function(e){
				e = new Event(e).stop();
			e.preventDefault();
			this.cordinateScroll.start($('cordinateThumnailsContainer').getScroll().x - 550);
		}.bind(this))
		
		$$('#right-scroll a')[0].addEvent('click', function(e){
				e = new Event(e).stop();
			e.preventDefault();
			this.cordinateScroll.start($('cordinateThumnailsContainer').getScroll().x + 550);
		}.bind(this))
		
		
		
		$$('.closeButton a').addEvent('click', function(e){
			
			e = new Event(e).stop();
			
			this.closeOverLayWin()
		}.bind(this));
		
		if(this.options.closeMode == 'both'){
			$('overlayWinContainer').addEvent('click', function(e){
			e = new Event(e).stop();
			this.closeOverLayWin()
		}.bind(this));
		$('detailBeziel').addEvent('click', function(e){
			e.stopPropagation();
		})
		$('cordinate-list').addEvent('click', function(e){
			e.stopPropagation();
		})
			$$('div.mask')[0].addEvent('click', function(e){
			e = new Event(e).stop();
			this.closeOverLayWin()
		}.bind(this));
		}
		
		$$('.close_shutter').addEvent('click', function(e){
				e = new Event(e).stop();
			e.preventDefault();
			if(this.selectedCurrentThum) $(this.selectedCurrentThum).removeClass('selected');
			$('cordinateBeziel').tween('top', '-463px');
			document.fireEvent('close_shutter');
		}.bind(this))
		
		
	},
	overAllBodyMaskLayer: function(){
		var dim = document.getScrollSize();
		this.maskLayer.setStyle('width', dim.x).setStyle('height', dim.y);
		return dim;
	},
	setStateMaskLayer: function(state){//true:appear,false:hide
		if (state) {
				this.overAllBodyMaskLayer();
			window.addEvent('resize', function(){
						this.overAllBodyMaskLayer();
			}
			
.bind(this));
			this.maskLayer.set('opacity', 0.7).removeClass('hidden');
		}
		else {
				this.maskLayer.set('opacity', 0).addClass('hidden');
			window.removeEvent('resize');
			this.maskLayer.setStyle('height','100px');
		}
	},
	setStateOverLayWin: function(state){
		if (state) {
				this.overLayWin.set('opacity', 1).removeClass('hidden');
			this.overLayWin.setStyle('top', document.getScroll().y + this.options.winOffsetY + 'px');
		}
		else {
				this.overLayWin.set('opacity', 0).addClass('hidden');
				this.overLayWin.setStyle('top','0px');
		}
	},
	
	
	appearOverLayWin: function(dollsInfoArray){
		this.overLayWin.setStyle('display','block');
		this.maskLayer.setStyle('display','block');
		this.currentDollInfo = dollsInfoArray;
		
		if(dollsInfoArray[0])
		var detailImagePass = 'images/' + dollsInfoArray[0].toLowerCase() + '/' + dollsInfoArray[0].toLowerCase() + '_face.jpg';
		
		
		this.setDetailImage(detailImagePass,dollsInfoArray[1]);
		
		if (dollsInfoArray[1].test('[あ-ん,ア-ン]')) {
				$('head-name').set('text', dollsInfoArray[1]);
		}else{
				$('head-name').set('html', dollsInfoArray[1] + '<span>（' + dollsInfoArray[2] + '）</span>');
		}
		
		$('compatible-body').set('html', '<dt>この頭部に対応するボディ</dt><dd>' + this.bodyType[dollsInfoArray[3]] + '</dd>');
		$('body-height').set('html', '<dt>ボディのサイズ</dt><dd>' + this.bodyHeight[dollsInfoArray[3]] + '</dd>');
		$('material-head').set('html', '<dt>頭部の素材</dt><dd>' + this.options.faceMaterial[dollsInfoArray[5]][0] + '</dd><dd class=\"materialIcon\"><img src=\"' + this.options.faceMaterial[dollsInfoArray[5]][1] + '\" alt=\"' + this.options.faceMaterial[dollsInfoArray[5]][0] + '\" /></dd>');
		
		
		
		this.setStateOverLayWin(true);
		this.setStateMaskLayer(true);
		this.setCordinateThumnails(dollsInfoArray);
		
		this.cordinateScroll.set(0);
		
		this.setStateCordinateThumnailListScroller();
		
		document.fireEvent('select_face',dollsInfoArray[0]);
		
		/*document.addEvent('scroll', function(e){
				this.overAllBodyMaskLayer();
		}.bind(this));*/

	},
	setDetailImage: function(filePass,faceName){
		
		var imageEl = new Element('img',{'src':filePass,'id':'detailImage','alt':faceName});
		imageEl.inject($('detailImageBox'));
		
	},
	setCaption: function(captionText){
		$$('.caption')[0].empty();
		$$('.caption')[0].set('html', captionText[1] + captionText[2] + '<br />対応ボディ:' + captionText[3] + '<br />頭部素材:' + captionText[5]);
	},
	
	
	setCordinateThumnails: function(dollsInfoArray){
		var cordinateThumsPass = [];
		
		this.callback = $clear(this.callback);
		this.callback = null;
		
		for (i = 0; i < dollsInfoArray[6]; i++) {//サムネイルの数を取得
				if (i < 9) 
				cordinateThumsPass[i] = this.imageFolder + dollsInfoArray[0].toLowerCase() + '/' + dollsInfoArray[0].toLowerCase() + '_0' + (i + 1) + '_s.jpg'
			else 
				cordinateThumsPass[i] = this.imageFolder + dollsInfoArray[0].toLowerCase() + '/' + dollsInfoArray[0].toLowerCase() + '_' + (i + 1) + '_s.jpg'
		}
		
		$('cordinateThumnail').getChildren().destroy();
		$('cordinateThumnail').empty();
		
		if (cordinateThumsPass.length < 11) {
				$('cordinateThumnail').setStyle('width', '495px');
		}
		else {
				$('cordinateThumnail').setStyle('width', Math.round(cordinateThumsPass.length) * 55 + 'px');
		}
		
		var i = 0;
		
		this.callback = function(){
			if ($('detailImage')) {
				if ($('detailImage').get('alt') == dollsInfoArray[1]) {
					var cordinateAnchor = new Element('a', {
						'id': 'thum' + (i + 1)
					}).inject($('cordinateThumnail'));
					
					var cordinateThum = new Element('img', {
						'src': cordinateThumsPass[i],
						'height': 50,
						'width': 50,
						'alt': '詳細を見る'
					}).inject(cordinateAnchor);
					
					var tmp = i;
					
					cordinateAnchor.addEvent('click', function(e){
						e = new Event(e).stop();
						e.preventDefault();
						
						
						$('cordinateBeziel').tween('top', '0px');
						
						this.setCordinateCaption(tmp + 1);
						this.setCordinateImage(cordinateThum);
						
					}
.bind(this))
					
					i++;
					if (cordinateThumsPass[i]) 
						this.callback.delay(10, this);
				}
			}
		}
		
		this.callback.delay(1,this);
		
		/*cordinateThumsPass.each(function(item, index){
				var cordinateAnchor = new Element('a', {
				'id': 'thum' + (index + 1)
			}).inject($('cordinateThumnail'));
			var cordinateThum = new Element('img', {
				'src': item,
				'height': 50,
				'width': 50,
				'alt': '詳細を見る'
			}).inject(cordinateAnchor);
			
			
			cordinateAnchor.addEvent('click', function(e){
				e = new Event(e).stop();
				e.preventDefault();
							
				$('cordinateBeziel').tween('top', '0px');
				
				this.setCordinateCaption(index + 1);
				this.setCordinateImage(cordinateThum);
				
			}.bind(this))
		}.bind(this))*/
	},
	
	setCordinateCaption: function(index){
		var tmp = this.currentDollInfo[6 + index];
				if (tmp) {
					
					$$('#cordinate-specification .caption')[0].set('html', tmp);

				}else{
					$$('#cordinate-specification .caption')[0].set('html', '情報はありません');
				}

	},
	
	setCordinateImage:function(clickEl){
		$('cordinateImageBox').getChildren().destroy();
		
		$('cordinateImageBox').empty();
		
		
		if($(this.selectedCurrentThum)) $(this.selectedCurrentThum).removeClass('selected');
				
		clickEl.getParent().set('class','selected');
				
		this.selectedCurrentThum = clickEl.getParent().get('id');
		
		var imageAnchor = new Element('a',{'href':clickEl.get('src').replace('_s', '_l'),'target':'large_image'});
		imageAnchor.addEvent('click',function(e){
			document.fireEvent('select_largeimage');
		})
		imageAnchor.setStyle('visibility','hidden');
			
		var assetEl = new Asset.images(clickEl.get('src').replace('_s', '_m'),{onComplete:function(){
			var direction = assetEl.getSize()[0].x > assetEl.getSize()[0].y;
			
			if (direction) {
						$('cordinateImageBox').addClass('horizontal');
			}
			else {
						$('cordinateImageBox').removeClass('horizontal');
			}
			imageAnchor.setStyle('visibility','visible');
			
			var guideSpan = new Element('span').set('text','+画像クリックで拡大').inject(imageAnchor);
		}})
		
		assetEl.setStyle('display','block').inject(imageAnchor);
		
		
		imageAnchor.inject($('cordinateImageBox'));
		
		document.fireEvent('select_cordinate',this.selectedCurrentThum);
		
	},
	
	
	setStateCordinateThumnailListScroller: function(){
		if ($('cordinateThumnailsContainer').getScroll().x == 0)
						$$('#left-scroll a')[0].setStyles({
							'background-position': 'right 0',
							'cursor': 'default'
						});
			else
						$$('#left-scroll a')[0].setStyles({
							'background-position': 'left 0',
							'cursor': 'pointer'
						});
						
			if ($('cordinateThumnailsContainer').getScroll().x == ($('cordinateThumnailsContainer').getScrollSize().x - $('cordinateThumnailsContainer').getStyle('width').toInt()))
						$$('#right-scroll a')[0].setStyles({
							'background-position': 'right 0',
							'cursor': 'default'
						});
			else
						$$('#right-scroll a')[0].setStyles({
							'background-position': 'left 0',
							'cursor': 'pointer'
						});
	},
	
	
	closeOverLayWin: function(){
			//this.callback = $clear(this.callback);
			this.setStateOverLayWin(false);
			this.setStateMaskLayer(false);
			location.hash = '#list';
			$('cordinateBeziel').setStyle('top', '-463px');
			$$('#cordinateImageBox img')[0].set('src', '');
			$('detailImage').destroy();
			//document.removeEvent('scroll');
			document.fireEvent('close_popup');
	}
	
})