// use an event listener to run init on page load, better than onLoad
function addEvent(element, type, handler) {
    // assign each event handler a unique ID
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    // create a hash table of event types for the element
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        // store the existing event handler (if there is one)
        if (element["on" + type]) {
            handlers[0] = element["on" + type];
        }
    }
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
    // delete the event handler from the hash table
    if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
    }
};

function handleEvent(event) {
    // grab the event object (IE uses a global event object)
    event = event || window.event;
    // get a reference to the hash table of event handlers
    var handlers = this.events[event.type];
    // execute each event handler
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        this.$$handleEvent(event);
    }
};

// addEvent(window, 'load', init);
// bad me, global variable stores the list of routes
var routes = new Array();

var MyDraggable = Class.create();
MyDraggable.prototype = (new Rico.Draggable()).extend( {

	initialize: function( type, htmlElement ) {
		var node = document.getElementById(htmlElement);
		this.htmlElementString = node.id;
		this.type        = type;
		this.htmlElement = $(htmlElement);
		this.selected    = false;
	},

// nitialize: function( type, htmlElement ) {
  //    this.type          = type;
//      this.htmlElement   = $(htmlElement);
//      this.selected      = false;
//   },


// getSingleObjectDragGUI: function() {
//       return this.htmlElement;
//   },
//		var W3CDOM = (document.createElement && document.getElementsByTagName);
//		if (!W3CDOM) alert('No W3CDOM');
//
//		new Rico.Effect.FadeTo( this.htmlElement,.2,250,10 );
//		// alert(this.htmlElement.src);
//		 var label = this.htmlElement.src;
//		// var label = this.htmlElement.innerHTML;
//		var div = document.createElement('idiv');
//		var img = document.createElement('img');
//		div.id = "fakeitem";
//		this.fakeElement = "fakeitem";
//		div.className = 'item dragging';
//		div.src = label;
//		div.style.zIndex = 100;
//		// alert(label);
//	

getSingleObjectDragGUI: function() {

	new Rico.Effect.FadeTo( this.htmlElement,.2,250,10 );
	var div = document.createElement("div");
	div.id = "fakeitem";
	div.className = 'item dragging';
	div.style.zIndex = 100;
	
	new Insertion.Top( div, this.htmlElement.innerHTML );
	return div;
},

	
	cancelDrag: function() {
		new Rico.Effect.FadeTo( this.htmlElement,1,100,10 );
	},
	
	endDrag: function() {
		new Rico.Effect.FadeTo( this.htmlElement,1,100,10 );
	},
	
	select: function() {
	}

} );

 var CustomDropzone = Class.create();
 CustomDropzone.prototype = (new Rico.Dropzone()).extend( {
 	initialize: function( htmlElement,action ) {
 		var node = document.getElementById(htmlElement);
 		this.htmlElementString = node.id;
 		this.htmlElement  = $(htmlElement);
 		this.absoluteRect = null;
 		this.action = action;
 		
 	},
 	
 	accept: function(draggableObjects) {
 		// now put code here to do what you need to when something is dropped
 		// this.htmlElement is the name of the dropzone
 		// draggableObjects[0].htmlElement is the name of the first draggable element
 		dndMgr.interestedInMotionEvents = true;
 			// if target is 'delete-drop' then remove the element from the array and hide the dragged element
 		if(this.htmlElement.id == 'delete-drop') {
 			routes.splice(draggableObjects[0].htmlElement.attributes.number.value,1)
 			draggableObjects[0].htmlElement.style.display = "none";
 			displayRoutes(document.getElementById('results'),routes);
 		}
		// var imgElements = document.getElementsByName('fakeitem');
		var content = document.getElementById('fakeitem');
		if( content ) {
			this.htmlElement.innerHTML = content.innerHTML;
			var myID = getFirstChild('fakeitem').id; 
			var myName = getFirstChild('fakeitem').name; 
		
			if (!myID)
			{
				myID = content.firstChild.nextSibling.id;
			}
			
			var lang = document.getElementById("lang");
			var myRegExp = /-/;
			var matchPos1 = myID.search(myRegExp);

			if(matchPos1 != -1)
			{
				var mySplitResult = myID.split("-");
				myID = mySplitResult[1];
			}
						
			document.sendform.file.value = myID;
			document.sendform.kid.value = myID;
			if (lang.innerHTML == "spanish")
			{
				this.htmlElement.innerHTML = "<b>" + myName + "<br> est&aacute; listo para ser enviado.</b><br>Introduce tu n&uacute;mero de tel&eacute;fono en la casilla y presiona ENVIAR.";
			}
			else
			{
				this.htmlElement.innerHTML = "<b>" + myName + "<br> is ready to send.</b><br>Enter your phone number in the field below and press 'Send to Phone'.";
			}
			
			//this.htmlElement.innerHTML = "<b>" + myID + "<br> is ready to send.</b><br>Enter your phone number in the field below and press 'Send to Phone'.";
			//alert(document.sendform.file.value);

			// this.htmlElement.sytle.zIndex = 1;
		}
 	}
 } );

function init() {

   dndMgr.registerDropZone( new CustomDropzone('screen') );	
   
	// loop through the page and find all forms with the class 'ajax' then add a
    var imgElements = document.getElementsByTagName('div');
    for (var i = 0; i < imgElements.length; i++) {
        if (imgElements[i].className.match(/\bajaxdiv\b/)) {
			if(imgElements[i].id) {
				dndMgr.registerDraggable( new MyDraggable('test-rico-dnd', imgElements[i].id ) );
			}
        }
		
    }
//    var imgElements = document.getElementsByTagName('img');
//    for (var i = 0; i < imgElements.length; i++) {
//        if (imgElements[i].className.match(/\bajaxdiv\b/)) {
//			if(imgElements[i].id) {
//				dndMgr.registerDraggable( new MyDraggable('test-rico-dnd', imgElements[i].id ) );
//			}
//        }
//		if (imgElements[i].className.match(/\bthumbnail large\b/)) {
//			if(imgElements[i].id) {
//				dndMgr.registerDraggable( new MyDraggable('test-rico-dnd', imgElements[i].id ) );
//			}
//		}
//    }
}

function addRoute(e) {
	//cancel the normal form submit event
	knackerEvent(e);
	//get the form element from the submit event
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
	
	// create a new route object, give it the values from the form and add it to the array of routes
	myRoute = new Object();
	myRoute.project = target.elements['project'].value;
	//myRoute.fullmiss = getRadioValue(target.elements['fullmiss']);
	myRoute.elecwat = getRadioValue(target.elements['elecwat']);
	//if (myRoute.fullmiss == 'missed') {
	//	myRoute.days = target.elements['days'].value;
	//} else {
	//	myRoute.days = 0;
	//}
	routes.push(myRoute);
	

	// call function to display routes in the results div
	displayRoutes(document.getElementById('results'),routes);
	
	// If last route then we need to post the form to the cgi script to build the route
	if(getRadioValue(target.elements['lastroute']) == 'Yes') {
		submitRoutes(e);
	}
}

// builds html to display routes to generate
function displayRoutes(target,arr) {
	var sHTML = "<div id='title'>Routes</div>";
	for (x = 0;x < arr.length; x++) {
		var entry = 'route-entry'+x;
		sHTML += "<div id='"+entry+"'number='"+x+"'><div id='route-entry-style'><table>";
		sHTML += "<tr><td>Project:</td><td>"+arr[x].project+"</td></tr>";
		//sHTML += "<tr><td>FullMiss:</td><td>"+arr[x].fullmiss+"</td></tr>";
		//if (arr[x].fullmiss == 'missed') 
		//	sHTML += "<tr><td>Days:</td><td>"+arr[x].days+"</td></tr>";
		sHTML += "<tr><td>ElecWat:</td><td>"+arr[x].elecwat+"</td></tr>";
		sHTML += "</table></div></div>";
	}
	target.innerHTML = sHTML;
	for (x = 0;x < arr.length; x++) {
		var entry = 'route-entry'+x;
		dndMgr.registerDraggable( new MyDraggable('test-rico-dnd',entry) );
	}
}

function submitRoutes(e) {
	//cancel the normal form submit event
	knackerEvent(e);
	//get the form element from the submit event
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
	
	var projects = new Array();
	var fullmiss = new Array();
	var elecwat = new Array();
	var days = new Array();

	for (var x = 0; x < routes.length; x++) {
		projects.push(routes[x].project);
		//fullmiss.push(routes[x].fullmiss);
		elecwat.push(routes[x].elecwat);
		//days.push(routes[x].days);
	}
	var postUrl = "routes='"+x+"'&project='"+projects.join(',')+"'&elecwat='"+elecwat.join(',')+"'";
	alert(postUrl);
}
