var panelDisplayed = 1;
var stop = false;
var timer = false;
var searchTimer = false;
var previousPattern = false;
var previousArea = false;
var selectedArea = false;
var localCode = false;
var Gtooltip = "This is a gold number.<br /><br />An additional one-off fee of &pound;100.00 + VAT will be applied";
var Stooltip = "This is a silver number.<br /><br />An additional one-off fee of &pound;75.00 + VAT will be applied";
var Btooltip = "This is a bronze number.<br /><br />An additional one-off fee of &pound;50.00 + VAT will be applied";
var tooltips;
var helptips;
var memtips;
var bctips;

window.addEvent('load',function() {
	$('ac_area').set('value','Enter the town/city, or area code');
	if ($('ac_area').hasClass('disabled')) $('ac_area').removeClass('disabled');
	$('ac_area').set('disabled',false);
});

window.addEvent('domready',function () {
	if (Browser.Engine.trident && Browser.Engine.version == 4) {
		//If we're on IE6, remove the panel sticker. Transparency breaks.
		$('sticker').dispose();
	}
	registerClicks();
	
	$('slide2').setStyle('width','0px');
	$('slide3').setStyle('width','0px');
	$('slide4').setStyle('width','0px');
  changePanel.delay(5000);
	
	registerNumberSearch();
	
	tooltips = new Tips('.tooltip', { fixed: true, className: 'GWTip', offset: {'x':-16,'y':16}, onShowingBelow: resetTipPointer, onShowingAbove: moveTipPointer, onHide: hideTip, onShow: showTip });
	helptips = new Tips('.helptip', { fixed: true, className: 'GWTip', offset: {'x':-60,'y':16}, onShowingBelow: resetTipPointer, onShowingAbove: moveTipPointer, onHide: hideTip, onShow: showTip });
	memtips = new Tips('.memtip', { fixed: true, className: 'GWTip', offset: {'x':-25,'y':16}, onShowingBelow: resetTipPointer, onShowingAbove: moveTipPointer, onHide: hideTip, onShow: showTip });
	
	registerImageMaps();
	
	$('pattern_tip').store('tip:title','Gradwell Help');
	$('areacode_tip').store('tip:title','Gradwell Help');
	$('pattern_tip').store('tip:text','Enter a series of numbers, or letters which you wish to appear in your phone number');
	$('areacode_tip').store('tip:text','Type the first few letters of the city/town, or the numbers of the area code you wish to search, and then click on the correct entry from the popup options');
	$$('.memorable_number').each(function(ele, index) {
		ele.store('tip:title','Gradwell Help');
		ele.store('tip:text','This is a gold memorable number and carries a one-off setup fee of &pound;100.00 + VAT.<br /><br />Click the number to purchase');
		memtips.attach(ele);
	});
	helptips.attach($('areacode_tip'));
	helptips.attach($('pattern_tip'));
});

function resetTipPointer(obj) {
	obj.removeEvents('show');
	obj.addEvent('show',showTip);
}

function moveTipPointer(obj) {
	obj.removeEvents('show');
	obj.addEvent('show',showTipReversed);
	var kids = obj.tip.getChildren('.tip').getChildren('.tip-title');
	if (kids[0]) kids[0].setStyle('backgroundPosition','0px -5px');
}

function registerImageMaps() {
	// Not yet implemented.
	return;

	$('broadband_area').addEvent('mouseover',function() {
	});
	$('voip_area').addEvent('mouseover',function() {
	});
	$('email_area').addEvent('mouseover',function() {
	});
	$('web_area').addEvent('mouseover',function() {
	});

}

function showTip(tip, el) {
		tip.setStyle('opacity',0);
		tip.setStyle('marginTop',30);
		tip.morph({'opacity':1,'marginTop':0});
}

function showTipReversed(tip, el) {
		tip.setStyle('opacity',0);
		tip.setStyle('marginTop',0);
		tip.morph({'opacity':1,'marginTop':15});
}

function hideTip(tip, el) {
		tip.morph({'opacity':0,'marginTop':30});
}

function hideLegal() {
	$('numsearch_legal').setStyle('display','none');
}

function registerNumberSearch() {
	$('pattern').addClass('disabled');
	$('pattern').set('disabled',true);
	$('submit_div').dispose();
	var tokens = buildTokensFromAreaCodes();
	$('areacode').dispose();
	$('numsearch_form').addEvent('submit',function(e) {
		e.preventDefault();
		e.stopPropagation();
	});
	$('ac_area').setStyle('display','block');
	$('ac_area').addEvent('keydown', function() {
		if ($('ac_area').get('value') == previousArea) return;
		previousArea = $('ac_area').get('value');
		selectedArea = false;
		if (!$('pattern').hasClass('disabled')) $('pattern').addClass('disabled');
		$('pattern').set('disabled',true);
	});
	$('ac_area').addEvent('focus', function() {
		$('ac_area').removeClass('notclicked');
		$('ac_area').set('value','');
		$('ac_area').removeEvents('focus');
	});
	$('pattern').set('value','');
	new Autocompleter.Local('ac_area', tokens, {
		'minLength': 1,
		'selectMode': 'selection',
		'width': 325,
		'delay': 100,
		'gwKeyWatch': true,
		'injectChoice': function(choice) {
			if (choice[2]) {
				var el = new Element('li')
					.set('html',this.markQueryValue(choice[1]))
					.adopt(new Element('span', {'class': 'area-code'}).set('html'," ("+this.markQueryValue(choice[0]+'-'+choice[2])+")"));
				el.inputValue = choice[1]+" ("+choice[0]+'-'+choice[2]+")";
			} else {
				var el = new Element('li')
					.set('html',this.markQueryValue(choice[1]))
					.adopt(new Element('span', {'class': 'area-code'}).set('html'," ("+this.markQueryValue(choice[0])+")"));
				el.inputValue = choice[1]+" ("+choice[0]+")";
			}
			el.areaCode = choice[0];
			el.localCode = choice[2];
			this.addChoiceEvents(el).injectInside(this.choices);
		},
		'onSelection': function(input,select,inval,selval) {
			previousArea = $('ac_area').get('value');
			if ($('pattern').hasClass('disabled')) $('pattern').removeClass('disabled');
			if (typeof(select.areaCode) == "string") {
				selectedArea = select.areaCode.toInt();
			} else {
				selectedArea = false;
			}
			localCode = select.localCode;
			enablePattern();
		}
	});
}

function buildTokensFromAreaCodes() {
	var options = $('areacode').options;
	var tokens = new Array();
	var total = options.length;
	var i = 0;
	var option;
	while (i < options.length) {
		option = options[i];
		i++;
		if (option.value !== "false") {
				var text = option.text;
				var split = text.split(' | ',2);
				var area = "0"+option.value;
				var arr = area.split(':');
				var local = false;
				if (arr.length != 1) {
					area = arr[0];
					local = arr[1];
				}
				tokens.push([area,split[1],local]);
		}
	};
	return tokens;
}

function enablePattern() {
	if (selectedArea !== false) {
		$('pattern').set('disabled',false);
		$('pattern').addEvent('keydown',watchPattern);
		patternSearch();
	} else {
		resetNumberSearch();
		$('pattern').set('value','');
		$('pattern').set('disabled',true);
		$('pattern').removeEvents('keydown');
	}
	var value = $('pattern').get('value');
	if (value.trim() != "") patternSearch();
}

function watchPattern() {
	if (searchTimer) window.clearTimeout(searchTimer);
	searchTimer = window.setTimeout(patternSearch,500);
}

function patternSearch() {
	var areacode = selectedArea;
	if (areacode == false) return;
	var pattern = $('pattern').get('value').trim();
	if (pattern+areacode == previousPattern) return;
	$('num_sel_welcome').morph({'height':0,'padding-top':0,'padding-bottom':0});
	$('num_sel_area').morph({'height':0,'padding-top':0,'padding-bottom':0});
	$('numsearch_legal').tween('opacity',0);
	hideLegal.delay(500);
	$('numsearch_rescount').set('html','');
	$('numsearch_results').setStyle('display','none');
	$('numsearch_load').setStyle('display','block');
	previousPattern = pattern+areacode;
	var telservCall = new Request.JSON({
			url: "/telserv_ajax.php",
			onSuccess: function(response) {
				if (response.state == "ok") {
					if (response.total == 0) {
						$('numsearch_results').set('html','No numbers were found with your requested pattern<br />(Area Code: 0'+response.area+', Local Code: '+response.local+', Pattern: '+response.pattern+")");
					} else {
						var pattern = response.pattern;
						$('numsearch_results').set('html','');
						if (response.total == 1) {
							$('numsearch_rescount').set('html','Found 1 number. Click it to purchase');
						} else {
							$('numsearch_rescount').set('html','Found '+response.total+' numbers. Click any to purchase');
						}
						response.numbers.each(function(number,index) {
							var className = "";
							var html = "";
							var tip = "";
							var tiptitle = "";
							if (number.type === false) {
								className = "numres";
								html = '<a href="https://voip.gradwell.com/register/signup?reset=1&set_number='+number.number+'">'+highlightSelected(number.f_number,pattern)+'</a>';
							} else {
								if (number.type == "G") {
									tip = Gtooltip;
									tiptitle = "Gold Number";
								} else if (number.type == "S") {
									tip = Stooltip;
									tiptitle = "Silver Number";
								} else if (number.type == "B") {
									tip = Btooltip;
									tiptitle = "Bronze Number";
								}
								className = "numres goldtype"+number.type;
								html = '<a href="https://voip.gradwell.com/register/signup?reset=1&set_golden='+number.number+'">'+highlightSelected(number.f_number,pattern)+'</a>';
							}
							var newDiv = new Element('div', {
								'class': className,
								'html': html
							});
							if (number.type !== false) {
								newDiv.store('tip:title',tiptitle);
								newDiv.store('tip:text',tip);
								tooltips.attach(newDiv);
							}
							newDiv.inject('numsearch_results');
						});
					}
				} else {
					$('numsearch_results').set('html','An error occurred during number check: '+response.message);
				}
				$('numsearch_results').setStyle('opacity',0);
				$('numsearch_results').setStyle('display','block');
				$('numsearch_results').tween('opacity',1);
				$('numsearch_load').setStyle('display','none');
			},
			onFailure: function(response) {
					$('numsearch_load').setStyle('display','none');
					$('numsearch_results').setStyle('display','block');
					$('numsearch_results').set('html','Sorry, we are unable to check for available numbers at present.<br /><br />This is a temporary fault and will be rectified shortly.');
			}
	}).post({'area': areacode, 'pattern': pattern, 'local': localCode});
}

function highlightSelected(number,pattern) {
	var replace = "<span class='foundPattern'>"+pattern+"</span>";
	return number.replace(pattern,replace);
}

function resetNumberSearch() {
	$('results').setStyle('display','none');
	$('results').set('html','');
}

function registerClicks() {
	$('icon1').addEvent('click',function() {
		manualClick(1);
	});
	$('icon2').addEvent('click',function() {
		manualClick(2);
	});
	$('icon3').addEvent('click',function() {
		manualClick(3);
	});
	$('icon4').addEvent('click',function() {
		manualClick(4);
	});
}

function changePanel() {
	if (stop) return;
	var currentPanel = "slide"+panelDisplayed;
	var currentIcon = "icon"+panelDisplayed;
	if (panelDisplayed == 4) {
		var nextPanel = "slide1";
		var nextIcon = "icon1";
		var nextSticker = "button1";
		var nextCard = "bc1";
		var count = 1;
	} else {
		var count = panelDisplayed + 1;
		var nextPanel = "slide"+count;
		var nextIcon = "icon"+count;
		var nextSticker = "button"+count;
		var nextCard = "bc"+count;
	}
	moveSticker(nextSticker);
	moveCardImage(nextCard);
	$(currentPanel).tween('width','0px');
	$(nextPanel).tween('width','225px');
	$(currentIcon).removeClass('selected');
	$(nextIcon).addClass('selected');
	panelDisplayed = count;
	changePanel.delay(5000);
}

function manualClick(panel) {
	stop = true;
	var currentPanel = "slide"+panelDisplayed;
	var currentIcon = "icon"+panelDisplayed;
	var nextPanel = "slide"+panel;
	var nextIcon = "icon"+panel;
	var nextSticker = "button"+panel;
	var nextCard = "bc"+panel;
	moveSticker(nextSticker);
	moveCardImage(nextCard);
	$(currentPanel).tween('width','0px');
	$(nextPanel).tween('width','225px');
	$(currentIcon).removeClass('selected');
	$(nextIcon).addClass('selected');
	panelDisplayed = panel;
	clearTimeout(timer);
	timer = setTimeout(startAgain,15000);
}

function moveSticker(sticker) {
	if (Browser.Engine.trident && Browser.Engine.version == 4) return;
	var newImgUrl = "url(/images/layout/homepage/"+sticker+".png)";
	var curImg =  $('sticker2').getStyle('background-image');
	$('sticker1').setStyle('background-image',curImg);
	$('sticker2').setStyle('opacity',0);
	$('sticker2').setStyle('background-image',newImgUrl);
	if (Browser.Engine.trident) {
		//For IE, don't tween. IE can't handle tweening opacity well
		$('sticker2').setStyle('opacity',1);
	} else {
		$('sticker2').tween('opacity',1);
	}
}

function moveCardImage(card) {
	var newImgUrl = "/images/layout/homepage/"+card+".jpg";
	var curImg =  $('cimg2').get('src');
	$('cimg1').set('src',curImg);
	$('card_image2').setStyle('opacity',0);
	$('cimg2').set('src',newImgUrl);
	$('card_image2').tween('opacity',1);
}

function startAgain() {
	stop = false;
	changePanel();
}