//numSeconds is the duration, in miliseconds, for each slide to remain still/static
numSeconds = 5000;

numCurrentImg = 0;
//numNewImg = 1;
numPhotos = 4;
timer = null;

var i = 0;

var TimeToFade = 2000.0;

// TransitionTime is the # in miliseconds that it takes each slide to transition
TransitionTime = 500;


//This is where you define new urls. Each URL corresponds to its same line image in the block below. 
//For example, the first url in the block will be attached to the first image in the second block.

var urls = new Array(
        "http://www.cutesygirl.com",
        "http://www.cutesygirl.com/productsfilter.aspx?category=Apparel",
        "http://www.cutesygirl.com/productsfilter.aspx?category=Shoes&isreg=1",
        "http://www.cutesygirl.com/productsfilter.aspx?category=Shoes&isreg=1"
);
images = new Array (
        "images/image1.jpg",
        "images/image2.jpg",
        "images/image3.jpg",
        "images/image4.jpg"
);

	
/*     
     for(i=0; i<=numPhotos; i++) 
     {
          imageObj.src=images[i];
     }
*/

function initPage()
{
//to disable caching, add 2 // to the next line, so it becomes //preloader();. to re-enable, simply remove the // and save
preloader();
startShow();


}


function preloader() 

{

     // counter
     var t = 0;


     // create object
     imageObj = new Image();


     // start preloading
     for(t=0; t<=3; t++) 
     {
          imageObj.src=images[t];
          
     }

} 



function blendimage(divid, imageid, numCurrentImg, /*imagefile,*/ millisec) {
	//window.alert(imagefile);
    var speed = Math.round(millisec / 100);
    var timer = 0;
    var url = document.getElementById("imagelink");
    //window.alert(imageid);
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    
    //make image transparent
    changeOpac(0, imageid);
    
    //make new image
    document.getElementById(imageid).src = images[numCurrentImg-1];
    
    document.getElementById('swap'+numCurrentImg).className = 'selected';
	url.setAttribute("href", urls[numCurrentImg-1]);


    //fade in image
    for(i = 0; i <= 100; i++) {

        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
		
    	
    //window.alert(timer);

} 


function swapTimeout() {
 	if (numCurrentImg == 0)
 	{
 	
 	} else {
 	document.getElementById('swap'+numCurrentImg).className = 'unselected';
 	}
 	
	if ( numCurrentImg == numPhotos ) { // We've just displayed the last img.
		numCurrentImg = 1;
	} else {
		numCurrentImg++;
	}

	blendimage('rotateDiv','rotateImage', numCurrentImg, TransitionTime);
	timer = window.setTimeout(swapTimeout, numSeconds);
	
}

function nextImg() {
	stopShow();
	document.getElementById('swap'+numCurrentImg).className = 'unselected';
	var url = document.getElementById("imagelink");
	numNewImg = numCurrentImg+1;	   
	if (numNewImg > numPhotos)
		numNewImg = 1;

	blendimage('rotateDiv','rotateImage', numNewImg, /*strImgURL2,*/TransitionTime);
	
	//if (document.getElementById('imgLabel'))
	//	document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
}
 
function prevImg() {
	stopShow();
	document.getElementById('swap'+numCurrentImg).className = 'unselected';
	var url = document.getElementById("imagelink");
	numNewImg = numCurrentImg-1;
	if (numNewImg < 1)
		numNewImg = numPhotos
	//eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
	
	//document.getElementById('swap'+numNewImg).className = 'selected';
	
	blendimage('rotateDiv','rotateImage', numNewImg, /*strImgURL2,*/TransitionTime);

	//var url = document.getElementById("imagelink");
	//url.setAttribute("href", urls[numNewImg-1]);
	//if (document.getElementById('imgLabel'))
	//	document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
}
 


function startShow() {
	if (timer == null)
	    swapTimeout();
}
 
function stopShow() {
	if (timer != null){
		window.clearTimeout(timer);
		timer = null;				
	}
}
function toggleShow() {
	if (timer == null) {
	    startShow();
	} else {
		stopShow();				
	}
}


 function swapImage2(imageid) {

switch (imageid) {
case 1:
   stopShow();
   document.getElementById('swap'+numCurrentImg).setAttribute('class','unselected');
   document.getElementById('swap'+numCurrentImg).className = 'unselected';
   //document.getElementById('rotateImage').setAttribute("src",imgPhoto1.src);
   //rotateImage.src = imgPhoto1.src;
   numCurrentImg = 1;
   //imagelink.href=urls[0];
   blendimage('rotateDiv','rotateImage', numCurrentImg, /*strImgURL2,*/TransitionTime);

   break;
case 2:
   stopShow();
   document.getElementById('swap'+numCurrentImg).setAttribute('class','unselected');
   document.getElementById('swap'+numCurrentImg).className = 'unselected';
   //document.getElementById('rotateImage').setAttribute("src",imgPhoto2.src);
   //rotateImage.src = imgPhoto2.src;
   numCurrentImg = 2;
   //imagelink.href=urls[1];
   //document.getElementById('swap2').setAttribute('class','selected');
   //document.getElementById('swap2').className = 'selected';
   //swap2.className = 'selected';
   blendimage('rotateDiv','rotateImage', numCurrentImg, /*strImgURL2,*/TransitionTime);

break;
case 3:
   stopShow();
   document.getElementById('swap'+numCurrentImg).setAttribute('class','unselected');
   document.getElementById('swap'+numCurrentImg).className = 'unselected';

   //document.getElementById('rotateImage').setAttribute("src",imgPhoto3.src);
   //rotateImage.src = imgPhoto3.src;
   numCurrentImg = 3;
   //imagelink.href=urls[2];
   blendimage('rotateDiv','rotateImage', numCurrentImg, /*strImgURL2,*/TransitionTime);

   break;
case 4:
   stopShow();
   document.getElementById('swap'+numCurrentImg).setAttribute('class','unselected');
   document.getElementById('swap'+numCurrentImg).className = 'unselected';

   //document.getElementById('rotateImage').setAttribute("src",imgPhoto4.src);
   //rotateImage.src = imgPhoto4.src;
   numCurrentImg = 4;
   //imagelink.href=urls[3];
   blendimage('rotateDiv','rotateImage', numCurrentImg, /*strImgURL2,*/TransitionTime);
   
   break;


 }
}

     
     /*
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}
*/
//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 
///////////////////////////////////////////////





//window.onload = preloader;