/* for Lunch with me */

// global variables
var geocoder;
var map;
var mgr;
var cancleFlag = false;
var marker;

// startUp
function initializeMap() {
    if (GBrowserIsCompatible()) {
    	map = new GMap2($('#map')[0]);
    	var centerPoint = new GLatLng(37.55685994586903, 127.04633831977844);
		// 	
		
		map.enableGoogleBar();
		map.setUIToDefault();
		map.setCenter(centerPoint, 16);
		
		GEvent.addListener(map, "click", addressCallback)
		
		// init geocooder
		geocoder = new GClientGeocoder();
		mgr = new MarkerManager(map);
		
		var redIcon = getColorIcon('red');
		
		// Set up our GMarkerOptions object
		markerOptions = { icon:redIcon };
		
		marker = new GMarker(centerPoint, markerOptions);

		updateAppointments();
    }

}

function lunchwithme() {
	$('#map').mousedown(cancleFlag);

	resizeMap();

	initializeMap();

	$('p.indicator').hide();

	if (Cookie.get('startup') != 'true')
		viewStartUp();
	
}

var viewStartUp = function() {
	$('.ticket').html(Ticket.start);
	viewMask();
	$('#ticketViewer').fadeIn(300);
	$('.checkbtn').focus();
}
var viewMask = function() {
	$('#alphaDivisition').show();
	$(document).one('keypress', function(e) {
		if (e.keyCode == 27) closeSubmit();
	});
}

// variable cache
var inputs = doc = document, AddressList = $('#addressList'), lowMode = document.all, speed = lowMode ? 0 : 250;

// Cookie controller
var Cookie = {
	set :  function(name, value, delay) {
		var today = new Date();
		today.setDate(today.getDate()+(delay||1));
		doc.cookie = name+'='+escape(value || '')+'; path=/; '+(delay ? 'expires='+today.toGMTString() : '')+';';
	},
	get : function(name) {
		return unescape(String(RegExp(name+'=[^\s^;]+').exec(doc.cookie+'; ') || '').replace(/.+=/,''));
	},
	remove : function(name) {
		this.set(name,'',-1);
	}
}

// ticket template
var TicketTit = '<div class="inbox"><h2><span class="out">Lunch with Me!</span></h2>';
var Ticket = {
	check : [ TicketTit,
	  		'<p class="msg">입력하신 정보가 정확합니까?</p>',
			'<div class="textbox"><table summary="입력정보확인" >',
			'<tr><th>이름</th><td>$name</td></tr>',
			'<tr><th>이메일</th><td>$email</td></tr>',
			'<tr><th>날짜</th><td>$date</td></tr>',
			'<tr><th>위치</th><td>$address</td></tr>',
			'<tr><th>메모</th><td>$comment</td></tr>',
			'</table></div>',
			'<p class="btn">',
			'<input type="button" onclick="onSubmit(this)" tabindex="1" class="button1 checkbtn" value=" 예 " /> ',
			'<input type="button" onclick="closeSubmit()" tabindex="1" class="button2" value="취소" />',
			'</p></div>'
			].join(''),
		start : [ TicketTit,
			'<p class="msg">시작하기</p>',
			'<p class="desc2">\'런치 위드 미!\'는 점심을 함께 먹을 사람을 추천해주는 서비스 입니다.<br />몇가지 정보만 입력하시면, 이메일로 인근에서 함께 점심을 드실 분을 알려드립니다.</p>',
			'<p class="desc3">정보입력&nbsp; &gt; &nbsp;인근 사용자 검색&nbsp; &gt;  &nbsp;이메일 통보</p>',
			'<p class="desc2">\'런치 위드 미!\'와 함께 정보를 교환하고, 인맥도 늘려서, 불황을 이겨내 보아요!<br />',
			'[ <a href="http://blog.lunchwithme.net/1" target="_blank">자세히 보기</a> ]</p>',
			'<p class="btn">',
			'<input type="button" onclick="outToday()" tabindex="1" class="button2" value="X  오늘 하루 안보기" />',
			'<input type="button" onclick="closeSubmit()" tabindex="1" class="button1 checkbtn" value="확인" />',
			'</p>'
			].join(''),
		success : [ TicketTit,
			'<p class="msg">$name 님의 신청이 완료되었습니다!</p>',
			'<p class="desc">인근의 다른 사용자가 확인되는대로 <strong>$name</strong> 님께<br />이메일로 알려드리겠습니다.<br /><br />감사합니다.</p>',
			'<p class="btn">',
			'<input type="button" onclick="closeSubmit()" tabindex="1" class="button1 checkbtn" value=" 확인 " />',
			'</p></div>'
			].join(''),
		duplicate : [ TicketTit,
			'<p class="msg">같은 날짜에 이미 신청하셨습니다.</p>',
			'<p class="desc">기존 신청을 취소하고, 지금 입력하신 것으로 대체하시겠습니까?</p>',
			'<p class="btn">',
			'<input type="button" onclick="onUpdate(this)" tabindex="1" class="button1 checkbtn" value=" 예 " /> ',
			'<input type="button" onclick="closeSubmit()" tabindex="1" class="button2" value="취소" />',
			'</p></div>'
			].join(''),
		update : [ TicketTit,
			'<p class="msg">내용이 업데이트 되었습니다!</p>',
			'<p class="desc">인근의 다른 사용자가 확인되는대로 <strong>$name</strong> 님께<br />이메일로 알려드리겠습니다.<br /><br />감사합니다.</p>',
			'<p class="btn">',
			'<input type="button" onclick="closeSubmit()" tabindex="1" class="button1 checkbtn" value=" 확인 " />',
			'</p></div>'
			].join(''),
		failed : [ TicketTit,
			'<p class="msg">신청이 정상적으로 이루어지지 않았습니다.</p>',
			'<p class="desc">현재 인터넷 연결상태를 확인 후 다시 시도해 주세요</p>',
			'<p class="btn">',
			'<input type="button" onclick="closeSubmit()" tabindex="1" class="button1 checkbtn" value=" 확인 " />',
			'</p></div>'
			].join('')
}

// input validator
var Validation = {
	pass : 'tip success', valied : false, expTxt : /.+/, expEmail : /\w+@\w+\..\w+/, expDate : /^\d{4}-\d{1,2}-\d{1,2}/,
	name : function() {
		this.valied = Validation.expTxt.test(this.value);
		tip(this)[0].className = this.valied ? 'tip success' : 'tip';
		Validation.checkAll();
	},
	email : function() {
		this.valied = Validation.expEmail.test(this.value);
		tip(this)[0].className = this.valied ? 'tip success' : 'tip';
		Validation.checkAll();
	},
	date : function(e) {
		this.value = this.value.replace(/[^-^\d]/g,'').replace(/-0/g,'-');
		var date = this.value;
		if ( e && e.keyCode == 8 )
			return;
		else if ( e && e.keyCode == 189 )
			this.value = date.replace(/-$/,'');
		else if ( /^\d{4}$/.test(date) )
			this.value = date + '-';
		else if ( /^\d{4}-[2-9]$|^\d{4}-[01][1-2]$/.test(date) )
			this.value = date + '-';
		else if ( /^\d{4}-\d{1,2}-(\d+)/.test(date) ) {
			if ( /^\d{4}-\d{1,2}-(\d+)/.exec(date)[1] > 31 )
				this.value = /^\d{4}-\d{1,2}-\d/.exec(date)
		}

		this.valied = Validation.expDate.test(this.value);
		tip(this)[0].className = this.valied ? 'tip success' : 'tip';
		Validation.checkAll();
	},
	address : function() {
		this.valied = $("#address").val() && $("#lat").val() && $("#lng").val();
		tip(this)[0].className = this.valied ? 'tip success' : 'tip';
		Validation.checkAll();
	},
	memo : function() {
		this.valied = Validation.expTxt.test(this.value);
		tip(this)[0].className = this.valied ? 'tip success' : 'tip';
		Validation.checkAll();
	},
	checkAll : function() {
	
		if (!this.valied) {
			this.valied = true;
			submitAction.on();
		}
	}
}

var submitAction = {
	on : function() {
		var count = 0, point = [0, 72];
		this._ac = setInterval(function() {
			count = count == 2 ? 0 : count;
//			inputs[5].css('background-position', '-'+point[count++]+'px -118px');
		}, 300);
	},
	stop : function() {
		clearInterval(this._ac);
//		inputs[5].css('background-position', '0 -118px');
	}
}

var Indicator = {
	view : function() {
		$('p.indicator').html('Loading... <img src="img/indicator.gif" width="16" height="16" alt="" />').show();
	},
	close : function() {
		$('p.indicator').hide();
	}
}

// set Address
var Address = {
	check : function() {
		this.text = $("#address").val();
		if ( this._text && this._text == this.text )
			return false;

		this._text = this.text;
		Cookie.set('Ads', this.text, 30);
		return true;
	},
	set : function(lat, lng) {
		$("#lat").val(lat);
		$("#lng").val(lng);
//		Validation.address.apply(inputs[3][0]);
	},
	point : function(overlay, latlng) {		
		if( cancleFlag ) return false;

		if (latlng) {
			geocoder.getLocations(
				latlng,
				function(response) {
					if (response && response.Status.code == 200) {
						var place = response.Placemark[0].address;
						$("#address").val(place);
						
//						var marker = new GMarker(latlng);
						marker.setLatLng(latlng);
						mgr.addMarker(marker, 3);
						mgr.refresh();
						  
						var text = generate_input_form(latlng, place);
						marker.openInfoWindowHtml(text, {maxWidth: '130'});
						
						
						Address.set(latlng.lat(), latlng.lng());
					}
				}
			);
		}
	},
	word : function() {
		if (!this.check()) return;

		Indicator.view();
		geocoder.getLatLng(
			this.text,
			function(point) {
				if (!point) return;
				
				//map.setCenter(point, 17);
				marker.setLatLng(point);
				//marker.openInfoWindowHtml(Address.text)
				
				Address.set(point.lat(), point.lng());
				Indicator.close();
			}
		);
	}
}
function setAddress() { Address.word() }
function addressCallback(overlay, latlng) 
{ 
	Address.point(overlay, latlng);
}



function outToday() {
	Cookie.set('startup','true', 1);
	closeSubmit();
}

function chkKeyControll(e) {
	e.stopPropagation();
	if (e.keyCode == 13) {
		$(this).parent().next().find('input')[0].focus();
		return false;
	}
}

// address auto complete
function setAddressList(e) {
	if (e && $('#addressArea')[0] && (e.keyCode == 40 || e.keyCode == 38)) {
		try {
			var area = $('#addressArea')[0], child = area.childNodes;
			area.count = area.count == undefined ? -1 : area.count;
			if (area._count != undefined) child[area._count].className = '';
			if (e.keyCode == 40 && child[area.count+1]) area.count++;
			if (e.keyCode == 38 && child[area.count-1]) area.count--;
			area._count = area.count;
			setAddressTxt( child[area.count] );
		} catch(e) { };
		return;
	}
}

function getAddressList(res) {
	if (!res.ResultSet.locations)
		res.ResultSet.locations = { item : [] };

	var list = res.ResultSet.locations.item;

	for (var i=0, html=[]; i < list.length; i++) {
		var ad = (list[i].state||'')+' '+(list[i].county||'')+' '+(list[i].city||'');
		html.push('<li onmouseover="setAddressTxt(this)" onmouseout=\'this.className=""\'>'+ad+'</li>');
	}
	if (!list.length)  html.push("<li>지역명을 입력해주세요.</li>");

	html.sort();
	for (var i=0, address=[]; html[i]; i++) {
		if (html[i] != ad) address.push(html[i]);
		ad = html[i];
	}

	$('#addressList').html('<ul id="addressArea">'+address.join('')+'</ul>');
}
function setAddressTxt(obj) {
	obj.className = 'over';
}

function tip(obj) {
	return $(obj.parentNode).find('.tip');
}

function cancleFlag() {
	cancleFlag = false;
	$(document).one('mousemove', function() {
		cancleFlag = true;
	})
};

// data submit check
function chkSubmit() {

	var txt = Ticket.check
		.replace('$name', $('#name').val())
		.replace('$email', $('#email').val())
		.replace('$date', $('#date').val())
		.replace('$address', $('#address').val())
		.replace('$comment', $('#comment').val());

	$('.ticket').html(txt);
	viewMask();
	$('#ticketViewer').fadeIn(300);
	$('.checkbtn').focus();
};


function closeSubmit() {
	$('#ticketViewer').fadeOut(300, function() {
		$('#alphaDivisition').hide();
	});
	return false;
};
function onUpdate(target) {
	$('#update').val('yes');
	onSubmit(target);
}


function onSubmit(target) {
	if (target)
		target.parentNode.innerHTML = 'Sending... <img src="img/indicator.gif" width="16" height="16" alt="" />';

	var postData = {
		name: $('#name').val(),
		email: $('#email').val(),
		date: $('#date').val(),
		address: $('#address').val(),
		lat: $("#lat").val(),
		lng: $("#lng").val(),
		comment: $('#comment').val(),
		update : $('#update').val()
	};

	$.post("./", postData,
		function(res){
			if (res == "Duplicate") {
				$('.ticket').html(Ticket.duplicate);
			} else if (res == "Updated") {
				$('.ticket').html(Ticket.update.replace(/\$name/g,postData.name).replace(/\$date/g,postData.date));
				$('#update').val('no');
			} else
				$('.ticket').html(Ticket.success.replace(/\$name/g,postData.name));
				addMarker($('#name').val(), $("#lat").val(), $("#lng").val(), $('#address').val(), $('#date').val(), $('#comment').val());
				marker.hide();
			 //else $('.ticket').html(Ticket.failed);

			$('.checkbtn').focus();
		});
}


function resizeMap() {
	var mapElement = document.getElementById('map');
	mapElement.style.height = (document.body.clientHeight-142) + 'px';;
}


function addMarker(name, lat, lng, address, date, comment)
{
	if (lat > 0 && lng > 0) {			
		var blueIcon = getColorIcon('blue');
		
		// Set up our GMarkerOptions object
		markerOptions = { icon:blueIcon };
		point = new GLatLng(lat ,lng);
		var marker = new GMarker(point, markerOptions);
		mgr.addMarker(marker, 3);
		mgr.refresh();
		
		text = "<input type='hidden' id='lat' name='lat' value='" + lat + "' /><input type='hidden' id='lng' name='lng' value='" + lng + "' /><input type='hidden' id='update' name='update' value='no' />" +
				"<table class='width-expanded'>" +
				"<tr><td class='title'><b>이름</b></td></tr><tr><td class='content'>" + name + "</td></tr>" +
				"<tr><td class='title'><b>날짜</b></td></tr><tr><td class='content'>" + date + "</td></tr>" +
				"<tr><td class='title'><b>위치</b></td></tr><tr><td class='content'>" + address + "</td></tr>" +
				"<tr><td class='title'><b>메모</b></td></tr><tr><td class='content'>" + comment + "</td></tr>" +
				"<tr><td><a href=\"javascript:join('" + lat + "', '" + lng + "', '" + address + "', '" + date + "', '" + comment + "');\">참여하기</a></td</tr>" +
				"</table>";
		marker.bindInfoWindowHtml(text);
	}
}

function getColorIcon(color)
{
	var colorIcon = new GIcon(G_DEFAULT_ICON);
	colorIcon.image = "img/" + color + "-pushpin.png";
	colorIcon.iconSize = new GSize(30, 30);
	
	return colorIcon;
}

function generate_input_form(latlng, place)
{
	var text = "";
	text += "<h3 style='padding: 5px 0 5px 30px; width: 150px;'>새로운 약속 생성하기</h3>" +
			"<input type='hidden' id='lat' name='lat' value='" + latlng.lat() + "' /><input type='hidden' id='lng' name='lng' value='" + latlng.lng() + "' /><input type='hidden' id='update' name='update' value='no' />" +
			"<table class='input-form'>" +
			"<tr><td><b>이름</b></td></tr><tr><td><input type='text' id='name' name='name' alt='이름' title='이름을 입력해 주세요' class='scale_3' tabindex='1' onclick=\"javascript:$('#date').datepicker({dateFormat: 'yy-mm-dd'});\" /></td></tr>" +
			"<tr><td><b>이메일</b></td></tr><tr><td><input type='text' id='email' name='email' alt='이메일' title='연락받으실 이메일 주소를 입력해주세요' class='scale_3' tabindex='1' style='ime-mode:disabled;' /></tr>" +
			"<tr><td><b>날짜</b></td></tr><tr><td><input type='text' id='date' name='date' alt='날짜' title='점심을 드실 날짜를 골라주세요' class='scale_3' tabindex='1'/></td></tr>" +
			"<tr><td><b>위치</b></td></tr><tr><td><input type='textarea' class='scale_3' id='address' alt='위치' name='address' tabindex='1' value='" + place + "' disabled/></tr>" +
			"<tr><td><b>메모</b></td></tr><tr><td><input type='text' class='scale_3' id='comment' alt='메모' name='comment' title='나누고 싶은 주제나 관심사를 남겨주세요' tabindex='1' /></td></tr>" +
			"<tr><td><input type='button' value='보내기' id='submit' onClick='javascript:chkSubmit();' alt='' title='' tabindex='1' /></td></tr>" +
			"</table>";
		
	return text;
}

function join(lat, lng, place, date, memo)
{
	latlng = new GLatLng(lat,lng);
	marker.setLatLng(latlng);
	mgr.addMarker(marker, 3);
	mgr.refresh();
	  
	var text = generate_join_form(lat, lng, place, date, memo);
	marker.openInfoWindowHtml(text, {maxWidth: '130'});
	
//	Address.set(latlng.lat(), latlng.lng());
}

function generate_join_form(lat, lng, place, date, memo)
{
	var text = "";
	text += "<h3>참여하기</h3>" +
			"<input type='hidden' id='lat' name='lat' value='" + lat + "' /><input type='hidden' id='lng' name='lng' value='" + lng + "' /><input type='hidden' id='update' name='update' value='no' />" +
			"<table class='input-form'>" +
			"<tr><td><b>이름</b></td></tr><tr><td><input type='text' id='name' name='name' alt='이름' title='이름을 입력해 주세요' class='scale_3' tabindex='1' onclick=\"javascript:$('#date').datepicker({dateFormat: 'yy-mm-dd'});\" /></td></tr>" +
			"<tr><td><b>이메일</b></td></tr><tr><td><input type='text' id='email' name='email' alt='이메일' title='연락받으실 이메일 주소를 입력해주세요' class='scale_3' tabindex='1' style='ime-mode:disabled;' /></tr>" +
			"<tr><td><b>날짜</b></td></tr><tr><td><input type='text' id='date' name='date' alt='날짜' title='점심을 드실 날짜를 골라주세요' class='scale_3' tabindex='1' value='" + date + "' disabled/></td></tr>" +
			"<tr><td><b>위치</b></td></tr><tr><td><input type='textarea' class='scale_3' id='address' alt='위치' name='address' tabindex='1' value='" + place + "' disabled/></tr>" +
			"<tr><td><b>메모</b></td></tr><tr><td><input type='text' class='scale_3' id='comment' alt='메모' name='comment' title='나누고 싶은 주제나 관심사를 남겨주세요' tabindex='1'  value='" + memo + "' disabled/></td></tr>" +
			"<tr><td><input type='button' value='보내기' id='submit' onClick='javascript:chkSubmit();' alt='' title='' tabindex='1' /></td></tr>" +
			"</table>";
		
	return text;
}


$(window).resize(resizeMap);
$(document).ready(lunchwithme);