var introTextHTML


function observeIntroText() {
	var introText = $$('.detaildescrip')[0];
	//introText = document.getElementById('description');
	introTextHTML = introText.innerHTML;
	var truncateLength = 530;
	
	$('introtext-text').insert({ bottom:  introTextHTML });
	
	if(introText.getHeight() >=180   ) {
		introText.innerHTML = introText.innerHTML.truncate(truncateLength);
		$('showmoretext').removeClassName('hidden');
		
	}
	
	while(introText.getHeight() >=180){
		truncateLength = truncateLength - 40;
		introText.innerHTML = introText.innerHTML.truncate(truncateLength);
	}
	
	
	$('showmoretext').observe('click', function(event) {
		$('introtext-cover').removeClassName('hidden');
		$('introtext-text').removeClassName('hidden');
		
	});
	
	$('showlesstext').observe('click', function(event) {
		$('introtext-cover').addClassName('hidden');
		$('introtext-text').addClassName('hidden');
		
	});
	
}






/*

	Simple script that adds rollover effect to the submit buttons on the
	search results page.

*/

var detailTabs;
var detailPanes;

var featureRolls;
var featureCaps;

function observeTabPanes() {
	
	
	//tabs[0] = Features
	//tabs[1] = Compatibility
	//tabs[2] = In The Box
	detailTabs  = $$('#details-tabs li');
	detailPanes = $$('#details-panes .pane');

	Event.observe(detailTabs[0], 'click', function(){ switchPane(detailTabs[0], detailPanes[0]) } );
	if ( typeof ( detailTabs[1] ) != "undefined" ){
		Event.observe(detailTabs[1], 'click', function(){ switchPane(detailTabs[1], detailPanes[1]) } );
	}
	if ( typeof ( detailTabs[2] ) != "undefined" ){
		Event.observe(detailTabs[2], 'click', function(){ switchPane(detailTabs[2], detailPanes[2]) } );
	}
	//Event.observe(detailTabs[3], 'click', function(){ switchPane(detailTabs[3], detailPanes[3]) } );

}

function switchPane(focusedTab, focusedPane) {
	
	detailTabs.without(focusedTab).invoke('removeClassName', 'on');
	focusedTab.addClassName('on');
	
	detailPanes.without(focusedPane).invoke('addClassName', 'hidden');
	focusedPane.removeClassName('hidden');
	
}


function observeProductFeatures() {
/*
<div id="new-roads"></div>
<div id="points-of-interest"></div>
<div id="countries-covered"></div>
*/

	featureRolls  = $$('#feature-rolls .roll');
	featureCaps = $$('#feature-rolls .cap');

	Event.observe(featureRolls[0], 'mouseover', function(){ switchCaption(featureRolls[0], featureCaps[0]) } );
	Event.observe(featureRolls[1], 'mouseover', function(){ switchCaption(featureRolls[1], featureCaps[1]) } );
	Event.observe(featureRolls[2], 'mouseover', function(){ switchCaption(featureRolls[2], featureCaps[2]) } );
	
	Event.observe(featureRolls[0], 'mouseout', function(){ offCaption(featureRolls[0], featureCaps[0]) } );
	Event.observe(featureRolls[1], 'mouseout', function(){ offCaption(featureRolls[1], featureCaps[1]) } );
	Event.observe(featureRolls[2], 'mouseout', function(){ offCaption(featureRolls[2], featureCaps[2]) } );


}

function switchCaption(focusedRoll, focusedCap) {
	focusedRoll.addClassName('on');
	focusedCap.removeClassName('hidden');
}

function offCaption(focusedRoll, focusedCap) {
	focusedRoll.removeClassName('on');
	focusedCap.addClassName('hidden');
}