function createLiveEditFrame(src, editElement){
    //alert(src);
    var frameID = 'LiveEditFrame';
    
    editElementPosition = editElement.getPosition();
   
    if($(frameID)){
       $(frameID).dispose(); 
    }
    
    div = document.createElement("div");
    div.setAttribute('id', frameID);
    div.style.position = 'absolute';
    div.style.top = (editElementPosition.y) +'px';
    div.style.left = editElementPosition.x +'px';
    div.style.float = '';
    div.style.zIndex = 99;
    div.style.border = '1px solid black';
    div.style.background = 'white';
   
    var p = document.createElement('p');
   
    p.addEvent('click', function(){ $(frameID).dispose();});
   
    div.style.background = '#FF0000';
    div.style.color = '#FFFFFF';
    p.style.textAlign = 'center';
    p.style.cursor = 'pointer';
    p.appendChild(document.createTextNode("Close"));
    div.appendChild(p);
  
    ifrm = document.createElement("IFRAME");
    ifrm.setAttribute("src", src);
    ifrm.style.width = 600+"px";
    ifrm.style.height = 300+"px";
    ifrm.style.overflow = "hidden";
    
    div.appendChild(ifrm);
    
    document.body.appendChild(div); 
    
    
}

function liveEditUserChange(){
    window.location = '/admin/liveedit/userchange/trigger1/' + $('trigger1').value  + '/trigger2/' + $('trigger2').value; 
    
}

function liveEditCheckTriggers(){
    
    var trigger1;
    var trigger2;
    
    var req = new Request.JSON({url: '/ajax/process/class/Application_Models_UserData/method/__get/arg0/trigger1/',async: false,
	onSuccess: function(retData){

		trigger1 = retData;
	}
	});

	req.send();
	
	 var req = new Request.JSON({url: '/ajax/process/class/Application_Models_UserData/method/__get/arg0/trigger2/',async: false,
	onSuccess: function(retData){

		trigger2 = retData;
		
	}
	});
	
	req.send();
	
	// If the user changes a trigger via site navigation we need to see if it no longer matches the select boxes above the iframe.
	//  
	// Ideally we should change the select box contents via javascript, which is fine for setting the value but awkward for trigger2 where the 
	// entire option list may have changed.
	// So for now we do a full refresh if trigger1 has changed which means that we need to change the trigger2 options.
	
	var trigger1Change = false;
	var trigger2Change = false;
	
	if(trigger1){
	    if( trigger1 != $('trigger1').value){
	       trigger1Change = true;
	    }
	}
	if(trigger2){
	    if( trigger2 != $('trigger2').value){
	       trigger2Change = true; 
	    }
	}
	
	if(trigger1Change){
	   window.location = '/admin/liveedit/userchange/trigger1/' + trigger1  + '/trigger2/' + trigger2; 
	}else if(trigger2Change){
	   $('trigger2').value = trigger2; 
	}
	
	
}	

function callMe(){
    
    var userPhoneNumber = $('callMePhonenumber').value;
    
    if(userPhoneNumber != 'Phone number' && userPhoneNumber != ''){
        
    	$('enterPhoneNumber').innerHTML = '<img src="/assets/images/icons/loader.gif" style="margin-left:80px;padding-top:20px;"/>';
    	
    	
        var req = new Request.JSON({url: '/ajax/process/class/Application_Models_UserCallRequest/method/makeCallRequest/arg0/' + userPhoneNumber,
	        onSuccess: function(returnVal){

	           
	           	   $('enterPhoneNumber').innerHTML  = '<p>&nbsp;</p><p><span style="color:green">Your callback request has been submitted and you will recieve a call shortly.</span></p>' +
	           		   								  '<img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/1069382947/?label=rM_RCKm6iQEQo_r1_QM&amp;guid=ON&amp;script=0"/>' +
	           		   								  '<img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/1034835759/?label=NIZwCIXBmgEQr6657QM&amp;guid=ON&amp;script=0"/>';
	        },
	        onFailure: function(reason){
	        	
	           	   $('enterPhoneNumber').innerHTML = '<p>&nbsp;</p><p><span style="color:red">Your callback request has failed, please try again later.</span></p>';
	        	
	        }
	    });
	    
	    req.send();    
	    
    }else{
	
	   $('enterPhoneNumber').innerHTML = $('enterPhoneNumber').innerHTML + '<br/><span style="color:red">You need to enter your phone number.</span>';
    }
	
}

function togglePhone( focus ){
	
	if( $('callMePhonenumber').value == 'Phone number' && focus == true){
		
		$('callMePhonenumber').value = '';
		$('callMePhonenumber').style.color = '#CED2B9';

		
	}else if( $('callMePhonenumber').value == '' && focus == false){
		
		$('callMePhonenumber').value = 'Phone number';
		$('callMePhonenumber').style.color = 'black';
	}
	
	
}