function LGNavigationElement(owner, referencedImageHolder, ordern){
	this.owner = owner;
	this.orderNumber = ordern;
	this.referencedImageHolder = referencedImageHolder,
	this.HTMLElement = document.createElement('div');
	this.HTMLElement.innerHTML = this.referencedImageHolder.title;
	
	var _this = this;
	
	this.action = function(){
		_this.owner.navigationElemenetClicked(_this);
	}
	
	this.HTMLElement.onclick = function (){
		_this.action();
	}
	//debug(this.referencedImageHolder.title);
}


function LGNavigationBar(owner,controller) {
	this.owner = owner;
	this.controller = controller;
	this.HTMLElement = document.createElement('div');
	this.HTMLElement.style.fontSize = controller.fontSize;
	this.navigatonElements = new Array();
	this.maxNavigationElementDiplayed = 10;
	this.activeNavigatonElement = null;
	this.actualNavBarBeginNum = 0;
	
	var _this = this;
	
	this.setActiveElement = function(nElement){
		if (nElement != this.activeNavigatonElement){
			nElement.HTMLElement.style.color = this.controller.highLightColor;
			this.activeNavigatonElement.HTMLElement.style.color = this.controller.normalColor;
			this.activeNavigatonElement = nElement;
			
			if ((this.activeNavigatonElement.orderNumber) < this.actualNavBarBeginNum){
				this.setActualNavBarBegin(this.actualNavBarBeginNum-this.maxNavigationElementDiplayed);
			} else if ( (this.actualNavBarBeginNum + this.maxNavigationElementDiplayed)-1 < this.activeNavigatonElement.orderNumber ){
				this.setActualNavBarBegin(this.actualNavBarBeginNum+this.maxNavigationElementDiplayed);
			}
			
			if (this.activeNavigatonElement.orderNumber == 0){
				this.backStepper.style.display = "none";
			} else {
				this.backStepper.style.display = "block";
			}
			
			if (this.activeNavigatonElement.orderNumber == (this.navigatonElements.length - 1) ){
				this.frontStepper.style.display = "none";
			} else {
				this.frontStepper.style.display = "block";
			}
			
		}
	}
	
	this.navigationElemenetClicked = function(sender){
		this.setActiveElement(sender);
		this.controller.bringToCenter(sender.referencedImageHolder);
	}
	
	this.setActualImageHolder = function(ih){
		n=0;
		while (n<this.navigatonElements.length && ih != this.navigatonElements[n].referencedImageHolder) n++;
		if (n<this.navigatonElements.length) {
			this.actualPosition = n;
			this.setActiveElement(this.navigatonElements[n]);
		}
	}
	
	
	this.setActualNavBarBegin = function(pos){
		if ( (0<=pos) && (pos<this.navigatonElements.length) ){
			
			try {
				this.HTMLElement.removeChild(this.backPager);
			} catch (exp) {}
			try {
				this.HTMLElement.removeChild(this.frontPager);
			} catch (exp) {}
			try {
				this.HTMLElement.removeChild(this.backStepper);
			} catch (exp) {}
			try {
				this.HTMLElement.removeChild(this.frontStepper);
			} catch (exp) {}
			
			var n=this.actualNavBarBeginNum;
			while ( (n < this.navigatonElements.length) && (n < this.actualNavBarBeginNum+ this.maxNavigationElementDiplayed) ){
				this.HTMLElement.removeChild(this.navigatonElements[n].HTMLElement);
				n++;
			}
			
			this.actualNavBarBeginNum = pos;
			
			debug(this.activeNavigatonElement.orderNumber+ " " +this.actualNavBarBeginNum);
			if (this.activeNavigatonElement.orderNumber < this.actualNavBarBeginNum){
				this.navigatonElements[this.actualNavBarBeginNum].action();
			} else if ( (this.actualNavBarBeginNum + this.maxNavigationElementDiplayed)-1 < this.activeNavigatonElement.orderNumber){
				this.navigatonElements[this.actualNavBarBeginNum + this.maxNavigationElementDiplayed -1].action();
			}
			
			if (this.actualNavBarBeginNum != 0){
				this.HTMLElement.appendChild(this.backPager);
			}
			
			this.HTMLElement.appendChild(this.backStepper);
			
			n=this.actualNavBarBeginNum;
			while ( (n < this.navigatonElements.length) && (n < this.actualNavBarBeginNum+ this.maxNavigationElementDiplayed) ){
				this.HTMLElement.appendChild(this.navigatonElements[n].HTMLElement);
				n++;
			}
			
			this.HTMLElement.appendChild(this.frontStepper);
			
			if (n < this.navigatonElements.length){
				this.HTMLElement.appendChild(this.frontPager);
			}
			
		}
	}
	
	this.pageing = function(direction){
		switch (direction) {
			case "front":
				if ((this.actualNavBarBeginNum + this.maxNavigationElementDiplayed) < this.navigatonElements.length){				
					this.setActualNavBarBegin(this.actualNavBarBeginNum + this.maxNavigationElementDiplayed);
				}
			break;
			case "back":
				if (0 <= (this.actualNavBarBeginNum - this.maxNavigationElementDiplayed)){
					this.setActualNavBarBegin(this.actualNavBarBeginNum - this.maxNavigationElementDiplayed);
				}
			break;
			case "frontStep":
				if (this.activeNavigatonElement.orderNumber < (this.navigatonElements.length - 1)){
					this.navigatonElements[this.activeNavigatonElement.orderNumber+1].action();
				}
			break;
			case "backStep":
				if (0 < this.activeNavigatonElement.orderNumber){
					this.navigatonElements[this.activeNavigatonElement.orderNumber-1].action();
				}
			break;
		}
	}
	
	this.frontStepper = document.createElement('div');
	this.frontStepper.className = "floatLeft";
	this.frontStepper.style.margin = "3px";
	this.frontStepper.style.fontFamily = "Sans-serif";
	this.frontStepper.style.fontWeight = "900";
	this.frontStepper.style.cursor = "pointer";
	this.frontStepper.style.color = this.controller.normalColor;
	//this.frontStepper.style.right = this.controller.normalColor;
	this.frontStepper.style.rightMargin = "5px";
	this.frontStepper.innerHTML = "&gt;";
	this.frontStepper.onclick = function () {
		_this.pageing("frontStep");
	}
	
	this.backStepper = document.createElement('div');
	this.backStepper.className = "floatLeft";
	this.backStepper.style.margin = "3px";
	this.backStepper.style.fontFamily = "Sans-serif";
	this.backStepper.style.fontWeight = "900";
	this.backStepper.style.cursor = "pointer";
	this.backStepper.style.color = this.controller.normalColor;
	//this.backStepper.style.right = this.controller.normalColor;
	this.backStepper.style.leftMargin = "5px";
	this.backStepper.innerHTML = "&lt;";
	this.backStepper.onclick = function () {
		_this.pageing("backStep");
	}
	
	this.frontPager = document.createElement('div');
	this.frontPager.className = "floatLeft";
	this.frontPager.style.margin = "3px";
	this.frontPager.style.fontFamily = "Sans-serif";
	this.frontPager.style.fontWeight = "900";
	this.frontPager.style.cursor = "pointer";
	this.frontPager.style.color = this.controller.normalColor;
	this.frontPager.innerHTML = "&gt;&gt;";
	this.frontPager.onclick = function () {
		_this.pageing("front");
	}
	
	this.backPager = document.createElement('div');
	this.backPager.className = "floatLeft";
	this.backPager.style.margin = "3px";
	this.backPager.style.fontFamily = "Sans-serif";
	this.backPager.style.fontWeight = "900";
	this.backPager.style.cursor = "pointer";
	this.backPager.style.color = this.controller.normalColor;
	this.backPager.innerHTML = "&lt;&lt;";
	this.backPager.onclick = function () {
		_this.pageing("back");
	}
	
	//if (this.navigatonElements.length > this.maxNavigationElementDiplayed){
	//	this.HTMLElement.appendChild(this.backPager);
	//}
	
	this.HTMLElement.appendChild(this.backStepper);
	
	for(n=0;n<owner.imageHolders.length;n++){
		var navElem = new LGNavigationElement(this,owner.imageHolders[n], n);
		navElem.HTMLElement.className = "floatLeft";
		navElem.HTMLElement.style.margin = "3px";
		navElem.HTMLElement.style.fontFamily = "Sans-serif";
		navElem.HTMLElement.style.fontWeight = "900";
		navElem.HTMLElement.style.cursor = "pointer";
		navElem.HTMLElement.style.color =  this.controller.normalColor;
		this.navigatonElements.push(navElem);
		if (n<this.maxNavigationElementDiplayed){
			this.HTMLElement.appendChild(navElem.HTMLElement);
		}
	}
	
	this.HTMLElement.appendChild(this.frontStepper);
	
	if (this.navigatonElements.length > this.maxNavigationElementDiplayed){
		this.HTMLElement.appendChild(this.frontPager);
	}
	
	this.activeNavigatonElement = this.navigatonElements[0];
	
}