var map;
var marker;
var index = 0;

function mapInit(){
	if (GBrowserIsCompatible()) {
	    map = new GMap2(document.getElementById("map"));
	    map.enableContinuousZoom();
		map.enableScrollWheelZoom();
		GEvent.addListener(map, "dblclick", function(o,p) {
          map.clearOverlays();
		marker = new GMarker(p, {draggable: true});
		GEvent.addListener(marker, "dragstart", function() {  
			map.closeInfoWindow();  
			});
		GEvent.addListener(marker, "dragend", function() {
			marker.openInfoWindowHtml("If you are happy with this location click <br /> <a href='javascript:showForm()'>Continue</a>");  
			});
		map.addOverlay(marker);
		marker.openInfoWindowHtml("Use your mouse to drag the marker as close as you can to the location <br />of the incident; if you are happy with this location click <br /> <a href='javascript:showForm()'>Continue</a>");
         });
	    map.addControl(new GLargeMapControl());
	    map.setCenter(new GLatLng(54, -1.5), 5);
	}
}

function treeInit(){
    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel('treeDiv', {
        animate:true, 
        loader: new Tree.TreeLoader({
            dataUrl:requestJSONURL
        }),
        enableDD:false,
        containerScroll: true,
        rootVisible: false,
        selModel: new Tree.MultiSelectionModel
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'MetaData',
        draggable:false,
        id:'props'
    });
    tree.setRootNode(root);
	tree.on('checkchange',changeMetaData,true,true);
    //render the tree
    tree.render();
    root.expand();
    document.body.onUnload = GUnload();
	//mapInit();
}
function changeMetaData(node,checked){
	var checkedNodes = node.getOwnerTree().getChecked("id",node.getOwnerTree().getRootNode());
	document.getElementById("mdselected").value = checkedNodes.toString();
}
function addMarker(){
	marker = new GMarker(map.getBounds().getCenter(), {draggable: true});
	GEvent.addListener(marker, "dragstart", function() {  
		map.closeInfoWindow();  
		});
	GEvent.addListener(marker, "dragend", function() {
		marker.openInfoWindowHtml("If you are happy with this location click <br /> <a href='javascript:showForm()'>Continue</a>");  
		});
	map.addOverlay(marker);
	marker.openInfoWindowHtml("Use your mouse to drag the marker as close as you can to the location <br />of the incident; if you are happy with this location click <br /> <a href='javascript:showForm()'>Continue</a>");
}

function showForm(){
	treeInit();
	document.getElementById("body").style.display='none';
	document.getElementById("map").style.display='none';
	document.getElementById("submision").style.display='block';
	//need to switch the editor through editing modes to re enable after showing div
	//DoSwitchEditors(document.getElementById("editor"));
	document.getElementById("CMNX_GEOCODE_LAT").value = marker.getPoint().lat();
	document.getElementById("CMNX_GEOCODE_LNG").value = marker.getPoint().lng();	
}

function DoSwitchEditors(oNode) {
  var i;
  for (i = 0; i < oNode.childNodes.length;i++) {
    childNode = oNode.childNodes.item(i);
    editor = FCKeditorAPI.GetInstance(childNode.name);
    if (editor && editor.EditorDocument && editor.EditMode == FCK_EDITMODE_WYSIWYG) {
      editor.SwitchEditMode();
      editor.SwitchEditMode();
    }
    DoSwitchEditors(childNode);
  }
}

function add() {
	document.getElementById("attachment"+index).onchange="";
	index++;
	var component = document.createElement("li");
	component.id = 'liUpload'+index;
	
	component.innerHTML = "<label for='attachment"+
			index+"'>Attach another file:</label>"+
			" <input type='file' name='attachment"+
			index+"' id='attachment"+index+
			"' class='file' onchange='add()'/>";
	document.getElementById("upload").appendChild(component);	
}

Ext.onReady(function(){
	mapInit();
});