var gSlides, gSlideIndex, gNextSlideIdx, gAnimating, gSlideShow;

YAHOO.util.Event.onDOMReady(init);

function init() {
	var div, href;
	
	// generate gallery array
	gSlideIndex = 0;
	gAnimating = false;
	// initialize event listeners
	YAHOO.util.Event.addListener('arrowRight', 'click', pushNextShot);
	YAHOO.util.Event.addListener('arrowLeft', 'click', pushPrevShot);
	var leftNav = document.getElementById('leftnav');
	var tabs = leftNav.getElementsByTagName('div');
	gSlides = new Array(tabs.length);
	gSlides[0] = document.getElementById('frame1').innerHTML;
	for (i = 0; i < tabs.length; i++) {
		div = tabs.item(i).getElementsByTagName('a').item(0);
		YAHOO.util.Event.addListener(div, 'click', fadeToSlide, i);
		if (i > 0) {
			// loading HTML of slides from remote file
			href = div.getAttribute('href');
			YAHOO.util.Connect.asyncRequest('GET', href, {
					success: function(o) {
						gSlides[o.argument] = o.responseText;
					},
					failure: function(o) {
					},
					argument: i
				}, null);
		}
	}
	seriesTabInit();
	// initialize gallery
	gSlideShow = new vsGallery();
	
}

function pushNextShot(e) {
	if (gAnimating)
		return;
	var cDiv = document.getElementById('frame1');
	var nDiv = document.getElementById('frame2');
	nDiv.style.position = 'absolute';
	nDiv.style.left = '775px';
	nDiv.style.top = '0px';
	nDiv.style.width = '775px'
	nDiv.style.height = '400px';
	var nextIdx = gSlideIndex + 1;
	if (nextIdx >= gSlides.length)
		nextIdx = 0;
	nDiv.innerHTML = gSlides[nextIdx];
	var keyDiv = document.getElementById('key');
	nDiv.style.display = "block";
	var anim1 = new YAHOO.util.Motion(cDiv, { points: { by: [-775, 0] } }, 0.5, YAHOO.util.Easing.easeOut);
	var anim2 = new YAHOO.util.Motion(nDiv, { points: { by: [-775, 0] } }, 0.5, YAHOO.util.Easing.easeOut);
	anim1.onComplete.subscribe(pushNextPost);
	anim1.animate();
	anim2.animate();
	hiliteTB(nextIdx, gSlideIndex);
	gAnimating = true;
}

function pushNextPost() {
	var div1 = document.getElementById('frame1');
	var div2 = document.getElementById('frame2');
	div2.id = 'frame1';
	div1.id = 'frame2';
	div1.style.display = "none";
	gSlideIndex++;
	if (gSlideIndex >= gSlides.length)
		gSlideIndex = 0;
	gAnimating = false;
}

function pushPrevShot(e) {
	if (gAnimating)
		return;
	var cDiv = document.getElementById('frame1');
	var nDiv = document.getElementById('frame2');
	nDiv.style.position = 'absolute';
	nDiv.style.left = '-775px';
	nDiv.style.top = '0px';
	nDiv.style.width = '775px'
	nDiv.style.height = '400px';
	var nextIdx = gSlideIndex - 1;
	if (nextIdx < 0)
		nextIdx = gSlides.length - 1;
	nDiv.innerHTML = gSlides[nextIdx];
	var keyDiv = document.getElementById('key');
	nDiv.style.display = "block";
	var anim1 = new YAHOO.util.Motion(cDiv, { points: { by: [775, 0] } }, 0.5, YAHOO.util.Easing.easeOut);
	var anim2 = new YAHOO.util.Motion(nDiv, { points: { by: [775, 0] } }, 0.5, YAHOO.util.Easing.easeOut);
	anim1.onComplete.subscribe(pushPrevPost);
	anim1.animate();
	anim2.animate();
	hiliteTB(nextIdx, gSlideIndex);
	gAnimating = true;
}

function pushPrevPost() {
	var div1 = document.getElementById('frame1');
	var div2 = document.getElementById('frame2');
	div2.id = 'frame1';
	div1.id = 'frame2';
	div1.style.display = "none";
	gSlideIndex--;
	if (gSlideIndex < 0)
		gSlideIndex = gSlides.length - 1;
	gAnimating = false;
}

function fadeToSlide(e, idx) {
	YAHOO.util.Event.stopEvent(e);
	if (gAnimating)
		return;
	var div1 = document.getElementById('frame1');
	var div2 = document.getElementById('frame2');
	div2.innerHTML = gSlides[idx];
	div2.style.position = 'absolute';
	div2.style.top = '0px';
	div2.style.left = '0px';
	div2.style.width = '100%';
	div2.style.height = '400px';
	div2.style.display = 'block';
	YAHOO.util.Dom.setStyle(div2, 'opacity', 0);
	var anim2 = new YAHOO.util.Anim('frame2', { opacity: { from: 0, to: 1 } }, 0.3, YAHOO.util.Easing.easeOut);
	var anim1 = new YAHOO.util.Anim('frame1', { opacity: { from: 1, to: 0 } }, 0.3, YAHOO.util.Easing.easeOut);
	anim1.onComplete.subscribe(fadeToPost);
	gNextSlideIdx = idx;
	hiliteTB(gNextSlideIdx, gSlideIndex);
	anim1.animate();
	anim2.animate();
	gAnimating = true;
}

function fadeToPost() {
	var div1 = document.getElementById('frame1');
	var div2 = document.getElementById('frame2');
	div2.id = 'frame1';
	div1.id = 'frame2';
	div1.style.display = "none";
	YAHOO.util.Dom.setStyle(div1, 'opacity', 1);
	gSlideIndex = gNextSlideIdx;
	gAnimating = false;
}

function hiliteTB(newIdx, oldIdx) {
	var cur = document.getElementById('tb' + oldIdx);
	cur.getElementsByTagName('a').item(0).className = '';
	cur = document.getElementById('tb' + newIdx);
	cur.getElementsByTagName('a').item(0).className = 'active';	
}

function showDesign() {
	if (arguments.length > 0)
		var first = arguments[0];
	else
		var first = 0;
	gSlideShow.setSlides([ '/vnb101/design_gal_iml.html', '/vnb101/images/design_gal_thin.jpg',
						   '/vnb101/images/design_gal_black.jpg', '/vnb101/images/design_gal_red.jpg',
						   '/vnb101/images/design_gal_gold.jpg', 
						   '/vnb101/design_gal_multitouch.html',
						   '/vnb101/design_gal_led.html',
						   '/vnb101/design_gal_input.html',
						   '/vnb101/design_gal_battery.html' ],
						 [ '/vnb101/images/design_gal_iml_tb.png', '/vnb101/images/design_gal_thin_tb.png',
						   '/vnb101/images/design_gal_black_tb.png', '/vnb101/images/design_gal_red_tb.png',
						   '/vnb101/images/design_gal_gold_tb.png',
						   '/vnb101/images/design_gal_multitouch_tb.png',
						   '/vnb101/images/design_gal_led_tb.png',
						   '/vnb101/images/design_gal_input_tb.png',
						   '/vnb101/images/design_gal_battery_tb.png' ],
						 [ 'IML surface that shines longer',  '25mm-thin',
						   'Black', 'Dark red', 'Gold',
						   'Smart and intuitive, Multi-touch follows your will',
						   'Bright LED panel for viewing enjoyment',
						   'Larger keyboard for serious typists',
						   'New lithium-polymer battery that lasts longer' ], first);
	gSlideShow.show();
}