$(document).ready(function(){
	if($.cookie('idatalink_phone') != null){
		displayNumber($.cookie('idatalink_phone'));
	}
	else {
		getAreaCode();
	}
});

var MyAreaCode;
function getAreaCode(){
		$.ajax(
			{
				'url':'/idatalink/phone/get-area-code',
				'type':'GET',
				'dataType':'json',
				success : function (data) {
					displayNumber(data.DID);
				},
				error : function (XMLHttpRequest, textStatus, errorThrown) {
					MyAreaCode = '866';
					getDID(true);					
				}
			}
		);
	}
function changeAreaCode(){
	//alert('ouains');
	$('#runtime').html('<input type"text" id="area_field"/><span id="btn_get_did">This is my area code</span>');
	$('#area_field').bind('change',function(){MyAreaCode = $('#area_field').val()});
	$('#btn_get_did').bind('click',getDID);
}				
function getDID(c){
		var timeout = setTimeout(
		function(){
		$('#runtime').append('<span id="please_wait">Please wait...</span>');
		}, 2000);
		$.ajax(
			{
				url:'/idatalink/phone/get-did/area/'+MyAreaCode,
				type:'GET',
				dataType: "json",
				success : function (data) {
					displayNumber(data);
					try{clearTimeout(timeout);}catch(e){}
					$('#please_wait').remove();
					$('#runtime').css('cursor','');
					$('#runtime').unbind('click',getDID);
					},
					error : function (XMLHttpRequest, textStatus, errorThrown) {
						MyAreaCode = '866';
						getDID(true);		
					}
			}
		);
	}
	
function displayNumber(num){
	$('#runtime').html("<span class=\"myNum\">Tech Support Number :</span>" + num);
	if(num.DID) num = num.DID;
	$('.phone_num').text(num);
	notMyNumber();
}
function notMyNumber(){
	$('#runtime').after('<span id="notMyNum">Click here to change area.</span>');
	$('div#phonebox>#notMyNum').hover(function(){$(this).toggleClass('over')},function(){$(this).toggleClass('over')});
	$('#notMyNum').css('cursor','pointer');
	$('#notMyNum').one('click',function(){
			$('#runtime').html('Enter your area code (e.g. 514)<input type="text" id="newArea"><span class="link">Enter</span>');
			$('#newArea').focus();
			$('#newArea').keydown(function(event){
    			if (event.keyCode == 13) {
        			setNumAndGetDID();
        			return;
   					} 
				});
			$('#newArea').keypress(function(event){
				//allow Backspace or Delete (8 or 46)
				if(event.keyCode == 8 || event.keyCode == 46) return true;
				//allow arrows
				if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) return true;
				//allow tab
				if(event.keyCode == 9) return true;
				var charCode = event.charCode?event.charCode:event.keyCode;
				keychar = String.fromCharCode(charCode);
				numcheck = /\d/;
				return numcheck.test(keychar) && $('#newArea').val().length < 3;

			});
			$('#runtime span').one('click',setNumAndGetDID);
			$('#runtime span').hover(function(){$(this).toggleClass('over')},function(){$(this).toggleClass('over')});
			$('#notMyNum').remove();
		});
		
	function setNumAndGetDID(){MyAreaCode = $('#newArea').val(); getDID(true);}
}		