var myKeywords = new Array();
window.addEvent('domready', function() {

	//This is the function that will run every time a new item is added or the 
	//list is sorted.
	var showNewOrder = function() {
		//This function means we get serialize() to tell us the text of each 
		//element, instead of its ID, which is the default return.
		var serializeFunction = function(el) { return el.get('text'); };
		//We pass our custom function to serialize();
		var orderTxt = sort.serialize(serializeFunction);
		//And then we add that text to our page so everyone can see it.
		$('data').set('text', orderTxt.join(' '));
	};
	
	function valueExist(myval){
		var x=0; 
		if(myKeywords.length > 0){
			for (x=0;x<=myKeywords.length;x++){
				if(myKeywords[x]==myval){return true;}
			}// and the loop goes on until...
		}
	}
	
	//This code initalizes the sortable list.
	var sort = new Sortables('.todo', {
		handle: '.drag-handle',
		//This will constrain the list items to the list.
		constrain: true,
		//We'll get to see a nice cloned element when we drag.
		clone: true,
		//This function will happen when the user 'drops' an item in a new place.
		onComplete: showNewOrder
	});

	//This is the code that makes the text input add list items to the <ul>,
	//which we then make sortable.
	var i = 1;
	
	$$('a.add').each(function(el) {	
	el.addEvent('click',function(e) {
		e.stop();
		//Get the value of the text input.
		var val = $('newTask1').get('value');
		
		//The code here will execute if the input is empty.
		if (!val) {
			$('newTask1').highlight('#f00').focus();	
			return; //Return will skip the rest of the code in the function. 
		}
		else{
			if(valueExist(val)==true){
				alert("You have already added this keyword.");
				$('newTask1').highlight('#f00').focus();	
				return; 
				//Return will skip the rest of the code in the function. 
			}else{
				myKeywords.push(val);
				$('added-keywords').value = myKeywords;
			}
		}
		//Create a new <li> to hold all our content.
		var li = new Element('li', {id: 'record-'+i});
		//the draggable element.
		var div_clear = new Element('div', {'class':'clear'});
		div_clear.inject(li);
		//This handle element will serve as the point where the user 'picks up'
		//the draggable element.
		//var handle = new Element('div', {id:'handle-'+i, 'class':'drag-handle'});
		//handle.inject(li, 'top');
		
		var div_img = new Element('div', {'style':'float:right;padding:0px;'});
		div_img.inject(div_clear);
		
		var div_keyword = new Element('div', {id:'record-'+i+'-value','style':'float:left;margin-top:2px;', text:val });
		div_keyword.inject(div_clear);
		
		var img_anchor = new Element('a', {'href':'?delete='+i,'class':'delete',id:'anc-'+i,'onclick':'deleteRow(this.id);return false'});
		img_anchor.inject(div_img);
		
		var img = new Element('img', {'src':'images/delete.png','alt':'Delete','width':'24','height':'24','border':'0'});
		img.inject(img_anchor);
		
		//var input = new Element('input', {'type':'checkbox',id:'chk'+i,name:'chk'+i});
		//input.inject(div_chkbox);
		
		//Set the value of the form to '', since we've added its value to the <li>.
		$('newTask1').set('value', '');
		//Add the <li> to our list.
		$('todo').adopt(li);
		//Do a fancy effect on the <li>.
		li.highlight();
		//We have to add the list item to our Sortable object so it's sortable.
		sort.addItems(li);
		//We put the new order inside of the data div.
		//showNewOrder();
		i++;
	});
  });	

 // form submit
  $('addTask').addEvent('submit', function(e) {
		e.stop();
		//Get the value of the text input.
		var val = trim($('newTask').get('value'),'');
		//The code here will execute if the input is empty.
		if (!val) {
			$('newTask').highlight('#f00').focus();	
			return; //Return will skip the rest of the code in the function. 
		}
		else{
			if(valueExist(val)==true){
				alert("You have already added this keyword.");
				$('newTask').highlight('#f00').focus();	
				return; 
				//Return will skip the rest of the code in the function. 
			}else{
				myKeywords.push(val);
				$('added-keywords').value = myKeywords;
			}
		}
		//Create a new <li> to hold all our content.
		var li = new Element('li', {id: 'record-'+i});
		//the draggable element.
		var div_clear = new Element('div', {'class':'clear'});
		div_clear.inject(li);
		//This handle element will serve as the point where the user 'picks up'
		//the draggable element.
		//var handle = new Element('div', {id:'handle-'+i, 'class':'drag-handle'});
		//handle.inject(li, 'top');
		
		var div_img = new Element('div', {'style':'float:right;padding:0px;'});
		div_img.inject(div_clear);
		
		var div_keyword = new Element('div', {id:'record-'+i+'-value','style':'float:left;margin-top:2px;', text:val });
		div_keyword.inject(div_clear);
		
		var img_anchor = new Element('a', {'href':'?delete='+i,'class':'delete',id:'anc-'+i,'onclick':'deleteRow(this.id);return false'});
		img_anchor.inject(div_img);
		
		var img = new Element('img', {'src':'images/delete.png','alt':'Delete','width':'24','height':'24','border':'0'});
		img.inject(img_anchor);
		
		//var input = new Element('input', {'type':'checkbox',id:'chk'+i,name:'chk'+i});
		//input.inject(div_chkbox);
		
		//Set the value of the form to '', since we've added its value to the <li>.
		$('newTask').set('value', '');
		//Add the <li> to our list.
		$('todo').adopt(li);
		//Do a fancy effect on the <li>.
		li.highlight();
		//We have to add the list item to our Sortable object so it's sortable.
		sort.addItems(li);
		//We put the new order inside of the data div.
		//showNewOrder();
		i++;
	});

});

// delete the value from hidden box and array
function deleteValue(id){
	var	stringValue = document.getElementById("record-"+id+"-value").innerHTML;
	if(myKeywords.length > 0){
			for (x=0;x<=myKeywords.length;x++){
				if(myKeywords[x]==stringValue){
					slicedvalue1 = myKeywords.slice(0,x+1);
					slicedvalue2 = myKeywords.slice(x+1);
					deleted = slicedvalue1.pop();
					var myarraystring = slicedvalue1.toString() + "," +slicedvalue2.toString();
					var mynewarray = new Array();
						mynewarray = myarraystring.split(",");
					myKeywords = mynewarray;
					//alert(x +'\n'+  slicedvalue1 +'\n'+ slicedvalue2  +'\n'+ deleted  +'\n'+  myKeywords);
					document.getElementById("added-keywords").value = myKeywords;
					return true;
				}
			}// and the loop goes on until...
	}
}