LoaderMax image resize - actionscript-3

Question

I am trying to load xml images using LoaderMax and resize them using LiquidArea. When I try to load in a different image with resize using next or thumbnails, I get a weird error I can't understand. I was not able to get help so I've come here. The error message and code can be seen below.
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/addChildAt()
at com.greensock.layout::AutoFitArea/set preview()
at com.greensock.layout.core::LiquidData/refreshLevel()
at com.greensock.layout::LiquidStage/refreshLevels()
at com.greensock.layout.core::LiquidData$/addCacheData()
at com.greensock.layout::LiquidArea/pinCorners()
at com.greensock.layout::LiquidArea/autoPinCorners()
at com.greensock.layout::LiquidArea()
at Main/loadImage()
at Function/<anonymous>()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at com.greensock.core::TweenCore/complete()
at com.greensock::TweenMax/complete()
at com.greensock::TweenMax/renderTime()
at com.greensock.core::SimpleTimeline/renderTime()
at com.greensock::TweenLite$/updateAll()
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.DisplayObject;
import com.greensock.TweenMax;
import com.greensock.layout.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;
public class Main extends MovieClip
{
private static const THUMB_WIDTH:Number = 100;
private static const THUMB_HEIGHT:Number = 64;
private static const IMAGE_WIDTH:Number = 550;
private static const IMAGE_HEIGHT:Number = 355;
private var ls:LiquidStage;
private var la:LiquidArea;
private var xImgList:XMLList;
public var arrowRight:MovieClip;
public var arrowLeft:MovieClip;
private var currentImage:String;
private var image:ImageLoader;
private var index:Number = 0;
public function Main()
{
// load in xml
var xPhotography:XMLLoader = new XMLLoader("assets/data.xml");
xPhotography.addEventListener( LoaderEvent.COMPLETE, xmlLoaded );
xPhotography.load();
arrowRight.alpha = arrowLeft.alpha = 0;
arrowRight.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true);
arrowRight.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true);
arrowRight.addEventListener( MouseEvent.CLICK, onArrowClick );
arrowLeft.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true);
arrowLeft.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true);
arrowLeft.addEventListener( MouseEvent.CLICK, onArrowClick );
}
private function xmlLoaded( e:LoaderEvent ):void
{
var xData:XML = e.target.content;// get copy of xml
xImgList = new XMLList(xData.image);// grabbing xml image nodes
loadImage( 0 );
}
// load in the image
private function loadImage( index: Number ):void
{
ls = new LiquidStage(this.stage,550,419);
la = new LiquidArea(imgContainer, 0, 0, 550, 419);
var file:String = xImgList[index]. # url;
var image:ImageLoader = new ImageLoader("assets/images/" + file, new ImageLoaderVars()
.container( imgContainer )
.x(0)
.y(0)
.alpha( 0 )
.width( IMAGE_WIDTH )
.height( IMAGE_HEIGHT )
.onComplete(completeHandler)
.scaleMode( "proportionalOutside" )
);
image.load();
la.attach(image.content, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});
}
private function completeHandler(event:LoaderEvent):void
{
TweenMax.to(event.target.content, 1.5, {alpha:1});
}
private function rollOverArrowHandler(e:MouseEvent):void
{
TweenMax.to(e.currentTarget, 0.5, {alpha:1});
}
private function rollOutArrowHandler(e:MouseEvent):void
{
TweenMax.to(e.currentTarget, 0.5, {alpha:0});
}
private function onArrowClick( e:MouseEvent ):void
{
switch (e.target)
{
case arrowRight :
index++;
break;
case arrowLeft :
index--;
break;
}
if (index == xImgList.length())
{
index = 0;
} else if (index < 0)
{
index = xImgList.length() - 1;
}
checkOldImage( index );// needed to help loading times
}
private function checkOldImage( index:Number ):void
{
var oldClip:DisplayObject = imgContainer.getChildAt( 0 );
var nextIndex = index;
TweenMax.to( oldClip, .5, { autoAlpha: 0, onComplete: completeFadeHandler, onCompleteParams:[oldClip] } );
function completeFadeHandler(child:DisplayObject):void {
if (child.parent) {
child.parent.removeChild(child);
}
loadImage(nextIndex);
}
}
}
}