var iBorderOffset = 1;

function setupAllCroppers (){

	var aCroppers = document.getElementsByClassName("cropper");

	get("divCroppers").style.display="block";

	for (ii=0; ii < aCroppers.length; ii++) {
		aSplit = aCroppers[ii].id.split("_");
		setupCropper(aSplit[1], false);
	}

	get ("divLoadingInfo").style.display="none";
	get("divCropperIntro").style.display="block";

	//clear values
	aCroppers = null;
}

function setupCropper (sPhotoId, bReset){

    //Get the image and dragger for this cropper
    aDimensions = get('hidImageDimensions_' + sPhotoId).value.split('_');
    iWidth = parseInt(aDimensions[0]);
    iHeight = parseInt(aDimensions[1]);

    oImage = get('imgFlickr_' + sPhotoId);
    oDragger = get('divDragger_' + sPhotoId);
    oCropper = get('divCropper_' + sPhotoId);

    //Setup the slider
    sImageID = oImage.id;
    sCropperID = oCropper.id;
    sDraggerID = oDragger.id;
	sSliderHandleId = 'divSliderHandle_' + sPhotoId;
	sSliderTrackId = 'divSliderTrack_' + sPhotoId;

	//Get any existing zoom
	var aImageInfo = getImageInfo(sPhotoId);
	var nExistingZoom = safeInt(oImage.width) / safeInt(aImageInfo[3]);
	setZoomText(sPhotoId, nExistingZoom * 100);

	//Build slider
  	oSlider = new Control.Slider(sSliderHandleId,sSliderTrackId,{sliderValue:(nExistingZoom -1), axis:'horizontal', range: $R(0, 0.5)});

    oSlider.options.onSlide = function(value){
      	scaleIt(value,sPhotoId);
    };

    oSlider.options.onChange = function(value){
      	scaleIt(value, sPhotoId);
	onZoomed(sPhotoId);
    };

    //Setup the dragger

    new Draggable(oDragger.id,{
                revert:false,
		change: function (value){
			oMooDebug = new MooDebug();
	        dragged(value, sPhotoId);},
		snap:function(x,y,draggable) {


	      aDraggerDimensions = Element.getDimensions(draggable.element);
		  sPhotoId = draggable.element.id.replace("divDragger_", "");
		  oCropper = get("divCropper_" + sPhotoId);
	      aCropperDimensions = Element.getDimensions(oCropper);

		  	//work out bleed
		  	aBleed = get("hidBleed_" + sPhotoId).value.split("|");
			xBleed=0;
			yBleed=0;
			//bleed comes from a hidden input, to save recalculating each time
		  	if (aCropperDimensions.width > aCropperDimensions.height){
				xBleed = aBleed[0];
				yBleed = aBleed[1];
			}else{
				xBleed = aBleed[1];
				yBleed = aBleed[0];
			}

 	      return constrainByCropper(x, parseInt(oCropper.style.left), aCropperDimensions.width, aDraggerDimensions.width, xBleed,
			y, parseInt(oCropper.style.top), aCropperDimensions.height, aDraggerDimensions.height, yBleed);
	    },
		endeffect: function (value){
			setCroppedInformation(sPhotoId);
			var oMooDebug = new MooDebug();
			oMooDebug.info('Photo moved ' + sPhotoId);
		}
	});

	//Zoom warning
	showHideZoom(sPhotoId);

	//Set crop info
	setCroppedInformation(sPhotoId);

	//make sure the tools are the correct height
	get("divImageControls_" + sPhotoId).style.height = oImage.parentNode.style.height;
}

function scaleIt(iScale, sPhotoId) {
	 oImage = get('imgFlickr_' + sPhotoId);
	 oCropper = get('divCropper_' + sPhotoId);

    //old values
    iOldWidth = parseInt(oImage.width);
    iOldHeight = parseInt(oImage.height);

    //Work out the new scale
    iRealScale = 1 + iScale;

    aDimensions = get('hidImageDimensions_' + sPhotoId).value.split('_');

   //set new size
   oImage.width  = parseInt(aDimensions[0]) * iRealScale;
   oImage.height  = parseInt(aDimensions[1]) * iRealScale;

	if (iScale == 0){
		oImage.style.top = "0";
		oImage.style.left = "0";
	}else{
	  if (iOldWidth < oImage.width) {
	      oImage.style.top = (parseInt(oImage.style.top) -  (oImage.height - iOldHeight)/2)  + 'px';
	      oImage.style.left = (parseInt(oImage.style.left) -  (oImage.width - iOldWidth)/2)  + 'px';
	   }
	   if (iOldWidth >= oImage.width) {
	      oImage.style.top = (parseInt(oImage.style.top) +  (iOldHeight - oImage.height)/2)  + 'px';
	      oImage.style.left = (parseInt(oImage.style.left) +  (iOldWidth - oImage.width)/2)   + 'px';
	   }

	}

	//Make sure we are within the box
	iLeft = parseInt(oCropper.style.left) - parseInt(oImage.style.left);
	iTop = parseInt(oCropper.style.top) - parseInt(oImage.style.top);
	iCropperWidth = parseInt(oCropper.style.width);
	iCropperHeight = parseInt(oCropper.style.height);

	aCropperDimensions = Element.getDimensions(oCropper);
	//work out bleed
	aBleed = get("hidBleed_" + sPhotoId).value.split("|");
	xBleed=0;
	yBleed=0;
	//bleed comes from a hidden input, to save recalculating each time
	if (aCropperDimensions.width > aCropperDimensions.height){
		xBleed = aBleed[0];
		yBleed = aBleed[1];
	}else{
		xBleed = aBleed[1];
		yBleed = aBleed[0];
	}

	//These checks are in place to ensure that Zooming doesn't end up with the image crop
	//sitting outside the scope of the image itself
	if (iLeft < xBleed)
	{
		//This means there is a crop disrepancy to the left of the image.
		//Slide the image to the left to compensate for this
		oImage.style.left = (parseInt(oCropper.style.left)-10) + 'px';
	}

	if (iTop < yBleed)
	{
		//There is a crop discrepancy at the top of the image
		//move the image up to compensate
		oImage.style.top = (parseInt(oCropper.style.top)-10) + 'px';
	}
	if (parseInt(oImage.style.left) < (parseInt(oCropper.style.left) - parseInt(oImage.width) + parseInt(oCropper.style.width) + parseInt(xBleed)))
	{
		//There is a crop discrepancy on the right hand side of the image
		//try to slide the image back to an acceptable position
		//left position calculated as cropperleft - imagewidth + cropperwidth + bleed
		oImage.style.left = (parseInt(oCropper.style.left) - parseInt(oImage.width) + parseInt(oCropper.style.width) + parseInt(xBleed)) + 'px';
	}
	if (parseInt(oImage.style.top) < (parseInt(oCropper.style.top) - parseInt(oImage.height) + parseInt(oCropper.style.height) + parseInt(yBleed)))
	{
		//there is a crop discrepancy to the base of the image
		//try to move the image down slightly
		//top position calculated as croppertop - imageheight + cropperheight + bleed
		oImage.style.top = (parseInt(oCropper.style.top) - parseInt(oImage.height) + parseInt(oCropper.style.height) + parseInt(yBleed)) + 'px';
	}

   //make sure the dragger is in place
	oDragger = get('divDragger_' + sPhotoId);

 	oDragger.style.width = oImage.width + 'px';
    oDragger.style.height = oImage.height + 'px';
   	oDragger.style.top = oImage.style.top;
	oDragger.style.left = oImage.style.left;

   //display the zoom level for a bit of fun
   setZoomText(sPhotoId, iRealScale * 100);

   // display a warning if ptinted image will be all pixelated
   oScaleInput = get('hidOrignalImageScale_' + sPhotoId);
   aScaleValue = oScaleInput.value.split('_')

   bWillPixelate = willPixelate(parseInt(oCropper.style.width), parseInt(oCropper.style.height),
		parseFloat(aScaleValue[0]), parseFloat(aScaleValue[1]), iRealScale)

	oMessage = get('pMessage_' + sPhotoId);
	if (bWillPixelate == true){
		oMessage.style.display = 'block';
		oSliderZoom.style.display = "none";
	}else{
		oMessage.style.display = 'none';
		oSliderZoom.style.display = "block";
	}
}

function setZoomText(sPhotoId, nPercent){
   oSliderZoom = get('spnZoomPercent_' + sPhotoId);
   oSliderZoom.innerHTML = parseInt(nPercent) + '%';
}

function onZoomed (sPhotoId){

	setCroppedInformation(sPhotoId);

	var oMooDebug = new MooDebug();
	oMooDebug.info('Photo zoomed ' + sPhotoId);
}

function willPixelate (iCropAreaWidth, iCropAreaHeight, nOriginalRatioWidth, nOriginalRatioHeight, nZoomLevel){

	bReturn = false

	nCroppedWidthPixels = (iCropAreaWidth / nZoomLevel) * nOriginalRatioWidth;
	nCroppedHeightPixels = (iCropAreaHeight / nZoomLevel) * nOriginalRatioHeight;

	if (((nCroppedWidthPixels * nCroppedHeightPixels))  < getMinimimPrintPixels()){
		bReturn = true;
	}

	return bReturn;

}

function getBleedRatioFromLong(){
	return get('hidBleedRatioFromLong').value;
}

function getBleedRatioFromShort(){
	return get('hidBleedRatioFromShort').value;
}

function getBleedPercentLong(){
	return get('hidBleedPercentLong').value;
}

function getBleedPercentShort(){
	return get('hidBleedPercentShort').value;
}

function getMinimimPrintPixels (){
	return get('hidPrintPixelMinimum').value;
}

function rotateCropper (sPhotoId) {

	oMooDebug = new MooDebug();
	oMooDebug.info("Rotating image: " + sPhotoId);

	oImage = get('imgFlickr_' + sPhotoId);
    oImage.style.top=0;
	oImage.style.left=0;
    setupCropper(sPhotoId, true);

    oDragger = get('divDragger_' + sPhotoId);
	oDragger.style.top=0;
	oDragger.style.left=0;

	oCropper = get("divCropper_" + sPhotoId);

    if (parseInt(oCropper.style.width) > parseInt(oCropper.style.height)) {
        centreCropper(sPhotoId, 'p');
    }else{
        centreCropper(sPhotoId, 'l');
    }

	//Swap the preview width and height values
	var iResizeWidth = get('hidResizeWidth_'+sPhotoId).value;
	var iResizeHeight = get('hidResizeHeight_'+sPhotoId).value;
	get('hidResizeWidth_'+sPhotoId).value = iResizeHeight;
	get('hidResizeHeight_'+sPhotoId).value = iResizeWidth;


	//Show any zoom warnings
	showHideZoom(sPhotoId);

	 //save info
	 setCroppedInformation(sPhotoId);

}

function showHideZoom(sPhotoId){

	// display a warning if ptinted image will be all pixelated
   oMessage = get('pMessage_' + sPhotoId);
   oScaleInput = get('hidOrignalImageScale_' + sPhotoId) ;
   aScaleValue = oScaleInput.value.split('_')

   bWillPixelate = 	willPixelate(parseInt(oCropper.style.width), parseInt(oCropper.style.height),
		parseFloat(aScaleValue[0]), parseFloat(aScaleValue[1]), 1)

	if (bWillPixelate == true){
		oMessage.style.display = 'block';
		get("spnZoomPercent_" + sPhotoId).style.display = "none";
	}else{
		oMessage.style.display = 'none';
	}

}

function getImageInfo (sPhotoId){

	aInfo = new Array(3);
    if (oImage.height > oImage.width ){
    	aInfo[1] = 'p';
    }else{
    	aInfo[1] = 'l';
    }

    aDimensions = get('hidImageDimensions_' + sPhotoId).value.split('_');
    aInfo[2] = parseInt(aDimensions[1]);
    aInfo[3] = parseInt(aDimensions[0]);

    return aInfo;

}


function centreCropper (sPhotoId, sOrientation){

	oImage = get('imgFlickr_' + sPhotoId);
    iWidth = 0;
	iHeight = 0;
	iBleedShort = 0;

    aImageInfo = getImageInfo(sPhotoId);

	//Work out orientation if in auto mode
	if (sOrientation == 'a'){
		sOrientation  = aImageInfo[1];
	}

    if (sOrientation=='l'){
		if ((oImage.width / oImage.height) > getBleedRatioFromLong()){
		    iHeightPlusBleed =  aImageInfo[2];
 		    iWidthPlusBleed = (aImageInfo[2] * getBleedRatioFromLong());
	    }else{
		    iWidthPlusBleed = aImageInfo[3];
		    iHeightPlusBleed =  aImageInfo[3] * getBleedRatioFromShort();
        }

		iWidth = iWidthPlusBleed / getBleedPercentLong();
		iHeight = iHeightPlusBleed / getBleedPercentShort();
		iBleedShort = parseInt((iWidthPlusBleed - iWidth) /2);
		iBleedLong = parseInt((iHeightPlusBleed - iHeight) /2);

    }

    if (sOrientation=='p'){
		if ((oImage.width / oImage.height) < getBleedRatioFromShort()){
		    iWidthPlusBleed =  aImageInfo[3];
 		    iHeightPlusBleed = aImageInfo[3] * getBleedRatioFromLong();
	    }else{
		    iHeightPlusBleed = aImageInfo[2];
		    iWidthPlusBleed = aImageInfo[2] * getBleedRatioFromShort();
        }

		iWidth = iWidthPlusBleed / getBleedPercentShort();
    	iHeight = iHeightPlusBleed / getBleedPercentLong();
		iBleedShort = parseInt((iHeightPlusBleed - iHeight) /2);
		iBleedLong = parseInt((iWidthPlusBleed - iWidth) /2);
    }

	//Save the bleed info so we dont have to recalculate later
	get ("hidBleed_" + sPhotoId).value = iBleedLong + "|" + iBleedShort;

	//position cropper
	oCropper = get('divCropper_' + sPhotoId);
	oMask1 = get('divCropperMask1_' + sPhotoId);
	oMask2 = get('divCropperMask2_' + sPhotoId);
	oBleed1 = get('divCropperBleed1_' + sPhotoId);
	oBleed2 = get('divCropperBleed2_' + sPhotoId);
    oCropper.style.height =  parseInt(iHeight) +'px';
    oCropper.style.width = parseInt(iWidth) +'px';

	oCropper.style.top = parseInt(aImageInfo[2] / 2 - (iHeight / 2)) + 'px';
	oCropper.style.left = parseInt(aImageInfo[3] / 2 - (iWidth / 2)) + 'px';

	if (sOrientation == 'l'){
		oMask1.style.height = oCropper.offsetTop + "px";
		oMask1.style.width = parseInt(oCropper.style.width) + (iBorderOffset * 2) + "px" ;
		oMask1.style.top = "0";
		oMask1.style.left = oCropper.offsetLeft + "px";
		oMask2.style.height = (oCropper.offsetTop) + "px";
		oMask2.style.width = parseInt(oCropper.style.width)  + (iBorderOffset * 2) + "px" ;
		oMask2.style.top = oCropper.offsetTop + oCropper.offsetHeight + "px";
		oMask2.style.left = oCropper.offsetLeft + "px";
		oBleed1.style.width = oCropper.offsetLeft + "px";
		oBleed1.style.height = "100%";
		oBleed1.style.left= 0;
		oBleed2.style.height = "100%";
		oBleed2.style.left = parseInt(oCropper.offsetWidth) + oCropper.offsetLeft + "px";
		oBleed2.style.top = 0;
	}

	if (sOrientation == 'p'){
		oMask1.style.height = parseInt(oCropper.style.height)  + (iBorderOffset * 2) + "px";
		oMask1.style.width = oCropper.offsetLeft + "px";
		oMask1.style.top = oCropper.offsetTop + "px";
		oMask1.style.left = "0";
		oMask2.style.height =  parseInt(oCropper.style.height)  + (iBorderOffset * 2) + "px";
		oMask2.style.width = (oCropper.offsetLeft) + 'px';
		oMask2.style.top = oCropper.offsetTop + "px";
		oMask2.style.left = oCropper.offsetLeft + oCropper.offsetWidth + "px";
		oBleed1.style.height = oCropper.offsetTop + "px";
		oBleed1.style.width = aImageInfo[3] + "px";
		oBleed2.style.height = oCropper.offsetHeight + "px";
		oBleed2.style.width = aImageInfo[3] + "px";
		oBleed2.style.top = parseInt(oCropper.offsetHeight) + oCropper.offsetTop + "px";
		oBleed2.style.left = 0;
	}

}

function resetCropper (sPhotoId){

    oImage = get('imgFlickr_' + sPhotoId);
    aImageInfo = getImageInfo(sPhotoId);
    oImage.width = aImageInfo[3];
    oImage.height = aImageInfo[2];
    oImage.style.top=0;
    oImage.style.left=0;
    setupCropper(sPhotoId, true);

    oSliderZoom = get('spnZoomPercent_' + sPhotoId);
    oSliderZoom.innerHTML = '100%';

	oDragger = get('divDragger_' + sPhotoId);
	oDragger.style.width= oImage.width + 'px';
	oDragger.style.height= oImage.height + 'px';
	oDragger.style.top=0;
	oDragger.style.left=0;

//	centreCropper(sPhotoId, 'a');
	showHideZoom(sPhotoId);

}

function dragged (oValue, sPhotoId) {

	oDragger = get('divDragger_' + sPhotoId);
	oCropper = get('divCropper_' + sPhotoId);
	oImage = get('imgFlickr_' + sPhotoId);
    oImage.style.top =  oDragger.style.top;
    oImage.style.left =  oDragger.style.left;
}

function setCroppedInformation (sPhotoId){

	oImage = get('imgFlickr_' + sPhotoId);
	oCropper = get("divCropper_" + sPhotoId);
	oCroppedInfo = get("hidCropped_" + sPhotoId);

	//get values
	iLeft = parseInt(oCropper.style.left) - parseInt(oImage.style.left);
	iTop = parseInt(oCropper.style.top) - parseInt(oImage.style.top);
	iCropperWidth = parseInt(oCropper.style.width);
	iCropperHeight = parseInt(oCropper.style.height);

	//sanity check
	if (iLeft =="NaN"){iLeft = 0}
	if (iTop =="NaN"){iTop = 0}
	if (iCropperWidth =="NaN"){iCropperWidth = 0}
	if (iCropperHeight =="NaN"){iCropperHeight = 0}

	//build string
	sInfo = oImage.id + '|' + oImage.src + '|' + oImage.width + '|' + oImage.height + '|' +
		iLeft + '|' + iTop + '|' + iCropperWidth + '|' + iCropperHeight;

    oCroppedInfo.value = sInfo;

}

function previewCropper (sPhotoId){

	oMooDebug = new MooDebug();
	oMooDebug.info("Preview crop start");

   //Get objects
	oBody = document.getElementsByTagName("body").item(0);
	oImage = get('imgFlickr_' + sPhotoId);
	oCropper = get("divCropper_" + sPhotoId);

  // Get the page size
  aPageSize = getPageSize();

  //Work out orientation
  sOrientation = 'Vertical';
  if (parseInt(oCropper.style.width) > parseInt(oCropper.style.height)){
      sOrientation = 'Horizontal';
  }
  else if (parseInt(oCropper.style.width) == parseInt(oCropper.style.height)){
  	sOrientation = 'Square';
  }
  //Add mask
  oMask = document.createElement('div');
  sId = 'divMask';
  oMask.setAttribute('id',sId);
  oMask.style.height = aPageSize[1] + 'px';
  oMask.style.width = document.body.parentNode.scrollWidth + 'px';
  oBody.insertBefore(oMask, oBody.firstChild);

  //Build preview html
  oPreview = document.createElement('div');
  sId = 'divPreview' + sOrientation;
  oPreview.setAttribute('id',sId);

	//original image
	var sUrl = get('hidOrignalImageUrl_' + sPhotoId).value;
    aScaleValues = get('hidOrignalImageScale_' + sPhotoId).value.split('_');

	//Sizes
	var aImageInfo = getImageInfo(sPhotoId);
	var iZoom = safeInt(oImage.width) / aImageInfo[3];

	var iCropX = ((safeInt(oCropper.style.left) - safeInt(oImage.style.left))/ iZoom) * aScaleValues[1];
	var iCropY = ((safeInt(oCropper.style.top)  - safeInt(oImage.style.top))/iZoom) * aScaleValues[0];
	var iCropWidth = (safeInt(oCropper.style.width) / iZoom)  * aScaleValues[0];
	var iCropHeight = (safeInt(oCropper.style.height) / iZoom) * aScaleValues[1];


	var iResizeWidth = get('hidResizeWidth_'+sPhotoId).value;
	var iResizeHeight = get('hidResizeHeight_'+sPhotoId).value;
	//if (parseInt(oCropper.style.height) >= parseInt(oCropper.style.width)){
 	//	iResizeHeight = 350;
	//	iResizeWidth = 140;
	//}

	var iRotation = safeInt(get('hidOrignalRoteBy_' + sPhotoId).value);

	sPreviewHtml  = '<img id="imgLoading" src="images/loading.gif" /><p id="pDownloadWarning">这将显示您的图象尽可能与完成的印刷质量接近。加载需要一点时间。请稍后….</p><img id="imgPreviewPopup" src = "cropPreviewAction.do?url={url}&crop_w={crop_width}&crop_h={crop_height}&crop_x={crop_x}&crop_y={crop_y}&resize_w={resize_width}&resize_h={resize_height}&r={rotation}"/>' +
		'<div id="divClose"><a id="aClosePreview" href="javascript:closePreview(' +  "'{id}'"  + ');">Close</a></div>';
	sPreviewHtml = sPreviewHtml.replace("{url}", sUrl).replace("{id}", sId).replace("{crop_x}", iCropX).replace("{crop_y}", iCropY)
	sPreviewHtml = sPreviewHtml.replace("{crop_width}", iCropWidth).replace("{crop_height}", iCropHeight);
	sPreviewHtml = sPreviewHtml.replace("{resize_width}", iResizeWidth).replace("{resize_height}", iResizeHeight);
	sPreviewHtml = sPreviewHtml.replace("{rotation}", iRotation)

	oPreview.innerHTML = sPreviewHtml;

//Position the preview
  iPageWidth = oBody.scrollWidth;
  iCardWidth = 376;
  if (sOrientation == 'Vertical'){
	  var iCardWidth = 157;
  }

  iScrollTop = document.body.parentNode.scrollTop;
  if (iScrollTop == 0){
	iScrollTop = document.body.scrollTop; //safari fix
  }

  oPreview.style.left = parseInt((iPageWidth/2) - (iCardWidth/2)) + 'px';
  oPreview.style.top = iScrollTop + 100 + 'px';
  oBody.insertBefore(oPreview, oBody.firstChild);

	//set focus
	setFocus('aClosePreview');

}

function closePreview(sPreviewId){
   oBody = document.getElementsByTagName("body").item(0);
   oPreview = get(sPreviewId);
   oMask = get('divMask');
   oBody.removeChild(oPreview);
   oBody.removeChild(oMask);

   oMooDebug = new MooDebug();
   oMooDebug.info("Preview crop end");
}

function clearDragHints(){
  aCroppers = document.getElementsByClassName('cropper');
  for (ii=0; ii < aCroppers.length; ii++) {
     aCroppers[ii].innerHTML = '';
  }
}

function returnToPicker(){

	get("hidReturnToPicker").value= "1";
	saveCroppers(false);

}

function saveCroppers (bCheckImages) {

	//if we have some images still selected postback
	var aCheckboxes = document.getElementsByClassName('ignorecheck');
	var iImageCount =  getElementsByClass('imageframeandcontrols').length;
	var iIgnoreCount = 0;
	if(aCheckboxes.length > 0){
		for (var i=0; i < aCheckboxes.length; i++) {
			if(aCheckboxes[i].checked ==  true){
				iIgnoreCount ++;
			}
		}
	}

	if(iIgnoreCount < iImageCount || bCheckImages != true){
		var sPostback = "";
		var aCropperInfo = document.getElementsByClassName('croppedinput');

		for (var i=0; i < aCropperInfo.length; i++) {
			sPostback += (aCropperInfo[i].value);
			if (i < aCropperInfo.length -1){
				sPostback += ",";
			}
		}

		get("hidPostbackData").value = sPostback;

	    var oForm
	    oForm = get('frmStage3');
	    postBackForm('frmStage3');
	}else{
		alert('不使用任何选择的图片，返回上一步重新选择.');
	}

}

function hideCropperPhoto(sPhotoId){

	//Get the div with the checkbox checked and either hide or show it
	//depending on previous status
	var oCheckbox = get('chkIgnore_' + sPhotoId);
	var oCropperPhoto = get('divPhotoMask_'+sPhotoId);

	if (oCheckbox.checked == true){
		oCropperPhoto.style.display = 'block';
	}else{
		oCropperPhoto.style.display = 'none';
	}

	//Get all the cards the user has on this page.
	//This include all those that have been dropped, so we still need to distinguish
	var aCards = getElementsByClass('imageframeandcontrols');

	//create arrays for those cards that have been deselected and those that remain selected
	var aSelectedCards = new Array();
	var aUnselectedCards = new Array();

	//Populate these arrays depending on display status as dealt with above
	for (var i = 0; i< aCards.length; i++){
		var oCard = aCards[i];

		var iId = oCard.id.substring(22, oCard.id.length);
		var oPhotoMask = get('divPhotoMask_'+iId);
		if (oPhotoMask.style.display == 'none'){
			aSelectedCards[aSelectedCards.length] = iId;
		}else{
			aUnselectedCards[aUnselectedCards.length] = iId;
		}
	}

	//calculate the number of each card for displaying to the user
	var iCardCount = get('hidPackSize').value;
	var iNumOfEach = Math.floor(iCardCount / aSelectedCards.length);
	var iRemander = iCardCount - (iNumOfEach * aSelectedCards.length);

	//update the visual display for the user.  Cos we're helpful like that!
	//First the numbers of cards that they are getting
	for (var i = 0; i<aSelectedCards.length; i++){
		oQuantity = get('spnQuantity_' + aSelectedCards[i]);
		if (i < iRemander){
			oQuantity.innerHTML = '<strong>'+(iNumOfEach+1)+'</strong>';
		}else{
			oQuantity.innerHTML = '<strong>'+ iNumOfEach+'</strong>';
		}
	}
	//Now reassure them that they are getting none of the ones they deselected
	for (var i = 0; i<aUnselectedCards.length; i++){
		oQuantity = get('spnQuantity_'+aUnselectedCards[i]);
		oQuantity.innerHTML = '<strong>0</strong>';
	}
	}

	//This method is called only when we have had to remove some of the user's images on the sly
	//and thus have to update the display
function calculateQuantities()
{
		//Get all the cards the user has on this page.
		//All cards are selected as this is run before user does anything
		var aCards = getElementsByClass('imageframeandcontrols');
		var aSelectedCards = new Array();

		for (var i = 0; i< aCards.length; i++){
			var oCard = aCards[i];
			var iId = oCard.id.substring(22, oCard.id.length);
			aSelectedCards[aSelectedCards.length] = iId;
		}

		//calculate the number of each card for displaying to the user
		var iCardCount = get('hidPackSize').value;
		var iNumOfEach = Math.floor(iCardCount / aSelectedCards.length);
		var iRemander = iCardCount - (iNumOfEach * aSelectedCards.length);

		//update the visual display for the user.  Cos we're helpful like that!
		//First the numbers of cards that they are getting
		for (var i = 0; i<aSelectedCards.length; i++){
		oQuantity = get('spnQuantity_' + aSelectedCards[i]);
		if (i < iRemander){
			oQuantity.innerHTML = '<strong>'+(iNumOfEach+1)+'</strong>';
		}else{
			oQuantity.innerHTML = '<strong>'+ iNumOfEach+'</strong>';
		}
	}

}

function calculateQuantitiespost()
	{
		//Get all the cards the user has on this page.
		//All cards are selected as this is run before user does anything
		var aCards = getElementsByClass('imageframeandcontrols');
		var aSelectedCards = new Array();

		for (var i = 0; i< aCards.length; i++){
			var oCard = aCards[i];
			var iId = oCard.id.substring(22, oCard.id.length);
			aSelectedCards[aSelectedCards.length] = iId;
		}

		//calculate the number of each card for displaying to the user
		var iCardCount = 12;
		var iNumOfEach = Math.floor((iCardCount) / aSelectedCards.length);
		var iRemander = iCardCount - (iNumOfEach * aSelectedCards.length);

		//update the visual display for the user.  Cos we're helpful like that!
		//First the numbers of cards that they are getting
		for (var i = 0; i<aSelectedCards.length; i++){
		oQuantity = get('spnQuantity_' + aSelectedCards[i]);
		if (i < iRemander){
			oQuantity.innerHTML = '<strong>'+(iNumOfEach+1)+'</strong>';
		}else{
			oQuantity.innerHTML = '<strong>'+ iNumOfEach+'</strong>';
		}
	}

}

function calculateQuantitiesmini()
	{
		//Get all the cards the user has on this page.
		//All cards are selected as this is run before user does anything
		var aCards = getElementsByClass('imageframeandcontrols');
		var aSelectedCards = new Array();

		for (var i = 0; i< aCards.length; i++){
			var oCard = aCards[i];
			var iId = oCard.id.substring(22, oCard.id.length);
			aSelectedCards[aSelectedCards.length] = iId;
		}

		//calculate the number of each card for displaying to the user
		var iCardCount = 100;
		var iNumOfEach = Math.floor((iCardCount) / aSelectedCards.length);
		var iRemander = iCardCount - (iNumOfEach * aSelectedCards.length);

		//update the visual display for the user.  Cos we're helpful like that!
		//First the numbers of cards that they are getting
		for (var i = 0; i<aSelectedCards.length; i++){
		oQuantity = get('spnQuantity_' + aSelectedCards[i]);
		if (i < iRemander){
			oQuantity.innerHTML = '<strong>'+(iNumOfEach+1)+'</strong>';
		}else{
			oQuantity.innerHTML = '<strong>'+ iNumOfEach+'</strong>';
		}
	}

}