var gSpecs = [
	{	model: "VPC100",
		features: [ "The 18.5” viewable 16:9 widescreen",
					"Built-in Intel® Atom® 1.6GHz processor",
                    "160GB hard disk  ",
					"Built-in 1.3 megapixel webcam and microphone",
					"2x3-watt stereo speakers",
					"Built-in 802.11b/g WiFi network",
					"Super-Multi DVD/CD drive",
					"As slim as 3.5cm! ", 
                    "Built-in 4-in-1 card reader"],
		title: "title_specs.gif",
		subnav_div: "sub1",
		subnav: "spec_10.gif",
		subnav_hi: "spec_10.gif",
		specsLink: "../features.php?n=vpc100",
		shots: [ 'product_left.jpg', 'product_front.jpg', 'product_right.jpg',
				 'product_back.jpg', 'product_side.jpg' ],
		icons: [ 'icon_left.jpg', 'icon_front.jpg', 'icon_right.jpg',
				 'icon_back.jpg', 'icon_side.jpg' ],
		size: 19
	}
];

var gCurModelIndex;
var gAnimeIn, gAnimeOut;
var gSpecsHost = 'http://www.viewsonic.com.tw';

YAHOO.util.Event.onDOMReady(init);


function switchModel(index) {
	gCurModelIndex = index;
	document.getElementById('modelName').src = "images/" + gSpecs[index].title;
	document.getElementById('modelName').alt = gSpecs[index].model;
	var features = '';
	for (var i = 0; i < gSpecs[index].features.length; i++) {
		features += '<li>' + gSpecs[index].features[i] + '</li>';
	}
	document.getElementById('features').innerHTML = features;
	showShot(0);
	buildSubNav();
	// update icons
	var div;
	for (i = 0; i < gSpecs[index].icons.length; i++) {
		div = document.getElementById('icon' + i);
		div.src = 'images/' + gSpecs[index].icons[i];
	}
	if (gSpecs[index].specsLink.length == 0)
		var sbtn = '<img src="images/more.jpg" width="97" height="19" hspace="10">';
	else
		var sbtn = '<a href="' + gSpecs[index].specsLink + '">' +
				   '<img src="images/more.jpg" width="97" height="19" hspace="10" border="0"></a>';
	document.getElementById('specsBtn').innerHTML = sbtn;
	window.location.href = '#' + gSpecs[index].model;
}

function buildSubNav() {
	var div;
	for (var i = 0; i < gSpecs.length; i++) {
		div = document.getElementById(gSpecs[i].subnav_div);
		if (gCurModelIndex == i) {
			div.src = 'images/' + gSpecs[i].subnav_hi;
			div.oSrc = 'images/' + gSpecs[i].subnav_hi;
		} else {
			div.src = 'images/' + gSpecs[i].subnav;
			div.oSrc = 'images/' + gSpecs[i].subnav;
		}
	}
}

function showSpecs() {
	window.open(gSpecsHost + gSpecs[gCurModelIndex].specsLink);
}

function showShot(shotNum) {
	var curSpecs = gSpecs[gCurModelIndex];
	var imageName = curSpecs.shots[shotNum];
	document.getElementById('bigShotNext').src = 'images/' + imageName;
	YAHOO.util.Event.addListener('bigShotNext', 'load', function() {
		gAnimeOut.animate();
		gAnimeIn.animate();
	});
}

function replaceComplete() {
	var cur = document.getElementById('bigShot');
	var next = document.getElementById('bigShotNext');
	cur.src = next.src;
	setOpacity(cur, 100);
	setOpacity(next, 0);
}

function setOpacity(div, op) {
	/* if (op > 0)
		div.style.display = "block";
	else
		div.style.display = "none"; */
	div.style.opacity = (op / 100);
	div.style.MozOpacity = (op / 100);
	div.style.KhtmlOpacity = (op / 100);
	div.style.filter = "alpha(opacity=" + op + ")";
}

function init() {
	gAnimeOut = new YAHOO.util.Anim('bigShot', { opacity: { from: 1, to: 0 } }, 0.3, YAHOO.util.Easing.easeOut);
	gAnimeIn = new YAHOO.util.Anim('bigShotNext', { opacity: { from: 0, to: 1 } }, 0.3, YAHOO.util.Easing.easeOut);
	gAnimeIn.onComplete.subscribe(replaceComplete);
	// check hash portion of URL after loading 
	var theHash = window.location.hash;
	if (theHash.length > 1) {
		// get the model name after #
		model = theHash.substr(1).toUpperCase();
		var index = 0;
		for (var i = 0; i < gSpecs.length; i++) {
			if (gSpecs[i].model.toUpperCase() == model) {
				index = i;
				break;
			}
		}
		switchModel(index);
	} else
		switchModel(0);
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}