<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
	borderColor="{isSeleted ? SELECTED_COLOR : MOUSE_OUT_COLOR}"
	click="itemClickHandler()"
	mouseOver="mouseOverHandler()"
	mouseOut="mouseOutHandler()">
	<mx:Script>
		<![CDATA[
			import com.model.WebExamModelLocator;
			import mx.core.BitmapAsset;
			[Bindable]
			public var source:BitmapAsset = new BitmapAsset();
			[Bindable]
			public var isSeleted:Boolean = false;
			public var index:Number;
			[Bindable]
			public var model:WebExamModelLocator = WebExamModelLocator.getInstance();
			// Yeqi 2008-9-1: const variable for different background color.
			// to do: set the proper color for different states..
			private static const SELECTED_COLOR:Number = 0xFF0000;
			private static const MOUSE_OVER_COLOR:Number = 0xFF0000;
			private static const MOUSE_OUT_COLOR:Number = 0x808080;
			
			private function itemClickHandler():void
			{
				//model.selectedPeople = this.data as User;
				model.selectedThumb = this.source;
				model.currentPageIndex = index;
			}
			
			private function mouseOverHandler():void
			{
				if(!isSeleted)
					//this.setStyle("backgroundColor", MOUSE_OVER_COLOR);
					this.setStyle("borderColor", MOUSE_OVER_COLOR);
			}
			
			private function mouseOutHandler():void
			{
				if(!isSeleted)
					//this.setStyle("backgroundColor", MOUSE_OUT_COLOR);
					this.setStyle("borderColor", MOUSE_OUT_COLOR);
			}
		]]>
	</mx:Script>
	<mx:Binding source="model.selectedThumb==this.source" destination="this.isSeleted"/>
	<mx:Image source="{source}"/>
</mx:Canvas>