function FilmRollPager(pagerID)
{
	// private attributes
	this._images = new Array();
	this._slots = new Array();
	this._selectedImageIndex = 0;
	this._pagerID = pagerID;
	
	// public properties
	this.OnImageSelect = new Event();
	this.OnImageClick = new Event();
	
	// private methods
	this.CreateImages = FilmRollPager_CreateImages;
	this.CreateImage = FilmRollPager_CreateImage;
	this.CreateMarker = FilmRollPager_CreateMarker;
	this.PrevImage = FilmRollPager_PrevImage;
	this.NextImage = FilmRollPager_NextImage;
	this.SetContentPosition = FilmRollPager_SetContentPosition;
	this.OnStop = FilmRollPager_OnStop;
	this.ShowImage = FilmRollPager_ShowImage;
	this.GetXCoord = FilmRollPager_GetXCoord;
	
	var pagerObj = document.getElementById(pagerID);
	
	/*var has_images_attrib = pagerObj.attributes["images"] != null;
	var has_contentid_attrib = pagerObj.attributes["contentid"] != null;
	var has_leftbtnid_attrib = pagerObj.attributes["leftbtnid"] != null;
	var has_rightbtnid_attrib = pagerObj.attributes["rightbtnid"] != null;
	var has_initimageid_attrib = pagerObj.attributes["initimageid"] != null;
	var has_slotcount_attrib = pagerObj.attributes["slotcount"] != null;
	var has_missingimageurl_attrib = pagerObj.attributes["missingimageurl"] != null;
	var has_cssmarker_attrib = pagerObj.attributes["cssmarker"] != null;
	
	alert ("has_images_attrib: "+has_images_attrib);
	alert ("has_contentid_attrib: "+has_contentid_attrib);
	alert ("has_leftbtnid_attrib: "+has_leftbtnid_attrib);
	alert ("has_rightbtnid_attrib: "+has_rightbtnid_attrib);
	alert ("has_initimageid_attrib: "+has_initimageid_attrib);
	alert ("has_slotcount_attrib: "+has_slotcount_attrib);
	alert ("has_missingimageurl_attrib: "+has_missingimageurl_attrib);
	alert ("has_cssmarker_attrib: "+has_cssmarker_attrib);*/
	
	if (pagerObj.attributes["images"] != null && pagerObj.attributes["contentid"] != null
		&& pagerObj.attributes["leftbtnid"] != null && pagerObj.attributes["rightbtnid"] != null
		&& pagerObj.attributes["initimageid"] != null && pagerObj.attributes["slotcount"] != null
		&& pagerObj.attributes["missingimageurl"] != null && pagerObj.attributes["cssmarker"] != null)
	{
		this._missingimageurl = pagerObj.attributes["missingimageurl"].value;
		this._slotcount = parseInt(pagerObj.attributes["slotcount"].value, 10);
		this._cssmarker = pagerObj.attributes["cssmarker"].value;
		this._sideimagescount = Math.floor(this._slotcount / 2);
		this._containerID = pagerObj.attributes["containerid"].value;
		this._contentID = pagerObj.attributes["contentid"].value;
		this._leftButtonID = pagerObj.attributes["leftbtnid"].value;
		this._rightButtonID = pagerObj.attributes["rightbtnid"].value;

		var initImageID = parseInt(pagerObj.attributes["initimageid"].value, 10);
		var urls = pagerObj.attributes["images"].value.split('|');
		
		for (i = 0; i < urls.length; i += 2)
		{
			var imageID = parseInt(urls[i+1], 10);
			
			if (imageID == initImageID)
				this._selectedImageIndex = this._images.length;

			this._images.push ([urls[i],urls[i+1]]);
		}

		var leftButton = document.getElementById(this._leftButtonID);
		var rightButton = document.getElementById(this._rightButtonID);
		var instance = this;

		leftButton.onmousedown = function (e) { instance.PrevImage(e); };
		rightButton.onmousedown = function (e) { instance.NextImage(e); };

		this.CreateImages();
		this.CreateMarker();

		this.SetContentPosition();
		
		var contentObject = document.getElementById(this._contentID);
		this._timer = new AnimationTimer(60);
		this._animator = new ComponentAnimator(contentObject, "left", this._timer, 0, 0, VM_EASEOUT);
		this._timer.OnStop.AddListener( function(sender, e) { instance.OnStop(sender, e); } );
	}
}

function FilmRollPager_CreateImages()
{
	var contentObj = document.getElementById(this._contentID);
	var x = 8;
	var instance = this;
	
	for (i = 0; i < this._sideimagescount; i++)
	{
		this.CreateImage(contentObj, x, -1, this._missingimageurl);
		x += 104;
	}
	
	for (i = 0; i < this._images.length; i++)
	{
		this.CreateImage(contentObj, x, i, this._images[i][0]);
		x += 104;
	}

	for (i = 0; i < this._sideimagescount; i++)
	{
		this.CreateImage(contentObj, x, -1, this._missingimageurl);
		x += 104;
	}
	
	//if (this._images.length < 5)
	//	x += (5 - this._images.length) * 104;
	
	contentObj.style.width = x + (this._sideimagescount * 104) + "px";
}

function FilmRollPager_CreateMarker()
{
	var parentObj = document.getElementById(this._containerID);
	var x = 8 + (this._sideimagescount * 104); // 147-104/2 ~= 21
	var divObj = this._slots[i] = document.createElement("div");
	parentObj.appendChild(divObj);
	
	var instance = this;
	
	divObj.style.position = "absolute";
	divObj.style.left = x + "px";
	//divObj.style.top = "15px";
	divObj.className = this._cssmarker;
}

function FilmRollPager_CreateImage(contentObject, x, index, url)
{
	var divObj = this._slots[i] = document.createElement("div");
	contentObject.appendChild(divObj);
	
	var instance = this;
	
	divObj.style.position = "absolute";
	divObj.style.left = x + "px";
	divObj.style.width = "104px";
	divObj.style.textAlign = "center";

	var imgObj = document.createElement("img");
	imgObj.src = url;
	imgObj.className = "FRP_Image";
	
	if (index >= 0)
	{
		imgObj.onclick = function (e) { instance.ShowImage(index); };
		imgObj.style.cursor = "pointer";
	}

	divObj.appendChild(imgObj);
}

function FilmRollPager_GetXCoord(index)
{
    return -index * 104;
}

function FilmRollPager_SetContentPosition()
{
	var contentObject = document.getElementById(this._contentID);
	var x = this.GetXCoord(this._selectedImageIndex);
	contentObject.style.left = x + "px";
}

function FilmRollPager_PrevImage(e)
{
	if (this._timer.IsRunning())
		return;
	
	if (this._selectedImageIndex <= 0)
		return;
	
	var startX = this.GetXCoord(this._selectedImageIndex);
	
	this._selectedImageIndex--;
	
	this._animator.SetStartEndValue(startX, startX+104);
	this._timer.Start(250);
}

function FilmRollPager_NextImage(e)
{
	if (this._timer.IsRunning())
		return;

	if (this._selectedImageIndex >= this._images.length-1)
		return;
	
	var startX = this.GetXCoord(this._selectedImageIndex);

	this._selectedImageIndex++;

	if (this._selectedImageIndex == this._images.length)
		this._selectedImageIndex = 0;

	this._animator.SetStartEndValue(startX, startX-104);
	this._timer.Start(250);
	
	//this.SetContentPosition();
}

function FilmRollPager_ShowImage(imageIndex)
{
    if (this._timer.IsRunning())
		return;

	if (imageIndex == this._selectedImageIndex)
	    return;

	var delayMS = Math.abs(this._selectedImageIndex - imageIndex) * 250;
    var startX = this.GetXCoord(this._selectedImageIndex);
	this._selectedImageIndex = imageIndex;
	var endX = this.GetXCoord(this._selectedImageIndex);
	this._animator.SetStartEndValue(startX, endX);
	
	var e = new Object();
	e.ImageID = this._images[this._selectedImageIndex][1];
	this.OnImageClick.Fire(this, e);

	this._timer.Start(delayMS);
}

function FilmRollPager_OnStop(sender, e)
{
	this.SetContentPosition();
	
	var e = new Object();
	e.ImageID = this._images[this._selectedImageIndex][1];
	this.OnImageSelect.Fire(this, e);
}