var canvasWidth = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
var canvasHeight = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
   
//container width/height - default assumed
var containerWidth = 1600;
var containerHeight = 575;
var containerX = 0;
var containerY = 0;

//standard model image width for calculation
var modelWidth = 129;

//horizontal space between two models
var imageSpace = 0;

//Total models to be shown during preview
var modelsOnDisplay = 5;
//totalModels
var totalModels = 0;
//standard preview positions
var stdPos = new Array(modelsOnDisplay + 2);
//real preview position of all models
var drawPos;
var invalidPosition = -1000;
var startIndex = 0;
var endIndex = 0;
var displacement = 0;
var tweenRatio = 3;
var animation = false;
var lastIndex = 0;
var otherIndex = 0;
var showCount = 0;
var maxHeight = 0;


function prepareStage(myContainerX, myContainerY, myContainerWidth, myContainerHeight, centerAlign) {
    totalModels = document.getElementById("items").value;
    if(totalModels < modelsOnDisplay && centerAlign) {
        modelsOnDisplay  = totalModels;
        showCount = modelsOnDisplay;
    }
    else if(totalModels < modelsOnDisplay && !centerAlign) {
        showCount = totalModels;
    }
    else {
        showCount = modelsOnDisplay;
    }
    containerX = myContainerX;
    containerY = myContainerY;
    containerWidth = myContainerWidth;
    containerHeight = myContainerHeight;
    imageSpace = (containerWidth - (modelWidth * modelsOnDisplay)) / modelsOnDisplay;
    
    //set standard positions for display
    var startX = containerX - ((imageSpace >> 1) + (modelWidth >> 1));
    for(var i = 0; i < stdPos.length; i++) {
        stdPos[i] = startX;
        startX += (imageSpace + modelWidth);
    }
    drawPos = new Array(totalModels);
    getMaxHeight();
    setBaseImages();
    drawBaseImages();
    //drawArrows();
    startIndex = 0;
    endIndex = modelsOnDisplay - 1;
    lastIndex = totalModels - 1;
}


function getMaxHeight() {
    for(var i = 0; i < totalModels; i++) {
        var img = document.getElementById("item" + i);
        if(img.height > maxHeight) maxHeight = img.height;
    }
    //alert("MaxHeight: " + maxHeight);
}

/*
function drawArrows() {
    var imgR = document.getElementById("right");
    drawImage(imgR, canvasWidth - imgR.width, (canvasHeight >> 1) - (imgR.height >> 1));
    var imgL = document.getElementById("left");
    drawImage(imgL, 0, (canvasHeight >> 1) - (imgL.height >> 1));
}
*/

function setBaseImages() {
    for(var i = 0; i < totalModels; i++) {
        if(i < modelsOnDisplay) {
            drawPos[i] = stdPos[i + 1];
        }
        else {
            drawPos[i] = invalidPosition;
        }
    }
}


function drawBaseImages() {
    for(var i = 0; i < showCount; i++) {
        var img = document.getElementById("item" + i);
        var x = stdPos[i + 1];
        var y = containerY + (containerHeight >> 1);
        drawImageAtCenter(img, x, y);
    }
}


//draws an image at the specified absolute x and y positions with center align
   function drawImageAtCenter(img, x, y) {
        x -= (img.width / 2);
        y += (maxHeight / 2);
        var drawY = (y - img.height);
        //alert(drawY);
        controlDisplay(img, x, drawY); 
        img.style.left= x + "px";     
        img.style.top = drawY + "px";
   }
   
   //draws an image at the specified absolute x and y positions
   function drawImage(img, x, y) {
        img.style.left= x + "px";     
        img.style.top = y + "px";
   }
   
   
//controls the display of an image object, if goes outside of container area then it's clipped
   function controlDisplay(img, x, y) {
        var clipX = 0;
        var clipY = 0;
        var clipWidth = 0;
        var clipHeight = 0;
        var imgX = x;
        var imgY = y;
        
        //x and width
        if(imgX < containerX && (imgX + img.width) >= containerX) {
            clipX = containerX - imgX;
            clipWidth = ((imgX + img.width) - containerX);
			if(clipWidth < 10) clipWidth = 0;
        }
        else if((imgX + img.width) > (containerX + containerWidth) && imgX <= (containerX + containerWidth)) {
            clipWidth = ((containerX + containerWidth) - imgX);
        }
        else if(imgX > containerX && (imgX + img.width) < (containerX + containerWidth)) {
            clipWidth = img.width;
        }
        //y and height
        if(imgY < containerY && (imgY + img.height) >= containerY) {
            clipY = containerY - imgY;
            clipHeight = (imgY + img.height) - containerY;
        }
        else if((imgY + img.height) > (containerY + containerHeight) && imgY <= (containerY + containerHeight)) {
            clipHeight = (imgY + img.height) - (containerY + containerHeight);
        }
        else if(imgY > containerY && (imgY + img.height) < (containerY + containerHeight)) {
            clipHeight = img.height;
        }
        setClip(img, clipX, clipY, clipWidth, clipHeight);
   }
   
   //clips the object region specified
   function setClip(img, x, y, width, height) {
        //clips region with top, right, bottom, left
        img.style.clip = "rect(" + y + "px " + (x + width) + "px " + (y + height) + "px " + x + "px)";
   }
   
   
   function moveRight() {
       if(animation || totalModels <= modelsOnDisplay) return;
       animation = true;
       otherIndex = startIndex - 1;
       if(otherIndex < 0) {
          otherIndex = lastIndex;
       }
       //alert("startIndex: " + startIndex + " endIndex: " + endIndex + " otherIndex: " + otherIndex);
       drawPos[otherIndex] = stdPos[0];
       //alert("other image pos: " + drawPos[otherIndex]);
       displacement = imageSpace + modelWidth;
       timer = setInterval("moveImagesRight()",50);
   }
   
   
   function moveImagesRight() {
         var rate = displacement / tweenRatio;
         displacement -= rate;
         var sIndex = otherIndex;
         //for(var i = 0; i < (modelsOnDisplay + 1); i++) {
		  for(var i = 0; i < totalModels - 1; i++) {
             drawPos[sIndex] += rate;
             //draw Images now..
             var img = document.getElementById("item" + sIndex);
             var x = drawPos[sIndex];
             var y = containerY + (containerHeight >> 1);
             drawImageAtCenter(img, x, y);
             //
             sIndex++;
             if(sIndex > lastIndex)sIndex = 0;
         }
         if(displacement < 2) {
            clearInterval(timer);
            animation = false;
            startIndex -= 1;
            if(startIndex < 0) startIndex = lastIndex;
            endIndex -= 1;
            if(endIndex < 0) endIndex = lastIndex;
            resetCoordinates();
         }
   }
   
   
   function moveLeft() {
       if(animation || totalModels <= modelsOnDisplay) return;
       animation = true;
       otherIndex = endIndex + 1;
       if(otherIndex > lastIndex) {
          otherIndex = 0;
       }
       //alert("startIndex: " + startIndex + " endIndex: " + endIndex + " otherIndex: " + otherIndex);
       drawPos[otherIndex] = stdPos[stdPos.length - 1];
       //alert("other image pos: " + drawPos[otherIndex]);
       displacement = imageSpace + modelWidth;
       timer = setInterval("moveImagesLeft()",50);
   }
  
  
  function moveImagesLeft() {
     var rate = displacement / tweenRatio;
     displacement -= rate;
     var sIndex = startIndex;
     //for(var i = 0; i < (modelsOnDisplay + 1); i++) {
     for(var i = 0; i < totalModels - 1; i++) {
         drawPos[sIndex] -= rate;
         //draw Images now..
         var img = document.getElementById("item" + sIndex);
         var x = drawPos[sIndex];
         var y = containerY + (containerHeight >> 1);
         drawImageAtCenter(img, x, y);
         //
         sIndex++;
         if(sIndex > lastIndex)sIndex = 0;
     }
     if(displacement < 2) {
        clearInterval(timer);
        animation = false;
        startIndex += 1;
        if(startIndex > lastIndex) startIndex = 0;
        endIndex += 1;
        if(endIndex > lastIndex) endIndex = 0;
        resetCoordinates();
     }
  }
  
  function resetCoordinates() {
     var sIndex = startIndex;
     for(var i = 0; i < modelsOnDisplay; i++) {
        drawPos[sIndex] = stdPos[i + 1];
        //draw Images now..
        var img = document.getElementById("item" + sIndex);
        var x = drawPos[sIndex];
        var y = containerY + (containerHeight >> 1);
        drawImageAtCenter(img, x, y);
        //
        sIndex++;
        if(sIndex > lastIndex) sIndex = 0;
     }
  }