//global vars
var imageArrayString = new Array();
var imageArrayWidthString = new Array();
var folderPathGlobal = "";

var currentImagePage = 1;
var maxPagesInt = 1;

var imgLoaded = 0;

var b_version = navigator.appVersion;

function getImgWidth(imgSrc)
{
	imgLoaded = 0;
	var newImg = new Image();
	newImg.src = imgSrc;
	
	var width = newImg.width;
	
	newImg.onload = imgLoadedFinished;
	
	do
	{
		width = newImg.width;
	}
	while(imgLoaded == 0)
	
	return width;
}

function initFolderPath(folderPath)
{
	folderPathGlobal = folderPath;
}

function initImgStringArray(imageWidthArray)
{
	imageArrayWidthString = imageWidthArray.split("|");
}

function imgLoadedFinished(e)
{
	imgLoaded = 1;
	alert("Image loaded");
}

function imageIsLoaded()
{
	alert('image loaded once');
	
	imgLoaded++;
	
	if(imgLoaded == 6)
	{
		alert('All the images are loaded ');
	}
}

function initFolderImg(imageArray)
{
	var htmlCode = "";
	var temp_string = "body_presenter";
	var myDiv = document.getElementById(temp_string);
	var div1 = document.createElement("div");

	var tempString = "";
	var tempPath = "";
	var widthSize = 0;
	var previousImgWidth = 0;
	
	imageArrayString = imageArray.split("|");
	
	var imgBeingLoadedWidth = 0;
	
	if(imageArrayString.length>6)
	{
		//calculate how many pages is there
		maxPagesInt = Math.ceil(imageArrayString.length/6);
		
		for(var i=0;i<6;i++)
		{
			/*
			tempString = "img/diaporama/fashion/opt/"+imageArrayString[i];
			
			img1.setAttribute('src', tempString);
			myDiv.appendChild(img1);
			*/
			tempPath = folderPathGlobal+imageArrayString[i];
			
			imgBeingLoadedWidth = parseInt(imageArrayWidthString[i]);
			
			widthSize = widthSize + imgBeingLoadedWidth;
		
			htmlCode = htmlCode + '<div class="img_trailer_class" style="background:transparent url('+tempPath+') no-repeat;width:'+imgBeingLoadedWidth+'px;margin-left:'+previousImgWidth+'px;"></div>';

			previousImgWidth = previousImgWidth + imgBeingLoadedWidth;
		}
		
		htmlCode = htmlCode + '<div id="next_right" style="margin-left:'+previousImgWidth+'px" onclick="nextImgRoll()">NEXT</div>';
	}
	else
	{
		for(var i=0;i<imageArrayString.length;i++)
		{
			tempPath = folderPathGlobal+imageArrayString[i];
		
			imgBeingLoadedWidth = parseInt(imageArrayWidthString[i]);
			
			widthSize = widthSize + imgBeingLoadedWidth;

			htmlCode = htmlCode + '<div class="img_trailer_class" style="background:transparent url('+tempPath+') no-repeat;width:'+imgBeingLoadedWidth+'px;margin-left:'+previousImgWidth+'px;"></div>';
			
			previousImgWidth = previousImgWidth + imgBeingLoadedWidth;
		}	
	}

	div1.id = 'img_guide';
	div1.innerHTML = htmlCode;
	myDiv.appendChild(div1);
	
	myDiv = document.getElementById("img_guide");
	
	if(imageArrayString.length>6)
	{
		myDiv.style.width = (widthSize+40)+'px';
	}
	else
	{
		myDiv.style.width = widthSize+'px';
	}
}

function nextImgRoll()
{
	//move the content on the left
	document.getElementById("body_presenter").scrollLeft = 0;
	
	var temp_string = "img_guide";
	var myDiv = document.getElementById(temp_string);

	currentImagePage++;

	var htmlCode = "";
	
	var tempPath = "";
	var widthSize = 0;
	
	var previousImgWidth = 40; /*there is a previous button of 75px width before*/
	
	if((b_version.indexOf("MSIE 9.0")<0)&(b_version.indexOf("MSIE 8.0")<0)&(b_version.indexOf("MSIE 7.0")<0)&(b_version.indexOf("MSIE 6.0")<0))
	{
		previousImgWidth = 40;
	}
	else
	{
		previousImgWidth = 50;
	}
	
	var imgBeingLoadedWidth = 0;
	
	if((currentImagePage*6)<= imageArrayString.length)
	{
		for(var i=(currentImagePage-1)*6;i<currentImagePage*6;i++)
		{			
			tempPath = folderPathGlobal+imageArrayString[i];
	
			imgBeingLoadedWidth = parseInt(imageArrayWidthString[i]);
			
			widthSize = widthSize + imgBeingLoadedWidth;
	
			htmlCode = htmlCode + '<div class="img_trailer_class" style="background:transparent url('+tempPath+') no-repeat;width:'+imgBeingLoadedWidth+'px;margin-left:'+previousImgWidth+'px;"></div>';
				
			previousImgWidth = previousImgWidth + imgBeingLoadedWidth;
		}	
	}
	else if((currentImagePage*6) > imageArrayString.length)
	{
		for(var i=(currentImagePage-1)*6;i<imageArrayString.length;i++)
		{			
			tempPath = folderPathGlobal+imageArrayString[i];
	
			imgBeingLoadedWidth = parseInt(imageArrayWidthString[i]);
			
			widthSize = widthSize + imgBeingLoadedWidth;
	
			htmlCode = htmlCode + '<div class="img_trailer_class" style="background:transparent url('+tempPath+') no-repeat;width:'+imgBeingLoadedWidth+'px;margin-left:'+previousImgWidth+'px;"></div>';
				
			previousImgWidth = previousImgWidth + imgBeingLoadedWidth;
		}			
	}

	if(currentImagePage == maxPagesInt)
	{
		//last page, no next sign
		htmlCode =  '<div id="next_left" onclick="prevImgRoll()">PREV</div>' + htmlCode;
	}
	else
	{
		//next and prev sign
		htmlCode =  '<div id="next_left" onclick="prevImgRoll()">PREV</div>' + htmlCode + '<div id="next_right" style="margin-left:'+previousImgWidth+'px" onclick="nextImgRoll()">NEXT</div>';		
	}	

	myDiv.innerHTML = htmlCode;

	if(currentImagePage == maxPagesInt)
	{
		//last page, no next sign just the previous sign is on
		myDiv.style.width = widthSize+'px';
	}
	else
	{
		//next and prev sign
		myDiv.style.width = (widthSize+80)+'px';
	}
}

function prevImgRoll()
{
	var temp_string = "img_guide";
	var myDiv = document.getElementById(temp_string);

	currentImagePage--;

	var htmlCode = "";
	var tempPath = "";
	var widthSize = 0;
	
	var imgBeingLoadedWidth = 0;
	var previousImgWidth = 0; /*there is a previous button of 75px width before*/
	
	if(currentImagePage == 1)
	{
		previousImgWidth = 0;
	}
	else
	{
		if((b_version.indexOf("MSIE 9.0")<0)&(b_version.indexOf("MSIE 8.0")<0)&(b_version.indexOf("MSIE 7.0")<0)&(b_version.indexOf("MSIE 6.0")<0))
		{
			previousImgWidth = 40;
		}
		else
		{
			previousImgWidth = 50;
		}	
	}
	
	
	for(var i=(currentImagePage-1)*6;i<currentImagePage*6;i++)
	{			
		tempPath = folderPathGlobal+imageArrayString[i];

		imgBeingLoadedWidth = parseInt(imageArrayWidthString[i]);
		
		widthSize = widthSize + imgBeingLoadedWidth;
		
		htmlCode = htmlCode + '<div class="img_trailer_class" style="background:transparent url('+tempPath+') no-repeat;width:'+imgBeingLoadedWidth+'px;margin-left:'+previousImgWidth+'px;"></div>';
	
		previousImgWidth = previousImgWidth + imgBeingLoadedWidth;
	}

	if(currentImagePage == 1)
	{
		//first page no prev sign
		htmlCode = htmlCode +'<div id="next_right" style="margin-left:'+previousImgWidth+'px" onclick="nextImgRoll()">NEXT</div>';
	}
	else
	{
		//next and prev sign
		htmlCode =  '<div id="next_left" onclick="prevImgRoll()">PREV</div>' + htmlCode + '<div id="next_right" style="margin-left:'+previousImgWidth+'px" onclick="nextImgRoll()">NEXT</div>';		
	}	

	myDiv.innerHTML = htmlCode;

	if(currentImagePage == 1)
	{
		//last page, no next sign just the previous sign is on
			myDiv.style.width = (widthSize+40)+'px';
	}
	else
	{
		//next and prev sign
			myDiv.style.width = (widthSize+80)+'px';
	}
}