function imagePalette(columns, rows){
	
	var columns = columns;
	var rows = rows;
	var itemsPerPalettePage;
	var itemPrefix;
	var totalNumberOfItems = 0;
	var activeItem;
	var palettePages;
	var currentPage;
	var collapseEmptyRows;
	var ajaxObj;
	var freezeItem;
	
	var activeColor;
	
	var paletteGrid;
	
	var lastPixToAdd = 0;
	
	this.init = function(){
		
		this.ajaxObj = new ajax();	
		this.ajaxObj.addParam("doAjax", 1);
		this.ajaxObj.addParam("action", 'initJsPalette,getFullImage,getFullImageText');
		this.ajaxObj.addParam("imageId", 1);
		this.ajaxObj.addParam("locationHref", document.location.href);
		this.ajaxObj.sendXml(this, document.location.href, false);
	}
	
	this.streach = function(){
		
		element = document.getElementById('fullImageText');
		pixToAdd =(element.offsetHeight - 40);
				
		if(pixToAdd > lastPixToAdd){
			
			if(document.getElementById('leftMenuContentColumn')){
				container_elements = new Array('leftMenuContentColumn', 'middleContentColumn', 'rightContentColumn');
				c_elements = getStretchElements(container_elements, null, null);
				stretch(c_elements, pixToAdd, false);
			}
			
			lastPixToAdd = pixToAdd;
		}
	}
	
	this.handleInit = function(params){
	
		this.columns = parseInt(params['columns']);
		this.rows = parseInt(params['rows']);
		this.totalNumberOfItems = parseInt(params['totalItems']);
		this.collapseEmptyRows = parseInt(params['collapseEmptyRows']);
		this.currentPage = 1;
		this.freezeItem = new Array();
		this.itemsPerPalettePage = parseInt((this.columns * this.rows));
		this.palettePages = Math.ceil((this.totalNumberOfItems / this.itemsPerPalettePage));
		
		this.activeColor = params['activeFrameColor'];
		
		this.createGrid();
	
		//activate first item
		this.activateFirstItem();
	}
	
	
	
	
	this.createGrid = function(){
		
		var grid = new Array();
		var counter = 1;
		
		for(var i=0; i < this.rows; i++){
			
			grid[i] = new Array();
			
			for(var k=0; k < this.columns; k++){
				
				grid[i][k] = counter;
				
				counter++;
			}
		}
		
		this.paletteGrid = grid;
	}
	
	
	this.activateFirstItem = function(){
		
		if(document.getElementById('palette_item_1')){
			
			var item = document.getElementById('palette_item_1');
			this.activateItem(item, this.activeColor);	
		}
	}
	
	this.inArray = function(needle, stack){
		
		for(var j=0; j < stack.length; j++){
			
			if(needle == stack[j]){
				return true;
			}
		}
		
		return false;
	}
	
	this.addBorder = function(elementId, border, width, color, emptyItemArray){
		
		var tmpItemPrefix = 'palette_item_';
		
		if(this.inArray(elementId, emptyItemArray)){
			tmpItemPrefix = 'empty_' + tmpItemPrefix;
		}
		
		if(elementId !== null && (element = document.getElementById(tmpItemPrefix + elementId))){
			
			if(border == 'top'){
				element.style.borderTop = width + 'px solid ' + color; 
			}
			//else if(border == 'right' && !this.inArray(elementId, emptyItemArray)){
			else if(border == 'right'){
				element.style.borderRight = width + 'px solid ' + color; 
			}
			//else if(border == 'bottom' && !this.inArray(elementId, emptyItemArray)){
			else if(border == 'bottom'){
				element.style.borderBottom = width + 'px solid ' + color; 
			}
			else if(border == 'left'){
				element.style.borderLeft = width + 'px solid ' + color; 
			}
		}
	}
	
	this.getEmptyItems = function(){
	
		//calculate the first item on this page
		var firstItemId = ((this.currentPage * this.itemsPerPalettePage) - this.itemsPerPalettePage);
		//if first id + items per page > total images => return total images else totalImages-id + items per page
		var lastItemId = ((firstItemId + this.itemsPerPalettePage) > this.totalNumberOfItems) ? this.totalNumberOfItems : (this.itemsPerPalettePage * this.currentPage);
		//set the number of empty items needed to fill the last row
		var numberOfEmptyItems = (((this.itemsPerPalettePage * this.currentPage) - (lastItemId - 1)) - 1);
		
		//get items left to print on the current page of the total number of items
		var itemsLeftToPrint = (this.totalNumberOfItems - ((this.currentPage-1) * this.itemsPerPalettePage));
		var limit = (itemsLeftToPrint > this.itemsPerPalettePage) ? this.itemsPerPalettePage : itemsLeftToPrint;
		
		var emptyItems = new Array();
		
		for(var i=0; i < numberOfEmptyItems; i++){
			
			emptyItems[i] = (limit + (i + 1));
		}
		
		return emptyItems;
	}

	
	paletteObj = this;

	this.activateEvent = function(activateItem){
		
		//get the id number from the item id
		elementIdSplit = activateItem.id.split('_');
		var id = parseInt(elementIdSplit[(elementIdSplit.length-1)]);
		
		var lastFreeze = (this.freezeItem.length > 0) ? this.freezeItem[0] : -1;	
		
		if(lastFreeze > 0){
			
			if(document.getElementById('palette_item_' + lastFreeze)){

				var item = document.getElementById('palette_item_' + lastFreeze);	
				this.activateItem(item, '#ffffff');
			}
		}

		this.activateItem(activateItem, this.activeColor);
		//this.freezeItem[0] = id;
		
		//alert('FREEZE ITEM: ' + this.freezeItem[0])
		
		id = (id + ((this.currentPage-1) * this.itemsPerPalettePage));
	
		this.ajaxObj.addParam("doAjax", 1);
		this.ajaxObj.addParam("action", 'getFullImage,getFullImageText');
		this.ajaxObj.addParam("imageId", id);
		this.ajaxObj.addParam("locationHref", document.location.href);
		this.ajaxObj.sendXml(this, document.location.href, false);
	}
	
	
	//EVENT FUNCTIONS
	
	this.turnToPrevPage = function(){
	
		//if we have more than one palette page
		if(this.palettePages > 1){
		
			//new page number
			newPageNumber = ((this.currentPage - 1) < 1) ? this.palettePages : (this.currentPage - 1);
			this.currentPage = newPageNumber;
			
			//images to get, start image id
			startImage = ((this.itemsPerPalettePage * newPageNumber) - (this.itemsPerPalettePage-1));
			
			this.ajaxObj.addParam("doAjax", 1);
			this.ajaxObj.addParam("action", 'getPaletteImages,getFullImage,getFullImageText');
			this.ajaxObj.addParam("imageId", startImage);
			this.ajaxObj.addParam('locationHref', document.location.href);
			this.ajaxObj.sendXml(this, document.location.href, false);
			
			//set the page info
			if(document.getElementById('pageInfo')){
				
				var pageInfo = document.getElementById('pageInfo');
				pageInfo.innerHTML = (this.currentPage + '/' + this.palettePages);
			}
		}
	}
	
	
	this.turnToNextPage = function(){
	
		//if we have more than one palette page
		if(this.palettePages > 1){
			
			//new page number
			var newPageNumber = ((this.currentPage + 1) > this.palettePages) ? 1 : (this.currentPage + 1);
			this.currentPage = newPageNumber;

			//images to get, start image id
			startImage = ((this.itemsPerPalettePage * newPageNumber) - (this.itemsPerPalettePage-1));
			
			this.ajaxObj.addParam("doAjax", 1);
			this.ajaxObj.addParam("action", 'getPaletteImages,getFullImage,getFullImageText');
			this.ajaxObj.addParam("imageId", startImage);
			this.ajaxObj.addParam('locationHref', document.location.href);
			this.ajaxObj.sendXml(this, document.location.href, false);
			
			//set the page info
			if(document.getElementById('pageInfo')){
				
				var pageInfo = document.getElementById('pageInfo');
				pageInfo.innerHTML = (newPageNumber + '/' + this.palettePages);
			}
		}
	}
	

	this.activateItem = function(element, color){
		
		//get the id number from the item id
		elementIdSplit = element.id.split('_');
		id = parseInt(elementIdSplit[(elementIdSplit.length-1)]);
		
		this.freezeItem[0] = id;
		this.activeItem = id;
		
		//top, right, bottom, left
		activeElementBorder = new Array();
		activeElementBorder['Top'] = 2;
		activeElementBorder['Right'] = 2;
		activeElementBorder['Bottom'] = 2;
		activeElementBorder['Left'] = 2;
		
		var firstInRow = new Array();
		var lastInRow = new Array();
		var firstRow = new Array();
		var lastRow = new Array();
		
		//get the empty items
		var emptyItems = this.getEmptyItems();
		var lastRowModifier = 0;
		
		holeEmptyRows = Math.floor(emptyItems.length / this.columns);
		removeEmptyItems = (holeEmptyRows * this.columns);
		useEmptyItems = (emptyItems.length - removeEmptyItems);
		
		if(this.collapseEmptyRows){
			
			lastRowModifier = (emptyItems.length < this.columns) ? 0 : (emptyItems.length - useEmptyItems);
		}
		
		//loop through the items to devide them into palette groups (used when setting the active border)
		for(var i=0; i < this.columns; i++){
	
			firstRow[i] = (i + 1);
			lastRow[i] = (((this.columns * this.rows) - (this.columns - (i + 1))) - lastRowModifier);
		}
		
		//loop through the items to devide them into palette groups (used when setting the active border)
		for(var i=0; i < this.rows; i++){
			
			firstInRow[i] = ((i + 1) * this.columns) - (this.columns - 1);
			lastInRow[i] = (this.columns * (i + 1));
		}
	
		//calculate the affected items (right and left of the active item)
		affected_elements = new Array();
		affected_elements['right'] = ((id - 1) > 0) ? (id - 1) : null; 
		affected_elements['left'] = ((id + 1) <= this.itemsPerPalettePage) ? (id + 1) : null; 
		
		//add left and right border to the affected items
		(this.inArray(affected_elements['right'], lastInRow) === false) ? this.addBorder(affected_elements['right'], 'right', 0, color, emptyItems) : null;
		(!this.inArray(affected_elements['left'], firstInRow)) ? this.addBorder(affected_elements['left'], 'left', 0, color, emptyItems) : null;
		
		activeRow = Math.ceil(id/this.columns);
		activeRowIndex = (activeRow - 1);
		
		
		//if the active row is greater than 1
		if(activeRow > 1){
			
			for(var i=0; i < this.paletteGrid[(activeRowIndex - 1)].length; i++){
				//remove border from the items in the row obove
				this.addBorder(this.paletteGrid[(activeRowIndex - 1)][i], 'bottom', 0, '#ffffff', emptyItems);
				//add top border to all items on the active row (exept the active item)
				if(id !== this.paletteGrid[activeRowIndex][i]){
					this.addBorder(this.paletteGrid[activeRowIndex][i], 'top', 2, '#ffffff', emptyItems);	
				}
			}
		}
		
		if(activeRow < this.rows){
			
			//fix bottom items
			for(var i=0; i < this.paletteGrid[(activeRowIndex + 1)].length; i++){
				//remove border from itmes on the row below
				this.addBorder(this.paletteGrid[(activeRowIndex + 1)][i], 'top', 0, '#ffffff', emptyItems);
				//add bottom border to all items on the active row (exept the active item)
				if(id !== this.paletteGrid[(activeRowIndex)][i]){
					this.addBorder(this.paletteGrid[activeRowIndex][i], 'bottom', 2, '#ffffff', emptyItems);
				}
			}
		}
		
		//check if we should add any non-active border for empty items
		for(var k=0; k < emptyItems.length; k++){
			
			if(this.inArray(emptyItems[k], lastRow)){
				this.addBorder(emptyItems[k], 'bottom', 2, '#ffffff', emptyItems);
			}
			
			if(this.inArray(emptyItems[k], firstRow)){
				this.addBorder(emptyItems[k], 'top', 2, '#ffffff', emptyItems);
			}
			
			if(this.inArray(emptyItems[k], lastInRow)){
				this.addBorder(emptyItems[k], 'right', 2, '#ffffff', emptyItems);
			}
			
			if(this.inArray(emptyItems[k], firstInRow)){
				this.addBorder(emptyItems[k], 'left', 2, '#ffffff', emptyItems);
			}
		}
		
		//add border to the active item
		element.style.borderTop = activeElementBorder['Top'] + 'px solid ' + color;
		element.style.borderRight = activeElementBorder['Right'] + 'px solid ' + color;
		element.style.borderBottom = activeElementBorder['Bottom'] + 'px solid ' + color;
		element.style.borderLeft = activeElementBorder['Left'] + 'px solid ' + color;
	}
}