var actualCol=1;//points where the categories are suposed to be added
var totalCols=0;//the total amout of categories in the DB (must be setted from the script)
var imagepath = "assets/images/";
//add the text of a category in a table to represent the categories selected by the user
function addCategory(selectId){
	
	var selectObject=document.getElementById(selectId);
	var alreadyExists=false;
	
	//if the category was already selected, do nothing and inform the user
	for(i=1;i<totalCols;i++){
		if(document.getElementById("cell2"+i).innerHTML==document.getElementById('selectcategories').options[selectObject.selectedIndex].value){
			
			alert(unescape(""+document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].text+" is already in list."));
			alreadyExists=true;		
			break;
		}		
	}
	
	//if the category has not been selected and it is not the "select a category" option, add it
	if(!alreadyExists && document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].value!='-1'){
		
		document.getElementById('break_one').style.display='block';
		document.getElementById('break_two').style.display='block';
		actualCol=getFirstFreeCol();
		var removeIconMarkup="<img src='assets/images/delete2.png' class='activeImage' onclick='removeCategory("+document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].value+");addCategoryToList("+document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].value+")'>";
		var column1 = 'cell1'+actualCol;
		var column2 = 'cell2'+actualCol;
		document.getElementById(column1).innerHTML=''+document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].text+ '&nbsp;'+removeIconMarkup+ '&nbsp;&nbsp;&nbsp;';//add the name of the actegory and the button to remvo it		
		
		document.getElementById(column2).innerHTML=document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].value;//add the id of the category to the second table
		document.getElementById(column1).style.display='block';
		addTotextField(document.getElementById('selectcategories').options[document.getElementById('selectcategories').selectedIndex].value);//add the category id to the textfield, with all the ids of the categories	
	}

}

//once a category is choosen, we add its id to the categoriesIds input
function addTotextField(toAdd){
	var inputText=document.getElementById("categoriesIds");
	if(inputText.value==""){
		document.getElementById("categoriesIds").value+=toAdd;			
	}else{
		document.getElementById("categoriesIds").value+=","+toAdd;
	}
}

/*
	the parameter is the id of the category, this method searches the table,
	when it founds a match on the id, it removes the contents of that cell
	and moves all the following id one row to the left
*/
function removeCategory(Col){
	for(i=1;i<totalCols;i++){
		if(document.getElementById("cell2"+i).innerHTML==Col){
			document.getElementById("cell1"+i).innerHTML="&nbsp;";
			document.getElementById("cell2"+i).innerHTML="&nbsp;";
			starSlideAt=i;
			break;
		}		
	}
	slideDown(starSlideAt);
	removeFromTextField(Col);
}

//When a category is removed, this method also remove its id from the input
function removeFromTextField(toremove){
	var textInput=document.getElementById("categoriesIds");
	var array=textInput.value.split(",");
	var overwrite=false;
	for(i=0;i<array.length;i++){
		if(array[i]==toremove){
			overwrite=true;				
		}
		if(overwrite){
			array[i]=array[i+1];
		}
	}
	array.length--;
	textInput.value="";
	for(i=0;i<array.length;i++) {
		addTotextField(array[i]);
	}
}

/*
	When a category is removed there is a hole on the table, so we just move all
	the categories one place left in the table, and set the hide the last one form
	the user 
*/
function slideDown(Col){
	var colValue=Col;
	var innerMarkup=document.getElementById("cell1"+Col).innerHTML;
	while(Col<totalCols){
		document.getElementById("cell1"+Col).innerHTML=document.getElementById("cell1"+(Col+1)).innerHTML;
		document.getElementById("cell2"+Col).innerHTML=document.getElementById("cell2"+(Col+1)).innerHTML;
		Col++;
	}
	while(colValue<totalCols){
		if(document.getElementById("cell1"+colValue).innerHTML=="&nbsp;"){
			document.getElementById("cell1"+colValue).style.display="none";
		}
		colValue++;
	}
}

function setTotalCols(total){
	totalCols=total;
}

//finds the first free Colum in the table
function getFirstFreeCol(){
	var freecol = 0;
	for(i=1;i<totalCols;i++){
		celltext = "cell1"+i;
		if (document.getElementById(celltext).innerHTML == "-") {
			freecol = i;
			break;
		}	
	}
	return freecol;
}