var globalThumbTotalPage = 0;
var gThumbPage = 0;
window.addEvent('domready', function() {
	
	setHighlightSection();
	if ( $('bike-image-container') ) {
		setBikeOverview();
	}
	setTestReport();
	setAwards();
});


function setHighlightSection() {
	var boxes = $$('div[id=hl-box]');
	
	for (var i=0; i<boxes.length; i++) {
		var box = $(boxes[i]);
		box.addEvent('mouseover', function() {
			$desc = this.getChildren()[1];
			$desc.setStyle('display','block');
		});
		box.addEvent('mouseout', function() {
			$desc = this.getChildren()[1];
			$desc.setStyle('display','none');
		});
	}	
}

function setBikeOverview() {
	var tag = document.createElement('script');
	tag.src = "http://www.youtube.com/player_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		
		
	var videoTotalWidth = 0;
	var videoPage = 1;
	var container = $('banner-video-set');
	var clickVideo = function(div, i, rel) {
		div.addEvent('click', function() {
			openVideo(rel);
		});
		
	}
	var openVideo = function(key) {
		
		var html = '<object width="980" height="500" id="flashfirebug0" name="flashfirebug0">';
		html += '<param value="http://www.youtube.com/v/' + key + '&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;autoplay=1&amp;autohide=1" name="movie">';
		html += '<param value="true" name="allowFullScreen">';
		html += '<param value="always" name="allowscriptaccess">';
		html += '<param value="transparent" name="wmode">';
		html += '<embed width="980" height="500" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/' + key + '&amp;hl=en_US&amp;fs=1&amp;rel=0&amp;autoplay=1&amp;autohide=1" id="flashfirebug0" name="flashfirebug0">';
		html += '</object>';
		$('video-big-container').set('html', html);
		$('video-big-container').setStyle('display','block');
		$('banner-view').setStyle('display','none');
		var fx = new Fx.Tween($('video-big-container'), {
			duration: 500,
			property: 'opacity'
		});
		fx.start(0, 100);
		
		/*
		var player;
		var onYouTubePlayerAPIReady = function () {
			player = new YT.Player('video-big-container', {
				height: '500',
				width: '980',
				videoId: key,
				events: {
					'onReady': onPlayerReady
				
				}
			});
		}
		
		var onPlayerReady = function (event) {
			event.target.setPlaybackQuality("hd720");
		}
		*/
	}
	if (container != null) {
		for (var i=0; i<container.getChildren().length; i++) {
			var tmp = container.getChildren()[i];
			clickVideo(tmp, i, tmp.get('rel'));
			videoTotalWidth += tmp.getSize().x + 5;
		}
		container.setStyle('width', videoTotalWidth);
	}
	
	var thumbPage = 1;
	var thumbPageWidth = $('banner-thumb-container').getSize().x;
	var bikeThumbTotalWidth = 0;
	var thumbContainer = $('banner-thumb-set');
	var thumbBoxes = thumbContainer.getChildren();
	var thumbCount = 0;
	var bigBannerWidth = 980;
	var thumbImageWidth = 98;
	var currentBanner = null;
	var bikeContainer = $('bike-image-container');
	var currentThumb =  thumbBoxes[0].getChildren()[0];
	var prevBanner =  bikeContainer.getChildren()[0];
	var tmp = bikeContainer.getChildren()[0];
	tmp.setStyle('left', 0);
	
	
	var clearVideo = function() {
		$('video-big-container').setStyles({'display':'none', 'opacity':'0'});
		$('video-big-container').set('html', '');
		$('banner-view').setStyle('display','block');
	}
		
	var clickThumb = function(div, pos) {
		$(div).addEvent('click', function() {
			clearVideo();
			if (currentThumb == $(this)) return;
			currentThumb = $(this);
			currentBanner =  bikeContainer.getChildren()[pos];
			var startnum = bigBannerWidth;
			var endnum = 0;
		
			var fx = new Fx.Tween(currentBanner, {
				duration: 500,
				property: 'left'
			});
			fx.addEvent('complete', function() {
				prevBanner = currentBanner;
			});
			fx.start(startnum, endnum);
			
			if (prevBanner == null) {
				prevBanner = bikeContainer.getChildren()[0];
			}
			var startnum = 0;
			var endnum = -bigBannerWidth;
			var fx = new Fx.Tween(prevBanner, {
				duration: 500,
				property: 'left'
			});
			fx.start(startnum, endnum);
		});
	}
	
	var thumbCount = 0;
	
	for (var i=0; i<thumbBoxes.length; i++) {
		var subset = thumbBoxes[i].getChildren();
		for (var j=0; j<subset.length; j++) {
			var div = subset[j];
			clickThumb(div, thumbCount);
			thumbCount += 1;
		}
	}
	bikeThumbTotalWidth = (thumbImageWidth * thumbCount) + (thumbCount * 5);
	thumbContainer.setStyle('width', bikeThumbTotalWidth);
	var thumbTotalPage = Math.ceil(bikeThumbTotalWidth / thumbPageWidth);
	globalThumbTotalPage = thumbTotalPage;
	
	var thumbLeftButton = $('btn-gl-left');
	var thumbRightButton = $('btn-gl-right');
	if (thumbPage == 1) $(thumbLeftButton).setStyle('visibility', 'hidden');
	if (thumbPage == thumbTotalPage) $(thumbRightButton).setStyle('visibility', 'hidden');

	$(thumbLeftButton).addEvent('click', function() {
		$(thumbRightButton).setStyle('visibility', 'visible');
		$(thumbLeftButton).setStyle('visibility', 'visible');
		thumbPage -= 1;
		if (thumbPage <= 1) {
			thumbPage = 1;
			$(this).setStyle('visibility', 'hidden');
		}
		gThumbPage = thumbPage;
		var startnum = thumbContainer.getStyle('margin-left');
		var endnum = -((thumbPage-1) * thumbPageWidth);
		tween(thumbContainer, startnum, endnum);
	});
	$(thumbRightButton).addEvent('click', function() {
		thumbPage += 1;
		$(thumbRightButton).setStyle('visibility', 'visible');
		$(thumbLeftButton).setStyle('visibility', 'visible');
		if (thumbPage >= thumbTotalPage) {
			$(this).setStyle('visibility', 'hidden');
			thumbPage = thumbTotalPage;
		}
		gThumbPage = thumbPage;
		var startnum = thumbContainer.getStyle('margin-left');
		var endnum = -((thumbPage-1) * thumbPageWidth);
		tween(thumbContainer, startnum, endnum);
	});
	
	//video thumb
	var videoContainer = $('banner-video-set');
	var videoLeftButton = $('btn-vo-left');
	var videoRightButton = $('btn-vo-right');
	var videoPageWidth = 176;
	var videoPage = 1;
	
	if (videoLeftButton != null && videoRightButton != null) {
		var videoTotalPage = Math.ceil(videoTotalWidth / videoPageWidth);
		if (videoPage == 1) $(videoLeftButton).setStyle('visibility', 'hidden');
		if (videoPage == videoTotalPage) $(videoRightButton).setStyle('visibility', 'hidden');
	
		$(videoLeftButton).addEvent('click', function() {
			$(videoRightButton).setStyle('visibility', 'visible');
			$(videoLeftButton).setStyle('visibility', 'visible');
			videoPage -= 1;
			if (videoPage <= 1) {
				videoPage = 1;
				$(this).setStyle('visibility', 'hidden');
			}
			var startnum = videoContainer.getStyle('margin-left');
			var endnum = -((videoPage-1) * videoPageWidth);
			tween(videoContainer, startnum, endnum);
		});
		$(videoRightButton).addEvent('click', function() {
			videoPage += 1;
			$(videoRightButton).setStyle('visibility', 'visible');
			$(videoLeftButton).setStyle('visibility', 'visible');
			if (videoPage >= videoTotalPage) {
				$(this).setStyle('visibility', 'hidden');
				videoPage = videoTotalPage;
			}
			var startnum = videoContainer.getStyle('margin-left');
			var endnum = -((videoPage-1) * videoPageWidth);
			tween(videoContainer, startnum, endnum);
		});
	}
}

function tween(div, startnum, endnum) {
	var fx = new Fx.Tween(div, {
		duration: 500,
		property: 'margin-left'
	});	
	fx.start(startnum, endnum);
}

function setTestReport() {
	if ($('tr-container') != null) {
		var totalWidth = 0;
		var page = 1;
		var pageWidth = $('tr-container').getSize().x;
		var container = $('tr-items');
		for (var i=0; i<container.getChildren().length; i++) {
			var tmp = container.getChildren()[i];
			totalWidth += tmp.getSize().x + 10;
		}
		container.setStyle('width', totalWidth);
		var totalPage = Math.ceil(totalWidth / pageWidth);
		var leftButton = $('btn-tr-left');
		var rightButton = $('btn-tr-right');
		if (totalPage > 1) $(rightButton).setStyle('visibility', 'visible');
		
		$(leftButton).addEvent('click', function() {
			$(rightButton).setStyle('visibility', 'visible');
			$(leftButton).setStyle('visibility', 'visible');
			page -= 1;
			if (page <= 1) {
				page = 1;
				$(this).setStyle('visibility', 'hidden');
			}
			var startnum = container.getStyle('margin-left');
			var endnum = -((page-1) * pageWidth);
			tween(startnum, endnum);
		});
		$(rightButton).addEvent('click', function() {
			page += 1;
			$(rightButton).setStyle('visibility', 'visible');
			$(leftButton).setStyle('visibility', 'visible');
			if (page >= totalPage) {
				$(this).setStyle('visibility', 'hidden');
				page = totalPage;
			}
			var startnum = container.getStyle('margin-left');
			var endnum = -((page-1) * pageWidth);
			tween(startnum, endnum);
			//container.setStyle('margin-left', marginLeft);
		});
	}
	
	var tween = function(startnum, endnum) {
		var fx = new Fx.Tween(container, {
			duration: 500,
			property: 'margin-left'
		});	
		fx.start(startnum, endnum);
	}
}

function goToBanner(bannerId) {
	var thumbContainer = $('banner-thumb-set');
	var thumbBoxes = thumbContainer.getChildren();
	var thumbLeftButton = $('btn-gl-left');
	var thumbRightButton = $('btn-gl-right');
	var thumbPage = 1;
	var thumbPageWidth = $('banner-thumb-container').getSize().x;
	
	for (var i=0; i<thumbBoxes.length; i++) {
		var liList = thumbBoxes[i].getChildren();
		
		for (var j=0; j<liList.length; j++) {
			var rel = $(liList[j]).getProperty("rel");
			
			if (parseInt(rel) == parseInt(bannerId)) {
				$(liList[j]).fireEvent("click");
				thumbPage = i+1;
			}
		}
	}
	var startnum = thumbContainer.getStyle('margin-left');
	var endnum = -((thumbPage-1) * thumbPageWidth);
	tween(thumbContainer, startnum, endnum);
	
	$(thumbRightButton).setStyle('visibility', 'visible');
	$(thumbLeftButton).setStyle('visibility', 'visible');
	
	if (thumbPage >= globalThumbTotalPage) {
		$(thumbRightButton).setStyle('visibility', 'hidden');
	}
	if (thumbPage <= 1) {
		$(thumbLeftButton).setStyle('visibility', 'hidden');
	}
	gThumbPage = thumbPage;
	/*
	$(thumbLeftButton).addEvent('click', function() {
		$(thumbRightButton).setStyle('visibility', 'visible');
		$(thumbLeftButton).setStyle('visibility', 'visible');
		thumbPage -= 1;
		if (thumbPage <= 1) {
			thumbPage = 1;
			$(this).setStyle('visibility', 'hidden');
		}
		var startnum = thumbContainer.getStyle('margin-left');
		var endnum = -((thumbPage-1) * thumbPageWidth);
		tween(thumbContainer, startnum, endnum);
	});
	
	$(thumbRightButton).addEvent('click', function() {
		thumbPage += 1;
		$(thumbRightButton).setStyle('visibility', 'visible');
		$(thumbLeftButton).setStyle('visibility', 'visible');
		if (thumbPage >= globalThumbTotalPage) {
			$(this).setStyle('visibility', 'hidden');
			thumbPage = globalThumbTotalPage;
		}
		var startnum = thumbContainer.getStyle('margin-left');
		var endnum = -((thumbPage-1) * thumbPageWidth);
		tween(thumbContainer, startnum, endnum);
	});
	*/
}

function setAwards() {
	if ($('awards-container') != null) {
		var itemWidth = 275;
		var totalWidth = 0;
		var page = 1;
		var pageWidth = 885;
		var container = $('awards-items');
		for (var i=0; i<container.getChildren().length; i++) {
			var tmp = container.getChildren()[i];
			for (var j=0; j<$(tmp).getChildren().length; j++) {
				totalWidth += itemWidth + 20;
			}
		}
		container.setStyle('width', totalWidth);
		var totalPage = Math.ceil(totalWidth / pageWidth);
		var leftButton = $('btn-awards-left');
		var rightButton = $('btn-awards-right');
		if (totalPage > 1) $(rightButton).setStyle('visibility', 'visible');
		
		$(leftButton).addEvent('click', function() {
			$(rightButton).setStyle('visibility', 'visible');
			$(leftButton).setStyle('visibility', 'visible');
			page -= 1;
			if (page <= 1) {
				page = 1;
				$(this).setStyle('visibility', 'hidden');
			}
			var startnum = container.getStyle('margin-left');
			var endnum = -((page-1) * pageWidth);
			tween(startnum, endnum);
		});
		$(rightButton).addEvent('click', function() {
			page += 1;
			$(rightButton).setStyle('visibility', 'visible');
			$(leftButton).setStyle('visibility', 'visible');
			if (page >= totalPage) {
				$(this).setStyle('visibility', 'hidden');
				page = totalPage;
			}
			var startnum = container.getStyle('margin-left');
			var endnum = -((page-1) * pageWidth);
			tween(startnum, endnum);
			//container.setStyle('margin-left', marginLeft);
		});
	}
	
	var tween = function(startnum, endnum) {
		var fx = new Fx.Tween(container, {
			duration: 500,
			property: 'margin-left'
		});	
		fx.start(startnum, endnum);
	}
}
