/* 
	
		ID's of objects
			Tag: tag name
			TagTime: tag name + "Time"
	*/
	
	var tagImageString = "/~jlintern/greyBox2.bmp";
	
	var tagLeftStartingPoint = 120;
	var tagTopStartingPoint = 170;
	var tagLeftIncrement = 125;
	var tagTopIncrement = 101;
	var resetLeftTagStartingPoint = tagLeftStartingPoint;
	var tagTimeFontSize = "50%"
	var tagTextFontSize = "75%"

	
	/*keeps track of number of tags, and helps index the array etc... */
	var tagIdCount = 0;
	/* array of tags currently for lecture*/
	var myTags = new Array();
	var tagsDrawn = false;

function Tag( tagName, tagText, tagHours, tagMinutes, tagSeconds, timeString){

	this.name = tagName;
	this.text = tagText;
	this.seconds = tagSeconds;
	this.minutes = tagMinutes;
	this.hours   = tagHours;
	this.time = timeString;
	this.x = tagLeftStartingPoint + 'px';
	this.y = tagTopStartingPoint + 'px';
	/* so tags don't get redrawn */
	this.alreadyPlaced = 0;

}

/* This function creates a new tag and then pushes it onto the end of an array of tags. After added to the array, drawTags is called to redraw all the tags.  */
function createTag(){

/*increment tag counter first, so that indexing starts at 1 */
tagIdCount = tagIdCount + 1;

	var tag1 = new Tag("tag"+tagIdCount, document.tagInput.tagContents.value,getCurrentHours(), getCurrentMinutes(), 
	                   getCurrentSeconds(), getCurrentTime());

	/* INDEXING OF ARRAY STARTS AT 1 !!! */
	myTags[tagIdCount] = tag1; /* add tag*/
	sendTag("test", tag1.text);
	//drawTagsDos();  /* draw all tags*/
}

function drawTagsDos(){
/*clear tags if there are any drawn*/
	if(tagsDrawn == true){
	     //alert("going into remove tags");
	     removeAllTags();
    }

	var i = 1; 
	var newTag;
	var stuffTyped;
	var time;
	var temp = document.getElementById('tagHolder');

	
	var row_minutes  = 0;
	
	tagLeftStartingPoint = resetLeftTagStartingPoint;


	/*for recognizing when to start a new row*/
	var tempMinutes = -1;
	/* cycle through array of tags to draw */
	for(i; i <= tagIdCount; i++){
	
		    //alert("placing tag: " + i); 
		
			newTag = document.createElement("img");
			newTag.setAttribute("src", tagImageString);

			/* need to figure out how many tags are in a row, in order to reset x value for new row */

			row_minutes = myTags[i].minutes;
			if(row_minutes == tempMinutes){
				
				if(i > 1){ //  so we don't push our first tag
					//alert(tempMinutes+ " & " + row_minutes); 
					tagLeftStartingPoint = tagLeftStartingPoint + tagLeftIncrement;
				}
			}
			else{
			    //alert("new row");
			    //alert(tempMinutes+ " & " + row_minutes); 
			    tagLeftStartingPoint = resetLeftTagStartingPoint;
			}
			
			newTag.style.position = "absolute";
			newTag.style.left = tagLeftStartingPoint + "px";
			newTag.style.top  = myTags[i].y;
			newTag.setAttribute('id', myTags[i].name);	
	
			/*make tags clickable*/
			//newTag.onclick= function(){moveAudioPlayer();};
//			newTag.onclick = moveAudioPlayer;
//			newTag.style.cursor='pointer';

			
			/*adding tag*/
			temp.appendChild(newTag);
			tempMinutes = row_minutes;
			myTags[i].alreadyPlaced = 1;
			
			/*
				adds time to upper left hand corner 
				addTimeString(current tag, x, y, object to append)
			*/
			addTimeString(i, newTag.style.left, myTags[i].y, temp);
			
			/*adds text to the body of the tag */
			addTextString(i, newTag.style.left, myTags[i].y, temp);
		
	}

	tagsDrawn = true; /*to make sure we don't try to remove things before they arn't suppose to */
	tagLeftStartingPoint = resetLeftTagStartingPoint;

}



/* function draws the tags that are in the array... I think all tags should be drawn, unless this is a pain or looks bad... to simplify things, becuase then this function
     can easily be called whenever we need to update the tags from the server */
	 
function drawTags(){

	/*clear tags if there are any drawn*/
	if(tagsDrawn == true){
	     //alert("going into remove tags");
	     removeAllTags();
    }

	var i = 1; 
	var newTag;
	var stuffTyped;
	var time;
	var temp = document.getElementById('tagHolder');
	
	var row_minutes  = 0;
	
	tagLeftStartingPoint = resetLeftTagStartingPoint;


	/*for recognizing when to start a new row*/
	var tempMinutes = -1;
	
	/* cycle through array of tags to draw */
	for(i; i <= tagIdCount; i++){
	
		    //alert("placing tag: " + i); 
		
			newTag = document.createElement("img");
			newTag.setAttribute("src", "/~jlintern/greyBox.bmp");

			/* need to figure out how many tags are in a row, in order to reset x value for new row */

			row_minutes = myTags[i].minutes;
			if(row_minutes == tempMinutes){
				
				if(i > 1){ //  so we don't push our first tag
					//alert("pushing a tag over");
					//alert(tempMinutes+ " & " + row_minutes); 
					tagLeftStartingPoint = tagLeftStartingPoint + tagLeftIncrement;
				}
			}
			else{
			    //alert("new row");
			    //alert(tempMinutes+ " & " + row_minutes); 
			    tagLeftStartingPoint = resetLeftTagStartingPoint;
			}
			
			newTag.style.position = "absolute";
			newTag.style.left = tagLeftStartingPoint + "px";
			newTag.style.top  = tagTopStartingPoint + (tagTopIncrement * row_minutes) + "px";
			newTag.setAttribute('id', myTags[i].name);	
	
			/*make tags clickable*/
//			newTag.onclick= function(){moveAudioPlayer();};
//			newTag.style.cursor='pointer';

			
			/*adding tag*/
			temp.appendChild(newTag);
			tempMinutes = row_minutes;
			myTags[i].alreadyPlaced = 1;
			
			/*
				adds time to upper left hand corner 
				addTimeString(current tag, x, y, object to append)
			*/
			addTimeString(i, newTag.style.left, newTag.style.top, temp);
			
			/*adds text to the body of the tag */
			addTextString(i, newTag.style.left, newTag.style.top, temp);
		
	}

	tagsDrawn = true; /*to make sure we don't try to remove things before they arn't suppose to */
}

function removeAllTags(){
	var temp = document.getElementById('tagHolder');
	var tempTagIdHolder;
	var tempElementHolder;
	var i = 1; 
	while (temp.firstChild) 
	{
	//The list is LIVE so it will re-index each call
		temp.removeChild(temp.firstChild);
	};

	return;

	for(i; i <= tagIdCount; i++){
	    
		/*don't want to try and remove anything not already drawn to the page*/
		if(myTags[i].alreadyPlaced == 1){
			
			/*remove grey image */
			tempTagIdHolder = myTags[i].name;
			tempElementHolder = document.getElementById(tempTagIdHolder);
		    temp.removeChild(tempElementHolder);
			/*remove tag time*/
			tempElementHolder = document.getElementById(tempTagIdHolder+"Time");
			temp.removeChild(tempElementHolder);
			/*remove tag text*/
			tempElementHolder = document.getElementById(tempTagIdHolder+"Text");
			temp.removeChild(tempElementHolder);
			
			myTags[i].alreadyPlaced = 0;
		}
	}
	//alert("all tags should be removed");
}

function addTimeString( whichTag, tag_X_coord, tag_Y_coord, objectToAppend) {

	var tag_x_coord = parseInt(tag_X_coord);
	var tag_y_coord = parseInt(tag_Y_coord);
	
	var newTagTime = document.createElement("div");
	var newTagTimeId = myTags[whichTag].name + "Time";
	
	newTagTime.setAttribute('id', newTagTimeId);
	
	newTagTime.style.position = "absolute";
	newTagTime.style.fontSize = tagTimeFontSize;
	newTagTime.style.left = (tag_x_coord+13) + "px";
	newTagTime.style.top  = (tag_y_coord+4) + "px";
	newTagTime.innerHTML = myTags[whichTag].time;

    objectToAppend.appendChild(newTagTime);
}

function addTextString( whichTag, tag_X_coord, tag_Y_coord, objectToAppend) {

	var tag_x_coord = parseInt(tag_X_coord);
	var tag_y_coord = parseInt(tag_Y_coord);
	
	var newTagTime = document.createElement("textarea");
	var newTagTimeId = myTags[whichTag].name + "Text";
	
	newTagTime.setAttribute('id', newTagTimeId);
	newTagTime.setAttribute("cols", 11);
	newTagTime.setAttribute("rows", 4);
	newTagTime.setAttribute("DISABLED", "readonly");
	
	newTagTime.style.position = "absolute";
	newTagTime.style.fontSize = tagTextFontSize;
	newTagTime.style.left = (tag_x_coord+14) + "px";
	newTagTime.style.top  = (tag_y_coord+20) + "px";

	newTagTime.innerHTML = myTags[whichTag].text;

    objectToAppend.appendChild(newTagTime);
}

function testTag(){
 
	var newTag;
	var stuffTyped = document.tagInput.tagContents.value;
	var blackBar = document.getElementById('top');
	
	var temp = document.getElementById('tagHolder');
	
	/*creating tag as image*/
	newTag = document.createElement("img");
	newTag.setAttribute("src", "/~jlintern/greyBox.bmp");
	
	//alert(tag1.name);
	temp.appendChild(newTag);
	
	document.getElementById("tagText").firstChild.nodeValue = stuffTyped;
	
}


function arrayTester(){

/* get value by document form */
var tagToTest = parseInt(document.tagArrayTest.tat.value);

if(tagIdCount == 0)
    alert("No tags in array yet");
else if(tagToTest > tagIdCount){
	var temp = tagIdCount;
	temp = temp - 1;
    alert("Outside Valid range of:" + temp);
}
else if(tagToTest == 0){
    alert("Array indexing begings at 1, no tags at position 0");
}
else{
	alert("testing Tag #:" + tagToTest);
	alert(myTags[tagToTest].name);
	alert(myTags[tagToTest].text);
	alert(myTags[tagToTest].hours);
	alert(myTags[tagToTest].minutes);
	alert(myTags[tagToTest].seconds);
	alert(myTags[tagToTest].time);
}

}

/* push down all the tags some amount 

pushDistance is defined in timeScroll.jss
*/
function pushDownTags(){
	var tempTagID;
	var holdTop;

    for( var i = 1; i < myTags.length; i++){
	    tempIDName = myTags[i].name;
		
		/* push tag border*/
		holdTop = document.getElementById(tempIDName).style.top;
		holdTop = parseInt(holdTop) + pushDistance;
		document.getElementById(tempIDName).style.top = holdTop;
		
		/*push tag text */
		tempIDName = myTags[i].name + 'Text';
		holdTop = document.getElementById(tempIDName).style.top;
		//alert(holdTop);
		holdTop = parseInt(holdTop) + pushDistance;
		document.getElementById(tempIDName).style.top = holdTop;
		
		/*push tag time*/
		tempIDName = myTags[i].name + 'Time';
		holdTop = document.getElementById(tempIDName).style.top;
		holdTop = parseInt(holdTop) + pushDistance;
		document.getElementById(tempIDName).style.top = holdTop;
    }
}

function pushDownTagsDos(){
	var tempTagID;
	var holdTop;
    for( var i = 1; i < myTags.length; i++){
		//alert("y was " + myTags[i].y);
		myTags[i].y = (parseInt(myTags[i].y) + pushDistance) + "px";
		//alert("y is now: "+ myTags[i].y);


		/* push tag border
		holdTop = document.getElementById(tempIDName).style.top;
		holdTop = parseInt(holdTop) + pushDistance;
		document.getElementById(tempIDName).style.top = holdTop;
		*/
    }
	drawTagsDos();
}


/*  Sends to the moveAudioPlayer the time to move to*/
function moveAudioPlayer(){
	 
	 for(var i = 1; i < myTags.length ; i++){
		if(this.id == myTags[i].name)
			alert("time to go to is: " + myTags[i].time);
	 }
}

function createTagFromServer(text, seconds, minutes, hours){
	tagIdCount = tagIdCount + 1;

	var tempTimeStream; 
	var tempMinutes;
	var tempSeconds
	tempMinutes = ( minutes < 10 ? "0" : "" ) + minutes;
	tempSeconds = ( seconds < 10 ? "0" : "" ) + seconds;

	//puts it all together
	tempTimeStream = hours + ":" + tempMinutes + ":" + tempSeconds ;
	
		var tag1 = new Tag("tag"+tagIdCount, text,hours, minutes, 
		                   seconds, tempTimeStream);

		/* INDEXING OF ARRAY STARTS AT 1 !!! */
		myTags[tagIdCount] = tag1; /* add tag*/
}