//.. ****************************************************************************
//..	JQUERY ADDON: PAGING
//..	written by: Roland Kierkels
//..	contact: rcjkierkels@gmail.com
//..	version: 1.0
//.. ****************************************************************************

//..	Example:
/*
		Alle navigations should have an unique ID. To sync two navigations give the container
		the same title.
		
		The amount of page numbers shown can be changed by changing the NAVIGATION_scroller width.
		Remember that by default a page number is 20px width. To show 5 page numbers the NAVIGATION_scroller
		should be 5*20 = 100px width. So your width should be a multiple of 20!!
		
		All navigations with different NAVIGATION_container titles work independently from each other.

		<div class="NAVIGATION_container" title="syncID:A">
			<div class="NAVIGATION_data"></div>
        	<div onclick="navigation_showmore(this,'right')" class="NAVIGATION_moveleft">&lt;&lt;</div>
             <div class="NAVIGATION_scroller">
             	<div class="NAVIGATION_holder">
                    <div class="NAVIGATION_page">1</div>
                    <div class="NAVIGATION_page">2</div>
                    <div class="NAVIGATION_page">3</div>
                    <div class="NAVIGATION_page">4</div>
                    <div class="NAVIGATION_page">5</div>
                    <div class="NAVIGATION_page">6</div>
                    <div class="NAVIGATION_page">7</div>
                    <div class="NAVIGATION_page">8</div>
                    <div class="NAVIGATION_page">9</div>
                    <div class="NAVIGATION_page">10</div>
                    <div class="NAVIGATION_page">11</div>
                    <div class="NAVIGATION_page">12</div>
                    <div class="NAVIGATION_page">13</div>
                    <div class="NAVIGATION_page">14</div>
                    <div class="NAVIGATION_page">15</div>
                    <div class="NAVIGATION_page">16</div>
                    <div class="NAVIGATION_page">17</div>
                    <div class="NAVIGATION_page">18</div>
                    <div class="NAVIGATION_page">19</div>
                    <div class="NAVIGATION_page">20</div>
                    <div class="NAVIGATION_page">21</div>
                    <div class="NAVIGATION_page">22</div>
                    <div class="NAVIGATION_page">23</div>
                    <div class="NAVIGATION_page_selected">24</div>
                </div>
            </div>
            <div onclick="navigation_showmore(this,'left')" class="NAVIGATION_moveright">&gt;&gt;</div>
            <div style="clear:both"></div> 
        </div>
*/


	$(document).ready( function() {
		
		//.. Correct navigations
		//var navElements	=	document.getElementsByClassName('NAVIGATION_container');
		/*
		var navElements = $('.NAVIGATION_container');
		
		for (var i = 0;i < navElements.length; i++) {
    		navigation_showmore(navElements[i],'init');
			navigation_showSelected(navElements[i]);
		}
		
		$(".NAVIGATION_page").click(function() {
			
			navigation_select(this);
			
		});
		
		$(".NAVIGATION_page_selected").click(function() {
			
			navigation_select(this);
			
		});
		*/
		
		

	});
	
	/*
	function NAVIGATION_updateData(syncID,newDATA) {
		
		//.. Updates NAVIGATION_data div of a navigation
		//.. newData format: ['tableName', 'navFunction', 'filters', 'width', 'pageVarID']
		//.. If you use false then this data will not be updated
		
		//var navDataElements = document.getElementsByClassName('NAVIGATION_data');
		var navDataElements = $('.NAVIGATION_data');
		for (var i = 0;i < navDataElements.length; i++) {
			
			//.. Get navigation container
			var navContainer = $(navDataElements[i]).parents();
			navContainer = navContainer[0];
			
			//.. Get syncID
			var navsyncID = navContainer.title;
			navsyncID = navsyncID.split(":");
			navsyncID = navsyncID[1]; 
			
			if (navsyncID != syncID) {
				continue;	
			}
			
			//.. Get current data
			var data = 	navDataElements[i].innerHTML;
			data = data.split("#");
			if (newDATA[0] === false)
				var tableName = data[0];
			else
				var tableName = newDATA[0];
				
			if (newDATA[1] === false)
				var navFunction = data[1];
			else
				var navFunction = newDATA[1];
				
			if (newDATA[2] === false)
				var filters = data[2];
			else
				var filters = newDATA[2];
				
			if (newDATA[3] === false)
				var width = data[3];
			else
				var width = newDATA[3];
				
			if (newDATA[4] === false)
				var pageVarID = data[4];
			else
				var pageVarID = newDATA[4];
				
			navDataElements[i].innerHTML = tableName+"#"+navFunction+"#"+filters+"#"+width+"#"+pageVarID;
			
				
		}
			
	}
	*/
	
	function NAVIGATION_hide(syncID) {
		//.. Function accepts both a syncID or navID. So syncID may also be a navID
		var navDataElements = $('.NAVIGATION_data');
		for (var i = 0;i < navDataElements.length; i++) {
			var data = 	navDataElements[i].innerHTML;
			data = data.split("#");
			var temp_navID = data[0];
			var temp_syncID = data[1];
			var temp_navFunction = data[2];
			var temp_width = data[3];
			
			//.. Function accepts both a syncID or navID
			if ((temp_syncID != syncID)&&(temp_navID != syncID)) continue;
			
			var temp = $(navDataElements[i]).parents();
			$(temp[0]).fadeOut(500);
			
		}
		
	}
	
	function NAVIGATION_show(syncID) {
		//.. Function accepts both a syncID or navID. So syncID may also be a navID
		var navDataElements = $('.NAVIGATION_data');
		for (var i = 0;i < navDataElements.length; i++) {
			var data = 	navDataElements[i].innerHTML;
			data = data.split("#");
			var temp_navID = data[0];
			var temp_syncID = data[1];
			var temp_navFunction = data[2];
			var temp_width = data[3];
			
			//.. Function accepts both a syncID or navID
			if ((temp_syncID != syncID)&&(temp_navID != syncID)) continue;
			
			var temp = $(navDataElements[i]).parents();
			$(temp[0]).fadeIn(500);
			
		}
		
	}

	
	function NAVIGATION_update(syncID,callBackFunc,resetPageNr) {
		
		//.. Function accepts both a syncID or navID. So syncID may also be a navID

		if (typeof(resetPageNr) == 'undefined') {
			var resetPageNr = 1;
		}
		else if (resetPageNr)
			resetPageNr = 1;
		else
			resetPageNr = 0;
		
		//.. Find navElement
		var temp_navID = false;
		var temp_syncID = false;
		var temp_navFunction = false;
		var temp_width = false;
		var found = false;
		var navDataElements = $('.NAVIGATION_data');
		for (var i = 0;i < navDataElements.length; i++) {
			var data = 	navDataElements[i].innerHTML;
			data = data.split("#");
			
			temp_navID = data[0];
			temp_syncID = data[1];
			temp_navFunction = data[2];
			temp_width = data[3];

			//.. Function accepts both a syncID or navID
			if ((temp_syncID == syncID)||(temp_navID == syncID))  {
				found = true;
				break;
			}
		}
		
		if (!found) {
			alert('ERROR: Cannot find navigation element with syncID: '+syncID);
			return;	
		}
		
		//.. Update navigation
		SYSTEM__AjaxFuncRequest("_GLOBAL_functions.php",'GLOBAL_createNavigation',{navID: temp_navID, syncID: temp_syncID, navFunction: temp_navFunction, width: temp_width, resetPageNr: resetPageNr }, function(response) {

			var response = response.split("[!-!]");
			var success = response[0];
			var syncID = response[1];
			var navHTML = response[2];
							
			if (success !== 'OK') {
				alert("ERROR: Navigatie kan niet worden ge-update.\n\nFoutmelding:\n"+response);
				return;	
			}
			
			if (navHTML != "IGNORE_UPDATES") {

				//.. Find navElements
				var navDataElements = $('.NAVIGATION_data');
				var navContainers = new Array();
				for (var i = 0;i < navDataElements.length; i++) {
					var data = 	navDataElements[i].innerHTML;
					data = data.split("#");
					var temp_navID = data[0];
					var temp_syncID = data[1];
					if (syncID == temp_syncID) {
						var temp = $(navDataElements[i]).parents();
						navContainers[navContainers.length] = temp[0];
					}
				}
				if (!navContainers.length) {
					alert('ERROR: Kan navigatie container niet vinden.');
					return;	
				}

				//.. Update navElement
				for (var i = 0;i < navContainers.length; i++) {
					if (navHTML.length) {
				
						navContainers[i].innerHTML = navHTML;
						$(navContainers[i]).fadeIn(500);
	
						navigation_showmore(navContainers[i],'init');
						navigation_showSelected(navContainers[i]);
						
					}
					else {
						$(navContainers[i]).fadeOut(500);
						//navContainers[i].style.display = 'none';
					}
				}

				$(".NAVIGATION_page").click(function() {
			
					navigation_select(this);
					
				});
				
				$(".NAVIGATION_page_selected").click(function() {
					
					navigation_select(this);
					
				});
			}
			else {
				NAVIGATION_show(syncID);
			}
			
			if ((typeof(callBackFunc) != 'undefined')&&(callBackFunc!==false)) {
				try {
					callBackFunc();
				}
				catch(err) {
					alert("Navigation Callback function error:\n\n"+err);
				}
			}
			
			return;
			
			
		});
			
		
		
	}
	
	/*
		
	var NAVIGATION_pending_updates = new Array();
	
	function NAVIGATION_update(otherData) {
		
		//.. otherDATA = "$amount#$gridID#$location"
		otherData = otherData.split("#");
	
		//.. Get all navigations and their data
	    //var navDataElements = document.getElementsByClassName('NAVIGATION_data');
		var navDataElements = $('.NAVIGATION_data');
		for (var i = 0;i < navDataElements.length; i++) {
			var data = 	navDataElements[i].innerHTML;
			data = data.split("#");
			var tableName = data[0];
			var navFunction = data[1];
			var filters = data[2];
			var width = data[3];
			var pageVarID = data[4];
						
			var itemsPerPage = otherData[0];
			var gridID = otherData[1];
			var location = otherData[2];
						
			//.. Get navigation container
			var navContainer = $(navDataElements[i]).parents();
			navContainer = navContainer[0];
			
			//.. Get syncID
			var syncID = navContainer.title;
			syncID = syncID.split(":");
			syncID = syncID[1]; 

			SYSTEM__AjaxFuncRequest("_GLOBAL_functions.php",'GLOBAL_createNavigation',{tableName: tableName, pageVarID: pageVarID, itemsPerPage: itemsPerPage, layout: false, filters: filters, syncID: syncID, navFunction: navFunction, width: width }, function(response) {

				var response = response.split("[!-!]");
				var syncID = response[0];
				var navHTML = response[1];
				
				//.. Find navElement
				//var navElements = document.getElementsByClassName('NAVIGATION_container');
				var navElements = $('.NAVIGATION_container');
				for (var i = 0;i < navElements.length; i++) {
					if (navElements[i].title == ("syncID:"+syncID)) {

						if (navHTML.length) {
							navElements[i].style.display = '';
							navElements[i].innerHTML = navHTML;
							navigation_showmore(navElements[i],'init');
							navigation_showSelected(navElements[i]);
						}
						else {
							navElements[i].style.display = 'none';
						}
					}
				}
				
				
				$(".NAVIGATION_page").click(function() {
			
					navigation_select(this);
					
				});
				
				$(".NAVIGATION_page_selected").click(function() {
					
					navigation_select(this);
					
				});
				
				return;
				
				
			});
		}

	}
	*/
	
	function NAVIGATE_grid(obj) {
		
		var page = parseInt(obj.innerHTML);
		
		//.. Get varID
		var temp = $(obj).parents();
		temp =  $(temp[0]).parents();
		temp =  $(temp[0]).parents();
		temp =  $(temp[0]).children();
		
		//.. Search for DATA
		var data = "";
		for (var i = 0;i < temp.length; i++) {
			if (temp[i].className == 'NAVIGATION_data') {
				data = temp[i].innerHTML;
				break;
			}
		}
		
		data = data.split("#");
		
		var navID = data[0];
		
		SYSTEM__AjaxFuncRequest('_GLOBAL_functions.php','GLOBAL_savePageNR',{page: page,navID: navID},EXTJS_reload_grids);
	}
	
	function NAVIGATION_getData(containerObject) {
	
		var children = $(containerObject).children();
		var dataContainer =  false;
		for (var i = 0;i < children.length; i++) {
			if (children[i].className == 'NAVIGATION_data') {
				dataContainer = children[i];
				break;
			}
		}
		
		if (dataContainer === false) return false;
		
		var navdata = dataContainer.innerHTML;
		return navdata.split("#");
		
	}
	
	function navigation_select(obj) {
		
			if (obj.className == 'NAVIGATION_page_selected') return;
		
			//.. Lets putt all selected pages on default again
			var parents = $(obj).parents();
			var pageTree = $(parents[0]).children();
			
			//.. get container
			var OBJ_container = obj;
			while (OBJ_container.className != 'NAVIGATION_container') {
				OBJ_container = $(OBJ_container).parents();
				OBJ_container = OBJ_container[0];
			}
			
			var navData = NAVIGATION_getData(OBJ_container);
			var OBJ_container_syncID = navData[1];
			
			for (var i = 0;i < pageTree.length; i++) {
				$(pageTree[i]).removeClass('NAVIGATION_page_selected');
				$(pageTree[i]).addClass('NAVIGATION_page');
			}
			
			$(obj).toggleClass('NAVIGATION_page_selected');
			
			//.. Now check if there is navigation which must be in sync
			//var navElmenents = document.getElementsByClassName('NAVIGATION_container');
			var navElmenents = $('.NAVIGATION_container');
			for (var i = 0;i < navElmenents.length; i++) {
				if (navElmenents[i] == OBJ_container) continue;
				
				navData = NAVIGATION_getData(navElmenents[i]);
				var navElm_syncID = navData[1];
				
				if (navElm_syncID != OBJ_container_syncID) continue;
				
				//.. This one must be in sync
				var temp = $(navElmenents[i]).children();
				
				//.. Find navigation scroller object
				for (k = 0;k < temp.length;k++) {
					if (temp[k].className == 'NAVIGATION_scroller') break;
				}
				
				if (k === temp.length) {
					alert('Er zit een fout in de navigatie siv-structuur.');
					return;	
				}
				
				var OBJ_navigation_scroller = temp[k];
				
				temp = $(OBJ_navigation_scroller).children();
				pageTree = $(temp[0]).children();
				
				for (var k = 0;k < pageTree.length; k++) {
					$(pageTree[k]).removeClass('NAVIGATION_page_selected');
					$(pageTree[k]).addClass('NAVIGATION_page');
					if (pageTree[k].innerHTML == obj.innerHTML)
						$(pageTree[k]).toggleClass('NAVIGATION_page_selected');
				}	
				
				
			}
	}
	
	function navigation_showSelected(obj) {

		//.. Learn navigation container
		var temp = obj;
		while (temp.className != 'NAVIGATION_container') {
			temp = $(temp).parents();
			temp = temp[0];
		}

	
		//.. Get amount of page numbers
		var OBJ_container = temp;
		temp = $(temp).children();
		
		//.. Find navigation move objects
		var OBJ_navigation_moveleft = false;
		var OBJ_navigation_moveright = false;
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_moveleft') {OBJ_navigation_moveleft = temp[i];}
			if (temp[i].className == 'NAVIGATION_moveright') {OBJ_navigation_moveright = temp[i];}
		}
		if ((!OBJ_navigation_moveleft)&&(!OBJ_navigation_moveright)) {
			alert('Er zit een fout in de navigatie div-structuur.');
			return;	
		}
		
		//.. Find navigation scroller object
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_scroller') break;
		}
		
		if (i === temp.length) {
			alert('Er zit een fout in de navigatie siv-structuur.');
			return;	
		}
		
		var OBJ_navigation_scroller = temp[i];
		
		//.. Get info
		temp = $(temp[i]).children();
		var OBJ_navigation_holder = temp[0];
		var amountOfPageNumbers = parseInt($(temp[0]).children().length);
		var navigationNumbers = $(temp[0]).children();	
		
		//.. Find selected page
		for (var i = 0; i < amountOfPageNumbers; i++) {
			if (navigationNumbers[i].className == 'NAVIGATION_page_selected') break;
		}
		if (i === temp.length) {
			//.. No page selected
			return;	
		}
		var selectedPageNr = i+1;
		
		//.. Get page number width
		temp = $(temp[0]).children();
		var widthPageNrHolder = parseInt($(temp[0]).width());
		var heightPageNrHolder = parseInt($(temp[0]).height());
		
		//.. Get current left Offset
		temp = $(OBJ_navigation_holder).css('left').split("px");
		var currentLeftOffset = parseInt(temp[0]);
		
		//.. Get holder width
		var holderWidth = parseInt($(OBJ_navigation_scroller).width());
		
		//.. Correct holder width if needed
		if ((amountOfPageNumbers*widthPageNrHolder) < holderWidth) {
			holderWidth = amountOfPageNumbers*widthPageNrHolder;
			$(OBJ_navigation_scroller).width(holderWidth);	
		}			
		
		//.. Page Number Window size
		var AmountOfPageNrFitInWindow = holderWidth / widthPageNrHolder;
		
		var AnimateToPageNr = selectedPageNr;
		if (selectedPageNr == amountOfPageNumbers)
			AnimateToPageNr = AnimateToPageNr - AmountOfPageNrFitInWindow;
		else if ((selectedPageNr > 1)&&(selectedPageNr < amountOfPageNumbers)) {
			var center = Math.floor(AmountOfPageNrFitInWindow / 2);
			if ((selectedPageNr - center) > 0)
				AnimateToPageNr = selectedPageNr - center;
		}
		
		//.. Last page number in window
		var lastPageNrInWindow = AmountOfPageNrFitInWindow - currentLeftOffset / widthPageNrHolder;			
		
		//.. Other info
		var posSelectedPage = -1*(AnimateToPageNr-1)*widthPageNrHolder;
		
		$(OBJ_navigation_holder).animate({left: posSelectedPage+"px"},500,'swing');
		
			
		if (amountOfPageNumbers > lastPageNrInWindow) {
			$(OBJ_navigation_moveright).fadeIn(400);
		}
		else {
			$(OBJ_navigation_moveright).fadeOut(400);	
		}
		
		if (selectedPageNr > 1) {
			$(OBJ_navigation_moveleft).fadeIn(400);	
		}
		else {
			$(OBJ_navigation_moveleft).fadeOut(400);	
		}
		
		
	}
	
	function navigation_showBegin(obj) {
		var temp = obj;
		while (temp.className != 'NAVIGATION_container') {
			temp = $(temp).parents();
			temp = temp[0];
		}
		
		var OBJ_container = temp;
		var temp = $(temp).children();
		
		//.. Find navigation move objects
		var OBJ_navigation_moveleft = false;
		var OBJ_navigation_moveright = false;
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_moveleft') {OBJ_navigation_moveleft = temp[i];}
			if (temp[i].className == 'NAVIGATION_moveright') {OBJ_navigation_moveright = temp[i];}
		}
		if ((!OBJ_navigation_moveleft)&&(!OBJ_navigation_moveright)) {
			alert('Er zit een fout in de navigatie div-structuur. [1]');
			return;	
		}
		
		//.. Find navigation scroller object
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_scroller') break;
		}
		
		if (i === temp.length) {
			alert('Er zit een fout in de navigatie siv-structuur. [2]');
			return;	
		}
		
		var OBJ_navigation_scroller = temp[i];
		
		temp = $(temp[i]).children();
		var OBJ_navigation_holder = temp[0];
		
		var amountOfPageNumbers = parseInt($(temp[0]).children().length);
		
		temp = $(temp[0]).children();
		var widthPageNrHolder = parseInt($(temp[0]).width());
		var heightPageNrHolder = parseInt($(temp[0]).height());
		
		$(OBJ_navigation_holder).animate({left: "0px"},500);
		
		$(OBJ_navigation_moveleft).fadeOut(400);
		
		//.. Get holder width
		var holderWidth = parseInt($(OBJ_navigation_scroller).width());
		
		//.. Page Number Window size
		var AmountOfPageNrFitInWindow = holderWidth / widthPageNrHolder;
		
		if (AmountOfPageNrFitInWindow < amountOfPageNumbers)
			$(OBJ_navigation_moveright).fadeIn(400);	
	}
	
	function navigation_showEnd(obj) {
		var temp = obj;
		while (temp.className != 'NAVIGATION_container') {
			temp = $(temp).parents();
			temp = temp[0];
		}
		
		var OBJ_container = temp;
		var temp = $(temp).children();
		
		//.. Find navigation move objects
		var OBJ_navigation_moveleft = false;
		var OBJ_navigation_moveright = false;
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_moveleft') {OBJ_navigation_moveleft = temp[i];}
			if (temp[i].className == 'NAVIGATION_moveright') {OBJ_navigation_moveright = temp[i];}
		}
		if ((!OBJ_navigation_moveleft)&&(!OBJ_navigation_moveright)) {
			alert('Er zit een fout in de navigatie div-structuur. [1]');
			return;	
		}
		
		//.. Find navigation scroller object
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_scroller') break;
		}
		
		if (i === temp.length) {
			alert('Er zit een fout in de navigatie siv-structuur. [2]');
			return;	
		}
		
		var OBJ_navigation_scroller = temp[i];
		
		temp = $(temp[i]).children();
		var OBJ_navigation_holder = temp[0];
		
		var amountOfPageNumbers = parseInt($(temp[0]).children().length);
		
		temp = $(temp[0]).children();
		var widthPageNrHolder = parseInt($(temp[0]).width());
		var heightPageNrHolder = parseInt($(temp[0]).height());
		
		//.. Get holder width
		var holderWidth = parseInt($(OBJ_navigation_scroller).width());
		
		//.. Correct holder width if needed
		if ((amountOfPageNumbers*widthPageNrHolder) < holderWidth) {
			holderWidth = amountOfPageNumbers*widthPageNrHolder;
			$(OBJ_navigation_scroller).width(holderWidth);	
		}
		
		//.. Page Number Window size
		var AmountOfPageNrFitInWindow = holderWidth / widthPageNrHolder;
		
		var newLeft = (-1)*(amountOfPageNumbers*widthPageNrHolder - holderWidth);
		
		$(OBJ_navigation_holder).animate({left: newLeft+"px"},500);
		
		$(OBJ_navigation_moveright).fadeOut(400);
		
		if (AmountOfPageNrFitInWindow < amountOfPageNumbers)
			$(OBJ_navigation_moveleft).fadeIn(400);	
	}

	function navigation_showmore(obj,direction,AvoidLoopSync,e) {
		
		if (SYSTEM__uniEvent(e,'shift') !== false) {
			if (direction == 'left')
				navigation_showEnd(obj);
			else
				navigation_showBegin(obj);
			
			return;	
		}
		
		//.. Learn navigation container
		var temp = obj;
		while (temp.className != 'NAVIGATION_container') {
			temp = $(temp).parents();
			temp = temp[0];
		}
		
		//.. Get amount of page numbers
		var OBJ_container = temp;
		var temp = $(temp).children();
		
		//.. Get data
		var navData = NAVIGATION_getData(OBJ_container);
		var syncID  = navData[1];
		
		//.. Find navigation move objects
		var OBJ_navigation_moveleft = false;
		var OBJ_navigation_moveright = false;
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_moveleft') {OBJ_navigation_moveleft = temp[i];}
			if (temp[i].className == 'NAVIGATION_moveright') {OBJ_navigation_moveright = temp[i];}
		}
		if ((!OBJ_navigation_moveleft)&&(!OBJ_navigation_moveright)) {
			alert('Er zit een fout in de navigatie div-structuur. [1]');
			return;	
		}
		
		//.. Find navigation scroller object
		for (i = 0;i < temp.length;i++) {
			if (temp[i].className == 'NAVIGATION_scroller') break;
		}
		
		if (i === temp.length) {
			alert('Er zit een fout in de navigatie siv-structuur. [2]');
			return;	
		}
		
		var OBJ_navigation_scroller = temp[i];
		
		//.. Get info
		temp = $(temp[i]).children();
		var OBJ_navigation_holder = temp[0];
		var amountOfPageNumbers = parseInt($(temp[0]).children().length);
		
		//.. Get page number width
		temp = $(temp[0]).children();
		var widthPageNrHolder = parseInt($(temp[0]).width());
		var heightPageNrHolder = parseInt($(temp[0]).height());
		
		//.. Get current left Offset
		temp = $(OBJ_navigation_holder).css('left').split("px");
		var currentLeftOffset = parseInt(temp[0]);
		
		//.. Get holder width
		var holderWidth = parseInt($(OBJ_navigation_scroller).width());
		
		//.. Correct holder width if needed
		if ((amountOfPageNumbers*widthPageNrHolder) < holderWidth) {
			holderWidth = amountOfPageNumbers*widthPageNrHolder;
			$(OBJ_navigation_scroller).width(holderWidth);	
		}	
		
		//.. Page Number Window size
		var AmountOfPageNrFitInWindow = holderWidth / widthPageNrHolder;
				
		//.. DO animation
		if (direction == 'left') {
			//.. Show higher page numbers
			var amountOfPageNrRight = (amountOfPageNumbers*widthPageNrHolder-holderWidth+currentLeftOffset)/widthPageNrHolder;
			
			//.. Calculate how much we can show
			if (amountOfPageNrRight > AmountOfPageNrFitInWindow) {
				
				var newLeftOffset = currentLeftOffset - holderWidth;
				
				$(OBJ_navigation_holder).animate({left: newLeftOffset+"px"},500,'swing');
				
				//OBJ_navigation_moveright.style.visibility = 'visible';
				$(OBJ_navigation_moveright).fadeIn(400);
				
			}
			else {
				
				var newLeftOffset = currentLeftOffset - amountOfPageNrRight*widthPageNrHolder;
				
				$(OBJ_navigation_holder).animate({left: newLeftOffset+"px"},500,'swing');
				
				//OBJ_navigation_moveright.style.visibility = 'hidden';
				$(OBJ_navigation_moveright).fadeOut(400);
				
					
			}
					
			//OBJ_navigation_moveleft.style.visibility = 'visible';
			$(OBJ_navigation_moveleft).fadeIn(400);
			
		}

		else if (direction == 'right') {
		
			//.. Show lower page numbers
			var amountOfPageNrLeft = Math.abs(currentLeftOffset / widthPageNrHolder);
			
			//.. Calculate how much we can show
			if (amountOfPageNrLeft > AmountOfPageNrFitInWindow) {
				
				var newLeftOffset = currentLeftOffset + holderWidth;
				
				$(OBJ_navigation_holder).animate({left: newLeftOffset+"px"},500,'swing');
				
				//OBJ_navigation_moveleft.style.visibility = 'visible';
				$(OBJ_navigation_moveleft).fadeIn(400);
				
			}
			else {
				
				var newLeftOffset = currentLeftOffset + amountOfPageNrLeft*widthPageNrHolder;
				
				$(OBJ_navigation_holder).animate({left: newLeftOffset+"px"},500,'swing');
				
				//OBJ_navigation_moveleft.style.visibility = 'hidden';
				$(OBJ_navigation_moveleft).fadeOut(400);

					
			}
			
			//OBJ_navigation_moveright.style.visibility = 'visible';
			$(OBJ_navigation_moveright).fadeIn(400);
			
		}
		else {
			
			//OBJ_navigation_moveleft.style.visibility = 'hidden';
			$(OBJ_navigation_moveleft).fadeOut(400);
			
			if (amountOfPageNumbers > AmountOfPageNrFitInWindow) {
				//OBJ_navigation_moveright.style.visibility = 'visible';
				$(OBJ_navigation_moveright).fadeIn(400);	
			}
		}
		
		//.. Now check if there is navigation which must be in sync
		if ((AvoidLoopSync !== true)&&(direction != 'init')) {
			//var navElmenents = document.getElementsByClassName('NAVIGATION_container');
			var navElmenents = $('.NAVIGATION_container');
			for (var i = 0;i < navElmenents.length; i++) {
				if (navElmenents[i] == OBJ_container) continue;
				
				var temp_navData = NAVIGATION_getData(navElmenents[i]);
				var navElm_syncID = temp_navData[1];
				
				if (navElm_syncID != syncID) continue;
				navigation_showmore(navElmenents[i],direction,true);
			}
		}
		
			
	}