﻿// JScript File

        var photoArray = new Array;
        var photoCount = 0;
        var iPos = 1;
        var theadlink;
        var picdomain;
        var picloc;
        
        function splitphoto(sInput){
            photoArray = sInput.split(",");
        }
        
        function previewpic(pid, picpos, picarr, adlink, spicdomain, spicloc, cartitle){
            splitphoto(picarr);
            photoCount = photoArray.length;
            iPos = parseInt(picpos);
            picdomain=spicdomain;
            picloc=spicloc;
            theadlink= adlink;
            //get screen width and height
            var iWidth;
            var iHeight;
            var iAllHeight;
//            iWidth = screen.width;
//            iHeight=screen.height;
            //get offset height
            var h2;
            if (document.getElementById && !document.all){
                 //browser is firefox
                 h2 = window.pageYOffset;
                 iAllHeight = document.documentElement.scrollHeight;
                 iHeight = window.innerHeight;
                 iWidth = window.innerWidth-17;
            }else{
                //browser is ie
                h2=ietruebody().scrollTop;
                iAllHeight= ietruebody().scrollHeight;
                iHeight = ietruebody().clientHeight; 
                iWidth = ietruebody().clientWidth;
            }
            //set property for background divider
            var dishow = document.getElementById("diShow");
            dishow.style.display = 'block';
            //dishow.style.height = iHeight + "px";
            //dishow.style.width = iWidth + "px";
            dishow.style.height = iAllHeight + "px";
            dishow.style.width = "100%";
            dishow.style.position = 'absolute';
            dishow.style.top = 0 + "px";
            dishow.style.left =0 + "px";
            
            
            var diLink = document.getElementById ("diAdLink");
            diLink.innerHTML ='<a href="'+ adlink +'">' + cartitle + '</a>';
            diLink.style.position = 'absolute';
            diLink.style.top = ((iHeight-480-20-45-6)/2+h2) + "px";
            diLink.style.left =((iWidth-640)/2) + "px";
            diLink.style.display='block';
            diLink.style.width = "640px";
          
            //set property for image divider
            var diImg = document.getElementById("diImage");
            diImg.style.display='block';
            diImg.style.height ="480px";
            diImg.style.width = "640px";
            diImg.style.position = 'absolute';
            diImg.style.top = ((iHeight-480-20-45-6)/2+h2+20) + "px";
            diImg.style.left =((iWidth-640)/2) + "px";
            document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + pid + 'L.jpg) no-repeat center center;"></div>';
            fadeIn();

            var diList = document.getElementById("diList");
            diList.style.display = 'block';
            diList.style.position = 'absolute';
            diList.style.top = ((iHeight-480-20-45-6)/2+h2 +480+20) + "px";
            diList.style.left =((iWidth-640)/2) + "px";
            
            var diButton = document.getElementById ("diButton");
            diButton.style.display = 'block';
            diButton.style.position = 'absolute';
            diButton.style.top = ((iHeight-480-20-45-6)/2+h2 +480+20+49) + "px";
            diButton.style.left =((iWidth-640)/2) + "px";
            
            var j=0;
            for (j=0;j<10;j++){
                if (j<photoArray.length){
                    var icon = document.getElementById("icon" + j);
                    icon.src= picdomain + "/"+ picloc +"s/car_" + photoArray[j] + "S.jpg";
                    icon.style.display='block';
                    icon.style.border='solid 0px #ffffff';
                }
                else{
                    var icon = document.getElementById("icon"+ j);
                    icon.style.display='none';
                    icon.style.border='solid 0px #ffffff';
                }
            }
            document.getElementById("icon" + iPos).style.border='solid 0px red';
            
            
            //alert(adlink);
       }
        
       function gotoAd(){
            window.location =theadlink;
       }
        
//        
        function ietruebody(){
            return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }
        
        function prevpic(){
            iPos--;
            if (iPos<0){
                iPos=photoCount-1;
                document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
                //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg" border="0" alt="Click to view next picture"  /></a>';    
            }else{
                document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
                //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg" border="0" alt="Click to view next picture" /></a>';    
            }
            fadeIn();
            var j=0;
            for (j=0;j<photoArray.length;j++){
                var icon = document.getElementById("icon" + j);
                icon.style.border='solid 0px Gray';
            }
            document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
            //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg"  border="0" alt="Click to view next picture" /></a>';    
            document.getElementById("icon" + iPos).style.border="solid 0px red";            
        }

        function nextpic(){
            iPos++;
            if (iPos>photoCount-1){
                iPos=0;
                document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
                //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg"  border="0" alt="Click to view next picture" /></a>';    
            }else{
                document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
                //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg"   border="0" alt="Click to view next picture" /></a>';    
            }
            fadeIn();
            var j=0;
            for (j=0;j<photoArray.length;j++){
                var icon = document.getElementById("icon" + j);
                icon.style.border='solid 0px Gray';
            }
            document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
            //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg"  border="0" alt="Click to view next picture" /></a>';    
            document.getElementById("icon" + iPos).style.border="solid 0px red";

        }
        
        function showsingle(iindex){
            iPos = iindex;
            var j=0;
            for (j=0;j<photoArray.length;j++){
                var icon = document.getElementById("icon" + j);
                icon.style.border='solid 0px Gray';
            }
            
            document.getElementById("diPic").innerHTML = '<div style="width:640px;height:480px;background:url(' + picdomain +'/'+ picloc +'l/car_' + photoArray[iPos] + 'L.jpg) no-repeat center center;"></div>';
            //document.getElementById("diPic").innerHTML = '<a onclick="nextpic()"><img src="'+ picdomain +'/'+ picloc +'l/' + photoArray[iPos] + '.jpg"  border="0" alt="Click to view next picture" /></a>';    
            
            fadeIn();
            document.getElementById("icon" + iPos).style.border="solid 0px red"
        }
        
        function hidepic(){
            document.getElementById("diAdLink").style.display='none';
            document.getElementById("diShow").style.display = 'none';
            document.getElementById("diImage").style.display='none';
            document.getElementById("diList").style.display='none';
            document.getElementById("diButton").style.display='none';
            //document.getElementById("closepan").style.display='none';
            var j=0;
            for(j=0;j<10;j++){
                document.getElementById("icon" + j).style.display='block';
            }
        }
        
        function shownext(){
            if (photoCount>1){
            document.getElementById("nextpan").style.filter='alpha(opacity=70)';
			document.getElementById("nextpan").style.opacity='0.7';
			}
        }
        function hidenext(){
            document.getElementById("nextpan").style.filter='alpha(opacity=0)';
			document.getElementById("nextpan").style.opacity='0';
        }
        function showprev(){
       	    if (photoCount>1){
       	    document.getElementById("prevpan").style.filter='alpha(opacity=70)';
			document.getElementById("prevpan").style.opacity='0.7';
			}
        }
        function hideprev(){
			document.getElementById("prevpan").style.filter='alpha(opacity=0)';
			document.getElementById("prevpan").style.opacity='0';
        }
//        function showclosepan(){
//			document.getElementById("closepan").style.filter='(opacity=100)';
//			document.getElementById("closepan").style.opacity='1.0';
//        }
//        function hideclosepan(){
//       			document.getElementById("closepan").style.filter='(opacity=30)';
//			document.getElementById("closepan").style.opacity='0.3';
//        }
                
        function checkESCDown(){
            if( Key.isDown(27)){
                hidepic();
            }
            if( Key.isDown(39)){
                nextpic();
            }
            if( Key.isDown(37)){
                prevpic();
            }
        }
        
        window.onload = function() {
	        Key.onKeyDown = checkESCDown;
        }
        
        function setOpacity(level) { 
            var element = document.getElementById("diPic");
            element.style.opacity = level;  
            element.style.MozOpacity = level;  
            element.style.KhtmlOpacity = level;  
            element.style.filter = "alpha(opacity=" + (level * 100) + ");";
        }
        var duration = 1000; 
        /* 1000 millisecond fade = 1 sec */
        var steps = 20;      
        /* number of opacity intervals   */
        function fadeIn(){  
            document.getElementById ("diPic").style.opacity = "0";  
            document.getElementById ("diPic").style.filter="alpha(opacity=0)";
            for (i = 0; i <= 1; i += (1 / steps)) {
                i = Math.round(i * 100)/100;
                setTimeout("setOpacity(" + i + ")", i * duration);  
            }  
            //setTimeout("fadeOut()", delay);
            
        }
//        function fadeOut() {  
//            for (i = 0; i <= 1; i += (1 / steps)) {    
//                setTimeout("setOpacity(" + (1 - i) + ")", i * duration);  
//            }  
//            setTimeout("fadeIn()", duration);
//        }        