var divs = new Array();
 	    var points = new Array();
	    //var img = new Array("images/gallery/1988-softail-black-gal.jpg","images/gallery/1991-heritage-softail-stock-gal.jpg","images/gallery/1978-shovelhead-bobber.jpg","images/gallery/example-custom_bike4.jpg","images/gallery/example-custom_bike5.jpg","images/gallery/example-custom_bike6.jpg","images/gallery/example-custom_bike7.jpg","images/gallery/example-custom_bike8.jpg");
	    //var imgMed = new Array("images/gallery/1988-softail-black-med.jpg","images/gallery/1991-heritage-softail-stock-med.jpg","images/gallery/1978-shovelhead-bobber-med.jpg","images/gallery/example-custom_bike4.jpg","images/gallery/example-custom_bike5.jpg","images/gallery/example-custom_bike6.jpg","images/gallery/example-custom_bike7.jpg","images/gallery/example-custom_bike8.jpg");
  	    var baseWidth = 300;
  	    var baseHeight = 200;
  	    var sizeRatio = 100;
  	    var shiftPos = 0;
  	    //var amountDivs = 3;
  	    var innerSteps = 5;
  	    var globShiftItem = 0;
  	    var totalShifted = 0;

		/*if (innerSteps >= amountDivs) {
			innerSteps = amountDivs -1;
			if (innerSteps < 0 ){
			  innerSteps = 0;
			}
		}*/

function Point(X, Y) {
    this.X = X;
    this.Y = Y;
}

		/*
		* This functions returns an array containing 36 points to draw an
		* ellipse.
		*
		* @param x {double} X coordinate
		* @param y {double} Y coordinate
		* @param a {double} Semimajor axis
		* @param b {double} Semiminor axis
		* @param angle {double} Angle of the ellipse
		*/
		function calculateEllipse(x, y, a, b, angle, steps)
		{
		  if (steps == null){
		    steps = 36;
		  }

		  var beta = -angle / 180 * Math.PI;
		  var sinbeta = Math.sin(beta);
		  var cosbeta = Math.cos(beta);
		  var j = 0;

		  for (var i = 0; i < 360; i += 360 / steps)
		  {
		    var alpha = i / 180 * Math.PI;
		    var sinalpha = Math.sin(alpha);
		    var cosalpha = Math.cos(alpha);

		    var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
		    var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);

		    points[j] = new Point(X, Y);
		    //document.writeln(i + ": " + points[j].X + " / " +  points[j].Y + "<br />");
		    j++;
		   }
		  //document.writeln(points.length  + "<br />");
		  //return points;
		}

		function prepareWindow(){

		  var currentDivs = null;
		  var currentImg = null;
		  var container = document.getElementById("gallery");
		  //var redcolor = Math.floor(Math.random( ) * (255));
		  //var greencolor = Math.floor(Math.random( ) * (255));
		  //var bluecolor = Math.floor(Math.random( ) * (255));
		  var widthDisplay = container.clientWidth;
		  var heightDisplay = container.clientHeight;
		  
		  calculateEllipse((heightDisplay/2|0)-100,(widthDisplay/2|0)-(baseWidth/2), (heightDisplay/4), (widthDisplay/4) + 70, Math.PI / 2, amountDivs * innerSteps );

		  for (var i=0; i < amountDivs; i++){

		  	currentDivs = document.createElement("DIV");
		  	currentDivs.style.position = "absolute";
		  	currentDivs.style.border = "1px solid #000000";
			currentDivs.style.top = points[i*innerSteps].X;
			currentDivs.style.left = points[i*innerSteps].Y;
			currentDivs.id = "item_" + i;
			if (i <= amountDivs / 2){
				currentDivs.style.zIndex =  2 * amountDivs - i;
				if (i != 0 ){
					sizeRatio = sizeRatio - (100/amountDivs);
				}
			}else{
				currentDivs.style.zIndex = i;
				sizeRatio = sizeRatio + (100/amountDivs);
			}

			currentDivs.style.width = (baseWidth * sizeRatio / 100) + "px";
			currentDivs.style.height = (baseHeight * sizeRatio / 100) + "px";
			//currentDivs.style.backgroundColor = "rgb(" + redcolor + "," + greencolor + "," + bluecolor + ")";
			currentDivs.style.backgroundColor = "#E2E2E2";
			currentLink = document.createElement("A");
			currentLink.href = "galleryitem.php?item=" + i;
			currentLink.style.border = "0px solid #000000";
			currentImg = document.createElement("IMG");
			currentImg.style.width = "100%";
			currentImg.style.height = "100%";
			currentImg.src = img[i];
			currentImg.style.border = "0px solid #000000";
			currentLink.appendChild(currentImg);
			currentDivs.appendChild(currentLink);
			container.appendChild(currentDivs);
			  //redcolor = Math.floor(Math.random( ) * (255));
			  //greencolor = Math.floor(Math.random( ) * (255));
			  //bluecolor = Math.floor(Math.random( ) * (255));
		  }

		}

		function startAnimateRefresh(shiftItem){
		  globShiftItem = shiftItem;
		  totalShifted = 0;
		  animateRefresh();
		}
		function animateRefresh(){
			refreshWindow(globShiftItem);
			totalShifted++;
			if (totalShifted < innerSteps){
			  window.setTimeout(animateRefresh, 30);
			}
		}
		function refreshWindow(shiftItem){

		  if (!shiftItem){
		    shiftItem = globShiftItem;
		  }
		  var currentDivs = null;
 		  var newIndex = 0;

		  shiftPos = shiftPos + shiftItem;

		  sizeRatio = 100;
		  currentDivId = -1;

		  for (var i=0; i < amountDivs * innerSteps; i++){

			if (currentDivId != ((i/innerSteps)|0)){

				currentDivId = ((i/innerSteps)|0);

				currentDivs = document.getElementById("item_" + currentDivId);

				newIndex = 	(( ((currentDivId*innerSteps) + shiftPos) % (amountDivs * innerSteps) )<0? ((amountDivs * innerSteps)+( ((currentDivId*innerSteps) + shiftPos) % (amountDivs * innerSteps) )):( ((currentDivId*innerSteps) + shiftPos) % (amountDivs * innerSteps) ));

				currentDivs.style.top = points[newIndex].X;
				currentDivs.style.left = points[newIndex].Y;

				if (newIndex <= (amountDivs*innerSteps) / 2){
					currentDivs.style.zIndex =  2 * (amountDivs * innerSteps) - newIndex;
						sizeRatio = 100 - (100/(amountDivs * innerSteps)) * newIndex;
				}else{
					currentDivs.style.zIndex = newIndex;
					sizeRatio = (100/(amountDivs * innerSteps)) * newIndex;
				}
				currentDivs.style.width = (baseWidth * sizeRatio / 100) + "px";
				currentDivs.style.height = (baseHeight * sizeRatio / 100) + "px";
			}

		  }

		}
	function displayGalleryItem(imgId){
	//alert(imgId);
		  var container = document.getElementById("gallery");
			var heightDimension = container.clientHeight;
			container.style.textAlign="left";
			currentImg = document.createElement("IMG");
			
			currentImg.style.width = heightDimension * 640/430 + "px";
			currentImg.style.height = heightDimension + "px";
			currentImg.src = imgMed[imgId];
			currentImg.style.border = "0px solid #000000";
			container.appendChild(currentImg);
			currentDiv = document.createElement("DIV");
			currentDiv.style.width = container.clientWidth - (heightDimension * 640/430) + "px";
			currentDiv.style.height = heightDimension + "px";
			currentDiv.style.border = "1px solid #000000";
			currentDiv.style.overflow = "auto";
			var currentText = transformContent("details/bike-" + imgId + ".php", "details/all.xsl", null, null);			
			currentDiv.innerHTML = currentText;
			container.appendChild(currentDiv);
			
			
	}
	
	function showBit(itemBitId){
		//alert(itemBitId + " " + imgBits[itemBitId - 1 ]);
		var displayWindow = document.getElementById("detailWindow");
		var displayWindowImg = document.getElementById("detailWindowImg");
		displayWindowImg.src = imgBits[itemBitId - 1];
		displayWindow.style.visibility= 'visible';
		
	}

	function hideBit(itemBitId){
		var displayWindow = document.getElementById("detailWindow");
		displayWindow.style.visibility= 'hidden';		
	}