var swidth=750;
var sheight=600;
var min_vert_pos = -598;
var max_vert_pos = 10;
//var sheight=82;
var oldselected = -1;
var lastSel = '';
//slider's speed;
var sspeed=8;
var move = 0; 

var direction = 1;

//var imagef='';
//var imagev='';
var sliderDiv;
var sliderVertDiv;

//var leftimage=new Array();
//leftimage[0]='<a id="img0" href="" onclick="reloadContent(0); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_1_des_xpath_mappings.jpg"></a>';
//leftimage[1]='<a id="img1" href="" onclick="reloadContent(1); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_2_des_multifunctional_panel.gif"></a>';
//leftimage[2]='<a id="img2" href="" onclick="reloadContent(2); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_3_des_integrated_tutorial.jpg"></a>';
//leftimage[3]='<a id="img3" href="" onclick="reloadContent(3); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_4_des_start_page.jpg"></a>';
//leftimage[4]='<a id="img4" href="" onclick="reloadContent(4); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_5_des_script_editor.jpg"></a>';
//leftimage[5]='<a id="img5" href="" onclick="reloadContent(5); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_6_des_dragndrop.gif"></a>';
//leftimage[6]='<a id="img6" href="" onclick="reloadContent(6); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_1_ext_db_reader.jpg"></a>';
//leftimage[7]='<a id="img7" href="" onclick="reloadContent(7); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_2_ext_wsdl.jpg"></a>';
//leftimage[8]='<a id="img8" href="" onclick="reloadContent(8); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_3_ext_csv.jpg"></a>';
//leftimage[9]='<a id="img9" href="" onclick="reloadContent(9); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_4_ext_url_reader.jpg"></a>';
//leftimage[10]='<a id="img10" href="" onclick="reloadContent(10); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_5_ext_xe_cmd.jpg"></a>';
//leftimage[11]='<a id="img11" href="" onclick="reloadContent(11); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_a_run_svg.jpg"></a>';
//leftimage[12]='<a id="img12" href="" onclick="reloadContent(12); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_b_run_xhtml.jpg"></a>';
//leftimage[13]='<a id="img13" href="" onclick="reloadContent(13); return false;"><img style="margin: 0 0 5px 0; border:none;" src="gfx/screenshots/Tb_c_run_xml.jpg"></a>';

var images=new Array();
images[0] = '<img src="gfx/screenshots/all/01_des_xpath_mappings.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[1] = '<img src="gfx/screenshots/all/02_des_multifunctional_panel.gif" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[2] = '<img src="gfx/screenshots/all/03_des_integrated_tutorial.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[3] = '<img src="gfx/screenshots/all/04_des_start_page.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[4] = '<img src="gfx/screenshots/all/05_des_script_editor.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[5] = '<img src="gfx/screenshots/all/06_des_dragndrop.gif" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[6] = '<img src="gfx/screenshots/all/07_des_autocompletion.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[7] = '<img src="gfx/screenshots/all/08_ext_db_reader.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[8] = '<img src="gfx/screenshots/all/09_ext_wsdl.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[9] = '<img src="gfx/screenshots/all/10_ext_csv.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[10] = '<img src="gfx/screenshots/all/11_ext_url_reader.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[11] = '<img src="gfx/screenshots/all/12_ext_xe_cmd.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[12] = '<img src="gfx/screenshots/all/13_run_svg.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[13] = '<img src="gfx/screenshots/all/14_run_xhtml.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';
images[14] = '<img src="gfx/screenshots/all/15_run_xml.jpg" alt="xsl:easy Screenshot" border="0" name="figure" alt="Click to close" title="Click to close" onclick="window.close();">';

var labels=new Array();
labels[0] = 'Visual element mapping enables you to graphically design relations between source and target document.';
labels[1] = 'Multifunctional panel allows you to configure stylesheet properties, add various operations or view the results from one place.';
labels[2] = 'Each lesson contains working example that demonstrates the described procedure.';
labels[3] = 'From the start page, you can access the tutorial that guides you through xsl:easy.';
labels[4] = 'In the script editor, you can define your own scripts.';
labels[5] = 'Drag and drop location paths from the source panel to the editor for easier composition of XPath expressions.';
labels[6] = 'XSLT editor includes XSL element and attribute autocompletion feature.'
labels[7] = 'The wizard will guide you through the steps required to access the database.';
labels[8] = 'Configurable web service adapter allows you to send and receive data to and from web services.';
labels[9] = 'CSV adapter enables you to preview and configure CSV data input or output.';
labels[10] = 'URL reader adapter allows you to read XML data from specified URLs.';
labels[11] = 'Command line utility - xecmd - allows you to perform data transformations as batch process.';
labels[12] = 'Viewing result as a scalable vector graphics (SVG) file.';
labels[13] = 'Output of transformation as HTML document.';
labels[14] = 'Default preview of XML document.';

if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

//for (mi=0;mi<leftimage.length;mi++)
//	imagef=imagef+leftimage[mi];

//for (mi=0;mi<leftimage.length;mi++)
//	imagev=imagev+leftimage[mi];

sliderDiv=eval(document.getElementById('slider'));
sliderVertDiv = eval(document.getElementById('sliderVert'));

function reloadContent(id) {
	document.getElementById("imageDiv").innerHTML = images[id];
	
	if (oldselected >= 0) {
		document.getElementById("img"+oldselected).className = 'plain';
		//document.getElementById("img"+oldselected).style.border = 'none';
	}else {
		for (i=0;i<images.length;i++) {
			document.getElementById("img"+i).className = 'plain';
		}			
	}
			
	oldselected = id;	

    document.getElementById("img"+id).className = 'selected';
		
	document.getElementById("Label").innerHTML = labels[id];
}

function scrolLeft() {
	if (move > 0) {
		if (parseInt(sliderDiv.style.left) < 6) {
			//document.getElementById("leftnav").innerHTML = '<img src="img/left.gif" onmouseover="sspeed=8; direction=0;" onMouseout="sspeed=0"/>';
			sliderDiv.style.left=parseInt(sliderDiv.style.left)+sspeed;
			setTimeout("scrolLeft()",10);
		}		
	}
}

function scrollRight() {
	if (move > 0) {
		if ((-673) < parseInt(sliderDiv.style.left)) {
			//document.getElementById("leftnav").innerHTML = '<img src="img/left.gif" onmouseover="sspeed=8; direction=0;" onMouseout="sspeed=0"/>';
			sliderDiv.style.left=parseInt(sliderDiv.style.left)-sspeed;
			setTimeout("scrollRight()",10);
		}
		
	}
}

function scrollDown() {
	if (move > 0) {
		if ((min_vert_pos) < parseInt(sliderVertDiv.style.top)) {
			//document.getElementById("leftnav").innerHTML = '<img src="img/left.gif" onmouseover="sspeed=8; direction=0;" onMouseout="sspeed=0"/>';
			sliderVertDiv.style.top=parseInt(sliderVertDiv.style.top)-sspeed;
			setTimeout("scrollDown()",10);
		}
		
	}
}

function scrollUp() {
	if (move > 0) {
		if (parseInt(sliderVertDiv.style.top) < max_vert_pos) {
			//document.getElementById("leftnav").innerHTML = '<img src="img/left.gif" onmouseover="sspeed=8; direction=0;" onMouseout="sspeed=0"/>';
			sliderVertDiv.style.top=parseInt(sliderVertDiv.style.top)+sspeed;
			setTimeout("scrollUp()",10);
		}
		
	}
}
function start(){
	if (document.all) {
		return;
	}
	if (document.getElementById){		
		document.getElementById("slider").style.visibility="show";
		//initial6(document.getElementById('slider'));		
		sliderDiv=eval(document.getElementById('slider'));
		sliderDiv.innerHTML=('<nobr>'+imagef+'</nobr>');
		sliderDiv.style.left=5;	
		thel=swidth*leftimage.length;
	}	
	else if(document.layers){	
		document.slider1.visibility="show";
		intialslide();
	}
}

function init(){
		//document.getElementById("sliderVert").style.visibility="show";		
		sliderVertDiv=document.getElementById('sliderVert');
		//sliderVertDiv.innerHTML=(imagev);
		var selectedIdx;
		for (i=0;i<images.length;i++) {
			imgClass = document.getElementById("img"+i).className; 
			
			if(imgClass == 'selected') {
				selectedIdx = i;
				break;
			}				
		}	
		if (selectedIdx > 0)
			sliderVertDiv.style.top = 10 - (selectedIdx*75) + 250;	
		else
			sliderVertDiv.style.top = 10;	
}

/* Mouse scroll handling */

function handle(delta) {
        if (delta < 0) {
        	if ((min_vert_pos) < parseInt(sliderVertDiv.style.top)) {				
				sliderVertDiv.style.top=parseInt(sliderVertDiv.style.top)-(sspeed*2);			
			}
        }		
        else {
			if (parseInt(sliderVertDiv.style.top) < max_vert_pos) {				
				sliderVertDiv.style.top=parseInt(sliderVertDiv.style.top)+(sspeed*2);			
			}
		}
}

function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}
