var newImg, oNewImg, imageHolder, currentImage, currentAnim, resizeTween;
  var maxWidth,  maxHeight;
  function setMaxDimensions(width, height)
  {
    maxWidth = width;
    maxHeight = height;
  }
  function setDimensions()
  {
//    maxWidth = 640;
//    maxHeight = 500;

    // get original width & height
    var height = oNewImg.height,
      width = oNewImg.width;
    
    if (width > height && width > maxWidth) {
      // width is too big, make it the max size
      newImg[0].width = maxWidth;
      // reduce the height proportionally
      newImg[0].height = Math.floor(height * (maxWidth / width));
    } else if (height > maxHeight) {
      // height is too big, make it the max size
      newImg[0].height = maxHeight;
      // reduce width proportionally
      newImg[0].width = Math.floor(width * (maxHeight / height));
    }
    else
    {
      newImg[0].width = oNewImg.width; 
      newImg[0].height = oNewImg.height;
    }
  }

  /*
   Create an animation to resize the box to a new size
  */
  function createResizeAnim(width, height) {
    newImg.show();
    // get the current dimentions
    var currentWidth = parseInt( imageHolder.css("width") ),
      currentHeight = parseInt( imageHolder.css("height") ),
      // get the maximum change (width|height) for the box
      maxChange = Math.max(Math.abs(width - currentWidth), Math.abs(height - currentHeight)),
      // work out a duration for the animation (so bigger changes take longer)
      duration = Math.max((maxChange * maxChange) / (300 * 300), 0.5);

    // create an animation for the width and height
    var sizeAnim = glow.anim.css(imageHolder, duration, {
      width: width,
      height: height
    }, {
      tween: resizeTween
    });

    // animation the position of the outer element to keep it in the center
    var positionAnim = glow.anim.css(this.outerElement, duration, {
      top: this.origTop - ((height - this.origHeight)/2),
      left: this.origLeft - ((width - this.origWidth)/2)
    }, {
      tween: resizeTween
    });

    // combine both animations and return
    return new glow.anim.Timeline([
      [sizeAnim],
      [positionAnim]
    ]);

  }

  function showImage(nCtr)
  {
    newImg.hide();
       
    oNewImg = new Image() ;
    oNewImg.src = "uploaded/" + imagesArr[nCtr];     
    newImg[0].src = oNewImg.src;
  }

  function imageInit(nCarouselSize, nCarouselStep, nMaxWidth, nMaxHeight)
  {
    setMaxDimensions(nMaxWidth, nMaxHeight );
    resizeTween = glow.tweens.combine(glow.tweens.easeIn(5), glow.tweens.overshootOut(3))
    var carousel = new glow.widgets.Carousel("#carousel", {
      animDuration: 1,
      loop: true,
      size: nCarouselSize,
      step: nCarouselStep,
      className: "flickrCarousel"
    });

    glow.events.addListener(carousel, "itemClick", function(event) {
       showImage(event.itemIndex);
    });

    imageHolder = glow.dom.get(".slideshowImgHolder");

    newImg = glow.dom.get("#imgHolderId");

    glow.events.addListener(newImg, "load", function() {      
      setDimensions();
      createResizeAnim(oNewImg.width, oNewImg.height);
    });    
  }