
var slideIndex = 0
var slides = new Array();



var servicehtml = "";

servicehtml = '';
servicehtml += '<div class="customizedServiceSlide">';

servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/logobranding.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./logobranding.htm">Logo Branding </a></div>';
servicehtml += '	<div class="customizedServiceContent">Imprint your company logo on our products as promotional giveaways and brand recognition.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./logobranding.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';

servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/laser.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./laserengraving.htm">Laser Engraving</a></div>';
servicehtml += '	<div class="customizedServiceContent">Laser produces a permanent and highly detailed design including signature, logo or any ..... </div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./laserengraving.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';

servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/preload.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./datapreload.htm">Data Preload</a></div>';
servicehtml += '	<div class="customizedServiceContent">Preload files including powerpoint presentation, PDF product brochure, Flash promotions.... </div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./datapreload.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';

servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/autorun.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./usbautorun.htm">USB Content AutoRun</a></div>';
servicehtml += '	<div class="customizedServiceContent">Launch pre-selected program or file automatically when the USB drive is plugged into a PC.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./usbautorun.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '</div>';

slides[slideIndex++] = servicehtml;

servicehtml = '';
servicehtml += '<div class="customizedServiceSlide">';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/contentmastering.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./contentmastering.htm">Content Mastering</a></div>';
servicehtml += '	<div class="customizedServiceContent">We can help you package ready-to-go content onto usb drives. Contact us with your ideas.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./contentmastering.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/partition-configuration.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./driveconfig.htm">Drive Configuration</a></div>';
servicehtml += '	<div class="customizedServiceContent">Data stored in a separate partition.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./driveconfig.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/icon-creation.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./contentmastering.htm">Icon Creation</a></div>';
servicehtml += '	<div class="customizedServiceContent">Turn your logo or symbol into an eye-catching drive icon.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./contentmastering.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/copyprotectedcontentplayer.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./contentmastering.htm">Copy-protected Content Player</a></div>';
servicehtml += '	<div class="customizedServiceContent">Make important music and other type of files copy-protected.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./contentmastering.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';



servicehtml += '</div>';


slides[slideIndex++] = servicehtml;



servicehtml = '';
servicehtml += '<div class="customizedServiceSlide">';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/CD-styleprotection.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./nonerasable.htm">Non-erasable Content Protection</a></div>';
servicehtml += '	<div class="customizedServiceContent">Prevent accidental erasure of contents and increases the usage life cycle of USB.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./nonerasable.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';

// Software Write-protect
servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/writeprotectedswitch.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./nonerasable.htm">Software Write-protect</a></div>';
servicehtml += '	<div class="customizedServiceContent">Use our WriteProtect software to turn on and off the write-protect feature.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./nonerasable.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';

servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/password-secure-disk.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./usbsecureddisk.htm">Password-</a><br /><a href="./usbsecureddisk.htm">secured Disk</a></div>';
servicehtml += '	<div class="customizedServiceContent">Data stored in encrypted partition with password protection. Protect your personal.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./usbsecureddisk.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/private-data-area.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./usbprivatedata.htm">Private Data Storage</a></div>';
servicehtml += '	<div class="customizedServiceContent">A concealed memory zone not visible to operating system or end users, for storing.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./usbprivatedata.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';








servicehtml += '</div>';

slides[slideIndex++] = servicehtml;


servicehtml = '';
servicehtml += '<div class="customizedServiceSlide">';

servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/unique-ID.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./usbsid.htm">Electronic Serial Number</a></div>';
servicehtml += '	<div class="customizedServiceContent">Pre-configure a unique 16-byte read-only serial number for hardware identification purpose.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./usbsid.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/customcasing.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./oem.htm">Custom Casing</a></div>';
servicehtml += '	<div class="customizedServiceContent">Customize your casing style and color.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./oem.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '<div class="customizedService">';
servicehtml += '	<div class="customizedServiceIcon"><img src="./images/slideshow/PCB.png" /></div>';
servicehtml += '	<div class="customizedServiceContentHeader"><a href="./oem.htm">OEM Design Service</a></div>';
servicehtml += '	<div class="customizedServiceContent">Customize the PCB form fitting to suit your needs.....</div>';
servicehtml += '	<div class="customizedServiceReadMore"><a href="./oem.htm"><img src="./images/readmorerarrow.gif" width="5" height="10" border="none"  style=" vertical-align:middle;"/>&nbsp;&nbsp;Read more</a></div>';
servicehtml += '</div>';


servicehtml += '</div>';

slides[slideIndex++] = servicehtml;






















var slideGap = '';


//var serviceSlideShowWidth = 600;
//var serviceSlideShowHeight = 440;


var slideShowerWidth = 485;
var slideShowerHeight = 400;

//var slideContainerWidth = 700;
var slideContainerHeight = 400;

var slideWidth = 485;
var slideHeight = 400;

var slideGapWidth = 0;
var slideGapHeight = 0;

var slideDirection = 0;
var slideSpeed = 20;
var slideStep = 100;
var slideDeceleration = 0.82;




var initialized = false;
var currentSlideSpeed = slideSpeed;
var currentSlideStep = slideStep;
var currentX = 0;
var currentInterval = null;

var movedStep = 0;
var stepToMove = 0;

var stateMoving = 0;

var currentSlidePage = 0;
var movingPage = 0;

//var testspeed = "";

//public
function slideNextPage(){
	if(stateMoving == 0){
		stateMoving = 1;
		movingPage = 1;
		stepToMove = slideWidth;

		slideLeft(slideSpeed, slideStep);
		if(currentSlidePage == slides.length -1){
			currentSlidePage = 0
		}else{
			currentSlidePage = currentSlidePage + 1;
		}
		updateButtonIcon(currentSlidePage);
	}
}

function slidePrevPage(){
	if(stateMoving == 0){
		stateMoving = 1;
		movingPage = 1;
		stepToMove = slideWidth;
		slideRight(slideSpeed, slideStep);
		//alert(currentSlidePage)
		if(currentSlidePage == 0){
			currentSlidePage = slides.length -1
		}else{
			currentSlidePage = currentSlidePage - 1;
		}

		updateButtonIcon(currentSlidePage);

	}
}

function slideSelectPage(page){
	if(stateMoving == 0){
		stateMoving = 1;

		movingPage = currentSlidePage - page;

		if(movingPage > 0 ){
			stepToMove = slideWidth *movingPage ;
				slideRight(slideSpeed, slideStep);
		}else {
			movingPage = movingPage * -1;
			stepToMove = slideWidth *movingPage
				slideLeft(slideSpeed, slideStep);
		}

		currentSlidePage = page;
		updateButtonIcon(page);
	}
}

//private
function slideLeft(speed, step){
	slideDirection = 0;
	if(currentInterval != null){
		//alert("clearInterval slideLeft")
		clearInterval(currentInterval);
	}
	currentSlideSpeed = speed;
	currentSlideStep = step;
	slideShow();
}

function slideRight(speed, step){
	slideDirection = 1;
	if(currentInterval != null){
		//alert("clearInterval slideRight")
		clearInterval(currentInterval);
	}
	currentSlideSpeed = speed;
	currentSlideStep = step;
	slideShow();
}

function slidePause(){
	currentSlideStep = 0;
}

function slideRun(){
	currentSlideStep = slideStep;
}



function decelerateStep(){

	var notyetMovedPage = movingPage - (movedStep / slideWidth) ;

	if(notyetMovedPage > 1){
		currentSlideStep = Math.ceil(currentSlideStep * slideDeceleration * ((stepToMove - movedStep )/slideWidth));
	}else {
		currentSlideStep = Math.ceil(currentSlideStep * slideDeceleration);
	}


	if(currentSlideStep > slideStep){
		currentSlideStep = slideStep;
	}

	if(currentSlideStep < 5){
		currentSlideStep = 5;

	}
}


function updateButtonIcon(page){
	for(var i=0; i<slides.length; i++){
		var button = document.getElementById("slidePageButtonImg" + i);

		if(page == i){
			button.src = "./images/pagebutton_current.gif";
		}else{
			button.src = "./images/pagebutton.gif";
		}

	}
}

function initSlides(){
	initialized = false;

	var totalWidth = (slideWidth + slideGapWidth) * (slides.length);
	var html = '';

	html += '<div id="ServiceSlideShow">';
	html += '<div id="ServiceSlideTop"><a style="line-height:24px" id="ServiceSlideTopTitle" href="service.htm">Customization Services</a></div>';




	html += '<div id="ServiceSlideMiddle" style="float:left;">'

	html += '<div id="ServiceSlideMoveLeft" onclick="slidePrevPage()"><img src="./images/back.jpg"/></div>';

	html += '<div id="slideShower" style="float:left;position:relative;z-index:5;width:'+slideShowerWidth+'px;height:' + slideShowerHeight + 'px;overflow:hidden">';

	html += '<div id="slideContainer" style="z-index:4;width:'+totalWidth+'px;left:0;height:' + slideContainerHeight + 'px;overflow:hidden; position:relative;">';

	for(var i=0; i<slides.length; i++){
	html += '<div class="slide" style="z-index:1;width:'+slideWidth+'px;height:' + slideHeight + 'px;float:left;overflow:hidden;">' + slides[i] + '</div>';
	html += '<div class="slideGap" style="z-index:1;width:'+slideGapWidth+'px;height:' + slideGapHeight + 'px;float:left;overflow:hidden;">' + slideGap + '</div>';
	}
	html += '</div>';
	html += '</div>';

	html += '<div id="ServiceSlideMoveRight" onclick="slideNextPage();"><img src="./images/next.jpg" width="50"/></div>'

	html += '</div>';

	html += '<div id="slidePageButtonList">'

	html += '<div style="text-align:center;	margin-left:auto;margin-right:auto;width:' + slides.length * 23 + 'px">'


	for(var i=0; i<slides.length; i++){
			html += '<div id="slidePageButton' + i + '" onclick="slideSelectPage(' + i + ');" style="float:left;	cursor:pointer;"><img src="./images/pagebutton.gif" 	id="slidePageButtonImg' + i + '"></div>';
	}

	html += '</div>';

	html += '</div>'

	html += '<div id=ServiceSlideBottom>'
	html += '<img src="./images/slideShowBottom.png">';
	html += '</div>'


	html += '</div>'

	document.write(html);
	updateButtonIcon(currentSlidePage);

	initialized = true;

}

function slideShow(){
	if(!initialized){
		initSlides();
	}
	currentInterval = setInterval("slideMove()",currentSlideSpeed);
}

function slideMove(){
	var slideContainer = document.getElementById("slideContainer");

	var testarea = document.getElementById("testarea");

	if(slideContainer != null){

		if(movedStep < stepToMove){

			if(slideDirection == 0)	{

				decelerateStep();
				if(stepToMove - movedStep < currentSlideStep){
					currentSlideStep = stepToMove - movedStep;
				}


				currentX = currentX - currentSlideStep;
				slideContainer.style.left = currentX + 'px';

				movedStep += currentSlideStep;

				//testspeed +=  currentSlideStep + '<p>';

				//testarea.innerHTML = slideContainer.style.left + " direction = 0, stepToMove = " + stepToMove + ", movedStep = " + movedStep + " , movingPage = " + movingPage + " , currentSlideStep = " + testspeed;




				if(isMostRightShow()){
					var slideCount = 1;
					cutPasteRightSilde(slideCount);
					currentX = currentX + slideCount * (slideWidth + slideGapWidth);
					slideContainer.style.left = currentX + 'px';
				}
			}else{

				decelerateStep();
				if(stepToMove - movedStep < currentSlideStep){
					currentSlideStep = stepToMove - movedStep;
				}

				currentX = currentX + currentSlideStep;
				slideContainer.style.left = currentX + 'px';

				movedStep += currentSlideStep;

				//testspeed += currentSlideStep + '<p>';

				//testarea.innerHTML = slideContainer.style.left + " direction = 1, stepToMove = " + stepToMove + ", movedStep = " + movedStep+ " , movingPage = " + movingPage + " , currentSlideStep = " + currentSlideStep  + testspeed;;

				if(isMostLeftShow()){
					var slideCount = 1;
					cutPasteLeftSilde(slideCount);
					currentX = currentX - slideCount * (slideWidth + slideGapWidth);
					slideContainer.style.left = currentX + 'px';
				}
			}

		}else{
			if(currentInterval != null){
				clearInterval(currentInterval);
			}
			movedStep = 0;
			stepToMove = 0;
			stateMoving = 0;
			movingPage = 0;

			//testspeed = "";
		}

	}else{
		//alert("slideContainer == null")
	}
}

function isMostLeftShow(){
	var showerOnContainerLeftX = currentX * -1;
	var leftMostSlideRightX = slideWidth;

	if(showerOnContainerLeftX < leftMostSlideRightX){
		return true;
	}else{
		return false;
	}
}

function isMostRightShow(){
	var showerOnContainerRightX = (currentX * -1) + slideShowerWidth;
	var rightMostSlideLeftX = (slides.length - 1)*(slideWidth + slideGapWidth);
	if(showerOnContainerRightX > rightMostSlideLeftX){
		return true;
	}else{
		return false;
	}
}

function cutPasteLeftSilde(count){
	var slideContainer = document.getElementById("slideContainer");
	var elementCount = count*2;
	if(slideContainer != null){
		for(var i=0; i<elementCount; i++){
			var remove = slideContainer.removeChild(slideContainer.lastChild);
			slideContainer.insertBefore(remove, slideContainer.firstChild);
		}
	}
}

function cutPasteRightSilde(count){
	var slideContainer = document.getElementById("slideContainer");
	var elementCount = count*2;
	if(slideContainer != null){
		for(var i=0; i<elementCount; i++){
			var remove = slideContainer.removeChild(slideContainer.firstChild);
			slideContainer.appendChild(remove);
		}
	}

}

