var imageBoxLoadingImageURL = url + 'images/loading.gif';

pic1= new Image(); 
pic1.src=imageBoxLoadingImageURL; 

function imageBoxWidgetChangeImage(imageNo){
	var imageURL = byId('imageBoxWidgetImageURLHF'+imageNo).value;
	var imageWidth = byId('imageBoxWidgetImageWidthHF'+imageNo).value;
	var imageHeight = byId('imageBoxWidgetImageHeightHF'+imageNo).value;
	var caption = byId('imageBoxWidgetCaptionHF'+imageNo).value;
	var captionLink = byId('imageBoxWidgetCaptionLinkHF'+imageNo).value;
	var captionHTML = byId('imageBoxWidgetCaptionHTML'+imageNo).innerHTML;
	var captionFontSize = byId('imageBoxWidgetCaptionFontSizeHF'+imageNo).value;
	
	var mainImg = byId('imageBoxWidgetMainImage');
	mainImg.setAttribute('src', imageBoxLoadingImageURL);
	
	mainImg.setAttribute('src', imageURL);
	var container = byId('imageBoxWidgetMainImageContainer');
	
	container.style.width = imageWidth + 'px';
	container.style.height = imageHeight + 'px';
	
	var captionStart = '';
	var captionEnd = '';
	
	if(captionHTML != ''){
	
	}
	else{
		if(captionFontSize != ''){
			captionStart += '<span style="font-size: ' + captionFontSize + '">';
			captionEnd += '</span>';
		}
		if(captionLink != ''){
			captionStart += '<a href="'+captionLink+'">';
			captionEnd = '</a>' + captionEnd;
		}
		
		captionHTML = captionStart + caption + captionEnd;
	}
	
	byId('imageBoxWidgetCaption').innerHTML = captionHTML;
	
	byId('imageBoxWidgetCurrentImage').value = imageNo;
	
	for(var i=1; thumb = byId('imageBoxWidgetThumbnail'+i); i++){
	  	imgOverlay = byId('imageBoxWidgetImageOverlay'+i);
		thumb.className = thumb.className.replace('Selected', '');
		
		if(i == imageNo){
		  if(imgOverlay){
		  	imgOverlay.style.display = '';
		  	imageBoxPositionOverlay(i);
		  	//moveDivOver('imageBoxWidgetMainImage', 'imageBoxWidgetImageOverlay'+i);
		  }
		  thumb.className = thumb.className.replace('imageBoxWidgetThumbnail', 'imageBoxWidgetThumbnailSelected');  
		}
		else{
		  if(imgOverlay){
		  	imgOverlay.style.display = 'none';
		  }
		}
	}
};

function imageBoxPositionOverlay(i){
//	return false;
  	var overlay = byId('imageBoxWidgetImageOverlay'+i);
  	
  	if(overlay){
		var imageWidth = parseInt(byId('imageBoxWidgetImageWidthHF'+i).value);
		var imageHeight = parseInt(byId('imageBoxWidgetImageHeightHF'+i).value); 
		
		var tab = byId('imageBoxWidgetMainImageContainerOuter');//imageBoxWidgetMainImageTable');
		
		var containerWidth = parseInt(tab.offsetWidth);
		var containerHeight = parseInt(tab.offsetHeight);
		
		var xOffset = ((containerWidth - imageWidth) / 2);// + 5;
		var yOffset = ((containerHeight - imageHeight) / 2);// + 5;
		
		var overlay = byId('imageBoxWidgetImageOverlay'+i);
		
		overlay.style.left = xOffset+'px';
		overlay.style.top = yOffset+'px';
	}
	//alert(xOffset + "*" + yOffset);
	
};
var slideMoves = 12;

function imageBoxWidgetThumbnailSetSelected(thumbNo){
	var className = byId('imageBoxWidgetThumbnail'+thumbNo).className;
	
	className = className.replace('Selected', '');
	className = className.replace('imageBoxWidgetThumbnail', 'imageBoxWidgetThumbnailSelected');  
	
	byId('imageBoxWidgetThumbnail'+thumbNo).className = className;
};

function imageBoxWidgetThumbnailSetNormal(thumbNo){
	var className = byId('imageBoxWidgetThumbnail'+thumbNo).className;
	
	className = className.replace('Selected', '');
	
	if(thumbNo == byId('imageBoxWidgetCurrentImage').value){ 
		className = className.replace('imageBoxWidgetThumbnail', 'imageBoxWidgetThumbnailSelected'); 
	}
	
	byId('imageBoxWidgetThumbnail'+thumbNo).className = className;
};

function imageBoxWidgetPrevPage(){
	var current_page = byId('imageBoxWidgetCurrentPage').value;
	//var total_pages = byId('imageBoxWidgetTotalPages').value;
	
	imageBoxWidgetChangePage(--current_page);	  
};

function imageBoxWidgetNextPage(){
	var current_page = byId('imageBoxWidgetCurrentPage').value;
	//var total_pages = byId(id+'_total_pages').value;

	imageBoxWidgetChangePage(++current_page);		  
};

function imageBoxWidgetChangePage(page){
  	if(byId('imageBoxWidgetIsMoving').value == 'Y'){
  		return;
  	}
  	byId('imageBoxWidgetIsMoving').value = 'Y';
  	
	var page_width = 210;

	elm = byId('imageBoxWidgetSliderBox');
	
	//clearTimeout(sliderTimeout);
	
	var tempStartPos = sliderStartPos = parseInt(elm.style.marginLeft);;
	var tempNewPos = sliderNewPos = page * page_width * -1;
	
	adjustment = tempNewPos - tempStartPos;
  	
  	sliderIncrement = adjustment / slideMoves;
  	
  	moveCount = 1;
  	
  	byId('imageBoxWidgetCurrentPage').value = page;
  	
  	moveSliderByIncrement();
  	  	
};

function moveSliderByIncrement(){
  	//get global js values for this slider box
  	var tempMoveCount = moveCount;
  	var tempSliderIncrement = sliderIncrement;
  	var tempSliderNewPos = sliderNewPos;
  	
	elm = byId('imageBoxWidgetSliderBox');
	
	pos = parseInt(elm.style.marginLeft);
	
	if(tempMoveCount < slideMoves){
		elm.style.marginLeft =  (pos + tempSliderIncrement) + 'px';
	}

	tempMoveCount = ++moveCount;

	if(tempMoveCount <= slideMoves){
		sliderTimeout = setTimeout( moveSliderByIncrement, 5);
	}
	else{ 
	  	page = byId('imageBoxWidgetCurrentPage').value;
	  	page_width = 210;
	  	total_pages = byId('imageBoxWidgetTotalPages').value;
	  	
	  	if(page == 0){
	  		elm.style.marginLeft = '-' + (page_width*total_pages) + 'px';
	  		byId('imageBoxWidgetCurrentPage').value = total_pages;
		}	
	  	else if(page > total_pages){
	  		elm.style.marginLeft = '-' + page_width + 'px';
	  		byId('imageBoxWidgetCurrentPage').value = 1;
		}
		else{
		  	elm.style.marginLeft = tempSliderNewPos + 'px';
		}
			
		byId('imageBoxWidgetIsMoving').value = 'N';
		
		page = byId('imageBoxWidgetCurrentPage').value;
		
		for(i=1; byId('imageBoxWidgetPageMarker'+i); i++){
		  	var marker = byId('imageBoxWidgetPageMarker'+i);

		  	var src = marker.getAttribute('src');
			src = src.replace('-selected', '');
			if(i==page){
			  src = src.replace('.png', '-selected.png');
			}
			
			marker.setAttribute('src', src);
		}
	}
	
};