gallery last image fix - actionscript-3

Question

I almost have this thing the way I want it except when I'm clicking forward or backwards through my images, once it hits the array length, the next images doesn't show. It is only an issue when I add the checkImage() method. Anyone see what I have wrong?
fix**
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenMax;
import com.greensock.layout.*;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.ImageLoader;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.loading.data.XMLLoaderVars;
public class Main extends MovieClip
{
public var imgHolder:MovieClip;
private var ls:LiquidStage;
private var la:LiquidArea;
private var xml:XMLLoader;
private var index:int = 0;
private var images:Array;
public function Main()
{
arrowRight.alpha = arrowLeft.alpha = .5;
xmlLoader();
}
private function xmlLoader():void
{
LoaderMax.activate([ImageLoader]);
xml = new XMLLoader("assets/data.xml", new XMLLoaderVars()
.name("loader")
.estimatedBytes(600000)
.onComplete(xmlLoaded)
.onProgress(loadProgress));
xml.load();
}
private function xmlLoaded(e:LoaderEvent):void
{
trace("Loaded");
arrowListeners();
showImage(index);
}
private function loadProgress(event:LoaderEvent):void
{
progressMC.progressBar.scaleX = event.target.progress;
}
private function showImage(index:int):void
{
ls = new LiquidStage(this.stage, 1024, 768, 1024, 768);
la = new LiquidArea(imgHolder, 0, 0, 1024, 768);
images = LoaderMax.getContent("loader");
imgHolder.addChild(images[index]);
TweenMax.from(images[index], 1, {alpha:0});
la.attach(images[index], {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});
}
// BUTTON FUNCTIONS
private function arrowListeners():void
{
arrowRight.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true);
arrowRight.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true);
arrowRight.addEventListener( MouseEvent.CLICK, showNext );
arrowLeft.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true);
arrowLeft.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true);
arrowLeft.addEventListener( MouseEvent.CLICK, showPrev );
}
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:.5});
}
// CLICK LISTENERS
private function showNext( e:MouseEvent ):void
{
index++
if (index > images.length - 1)
{
index = 0;
}
showImage(index);
}
private function showPrev( e:MouseEvent ):void
{
index--
if (index < 0)
{
index = images.length - 1;
}
showImage(index);
}
}
}

Answer 1

Several things come to mind:
1) index is a global variable and a function param - conflicting?
2) in the checkimage function you pass in 'index' but refer to 0 in getChildAt and RemoveChildAt
3) you don't call showimage in checkimage if the numchildren > 0 is true
I'd want to trace into all of this to sort it out.