/*
Todo
1. History Stack
2. Animation
*/


function loaded(){
	//event listeners for search
	safire.selector('#search').addEventListener("focus", clearSearch, false);
	safire.selector('#search').addEventListener("blur", resetSearch, false);	
	safire.selector('#go').addEventListener("click", qSearch, false);
	
	//event listener for spot adding
	safire.selector('#new_spot').addEventListener("click", add_a_spot, false);
	
	//even listeners for tab selection	
	safire.selector('.park_link')[0].addEventListener("click", get_parks, false);
	safire.selector('.spot_link')[0].addEventListener("click", get_spots, false);
	
	//start by getting loc - then calling this method requires callback function -> which has an ajax call -> which has its own callback -> which calls a build list function
	safire.geoLoc( spots_based_on_location );


	//run preloads on all app images
	app_imgs = new Array();
	
	var mdl_top = new Image(); 
	mdl_top.src= "/images/mdl_top.png";
	
	app_imgs.push(mdl_top);

	/*This code is here because it needs to be fired on ajax loads as well*/
}

function spots_based_on_location( location ){
	var lat = encryption.encode(location.lat);
	var lon = encryption.encode(location.lon);
	safire.loader('gpspots/?key=56ergrd&lat='+lat+'&long='+lon+'&junkvar=true', 'get', null, 'show_spots_and_parks(results);');
}

function show_spots_and_parks( data ){
	if(data.parks){
		
		safire.data(data.parks);
		var parks = safire.get_data();
		build_list('parks', parks);
		
	}else if(data.spots){
		
		safire.data(data.spots);
		var spots = safire.get_data();
		build_list('spots', spots);
	}
}

function build_list(type, dataset){
	var ul = document.createElement('ul');
	ul.setAttribute('class', 'list-items');
	ul.setAttribute('id', type);
	
	
	if( dataset.length == 0 )
	{
		var ul = document.createElement('ul');
		ul.setAttribute('id', 'no_results');
		
		var li = document.createElement('li');
		var inner = '<div class="thumb" bg="/pholdr.png" style="display:none;">&nbsp;</div>No spots available...';
		inner += '<br/><strong>Tap the + to add one!</strong><a href="#"></a><div class="clr"></div>';
		li.innerHTML = inner;
		
		safire.append(li, ul);
		safire.selector('#content').removeChild(safire.selector('#loading_list'));
		safire.append(ul, safire.selector('#content'));
		
		return false;
	}
	
	for (i=0; i<dataset.length; i++) 
	{
		var li = document.createElement('li');
		
		var thumb = document.createElement('div');
		if(type == 'spots')
			var thumbnail = dataset[i].thumbnail ? dataset[i].thumbnail : 'http://iskate.diamondsupplyco.com/spotsnparks/nospot-sm.png';
		else 
			var thumbnail = dataset[i].thumbnail ? dataset[i].thumbnail : 'http://iskate.diamondsupplyco.com/images/park.png';
		thumb.setAttribute('class', 'thumb');
		// thumb.setAttribute('bg', thumbnail);
		thumb.style.background = 'url('+thumbnail+') no-repeat';
		thumb.innerHTML = '&nbsp;';
		
		safire.append(thumb, li);
		
		var title = document.createElement('div');
		title.setAttribute('class', 'spot_title');
		title.innerHTML = dataset[i].name;
		safire.append(title, li);
		
		var desc = document.createElement('div');
		desc.setAttribute('class', 'spot_desc');
		desc.innerHTML = dataset[i].obstacles;
		safire.append(desc, li);
		
		var link = document.createElement('a');
		link.setAttribute('href', '#nogo');
		link.setAttribute('id', dataset[i].id);
		link.setAttribute('callback', 'show_spot_or_park('+dataset[i].id+');');
		link.innerHTML = '&nbsp;';
		safire.append(link, li);
		
		var spacer = document.createElement('div');
		spacer.setAttribute('class', 'clr');
		safire.append(spacer, li);
		
		safire.append(li, ul);
	}
	
	safire.selector('#content').removeChild(safire.selector('#loading_list'));
	safire.append(ul, safire.selector('#content'));
}

function add_a_spot(){
	
	//create random number for id
	var letters = new Array('oin', 'szx', '5retgf', 'rtessvdf', 'yu8u', 'dsfsdfv', 'uymn', 'vfmop', 'rstg', 'tyuds', 'z');
	var lets = new Array('tbin', 's6789x', '5rvngf', '5rfsvdf', 'ytj8u', 'dsfsdddfv', 'zmn', 'v678jup', 'rbrsg', 'tys', 'zzzw');
	
	var i = Math.floor(Math.random()*11);
	
	var rand_le = letters[i];
	var rand_l = lets[i];
	
	var random_no = Math.floor(Math.random()*101);
	var randid = rand_le+random_no+rand_l;
	
	/* MODAL BUILDING */
	var html = "<div id='modal_c'><label>Spot Name:</label>";
	html += "<input type='text' id='spot_name' /><br/>";
	html += "<label>Location:</label> <span id='spot_loc'>Current Location</span><br/>";
	html += "<input type='hidden' id='location' />";
	html += "<label>Photo:</label>";
	html += "<input type='hidden' id='photo_rand_id' value='"+randid+"' />";
	html += "<button id='get_photo'>Add Photo</button><br/><br/>";
	html += "<label id='spcl'>What can you skate there?</label><br/>";
	html += "<textarea id='obstacles'></textarea><br/><br/></div>"

	//callback bindings
	var bindings = [
						{ 'selector' : '#get_photo', 'event' : 'click', 'callback' : take_photo }
					];
					
	// options for modal
	var opts = { 
				'title' : 'Add a spot',
				'submit_text' : 'Add',
				'cancel_text' : 'Cancel',
				'button_style' : 'adjacent',
				'callback' : modal_callback,
				'bindings' : bindings,
				'html' : html
				};
	
	//load up modal	
	safire.modal(opts);
}

function take_photo(){
	/* PHOTO GETTING */ 
	var uid = safire.device_id;
	
	var upid = safire.selector('#photo_rand_id').value;
	
	//iskate.diamondsupplyco.com
	safire.getPhoto( 'http://diamond.local/index.php/picture/?device='+uid+'&pid='+upid );
}

function modal_callback(){
	alert('we closed the modal');
}

function show_spot_or_park(id){
	
	if( safire.selector('#'+id).parentNode.parentNode.getAttribute('id') == 'spots' )
	{
		var spot = safire.find_node( safire.get_data(), 'id', id );
		show_details(spot);
	}
	else if( safire.selector('#'+id).parentNode.parentNode.getAttribute('id') == 'parks' )
	{
		var park = safire.find_node( safire.get_data(), 'id', id );
	}
	
}

function show_details(item){
	
	var slide = document.createElement('div');
	slide.setAttribute('class', 'slide detail');
	
	
	var height_finder = document.createElement('div');
	height_finder.setAttribute('id', 'heightfinder');
	// height finder to slide
	safire.append(height_finder, slide);
	
	var by = document.createElement('div');
	by.setAttribute('id', 'spot_by');
	
	var bylink = document.createElement('a');
	var href = item.method == 'site' ? item.site : item.shop_number;
	bylink.setAttribute('href', href);
	bylink.setAttribute('class', (item.method ? item.method : 'site'));
	bylink.setAttribute('id', 'link');
	bylink.innerHTML = 'Spot added by:';
	
	var byname = document.createElement('span');
	byname.setAttribute('class', 'by');
	byname.innerHTML = item.shop_name;
	
	// span to link
	safire.append(byname, bylink);
	// link to div holder
	safire.append(bylink, by);
	// div holder to height finder
	safire.append(by, height_finder);

	var map = document.createElement('div');
	map.setAttribute('id', 'map_this');
	
	
	var maplink = document.createElement('a');
	maplink.setAttribute('href', 'http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='+item.latitude+','+item.longitude+'('+item.name+')');
	maplink.setAttribute('class', 'map');
	maplink.innerHTML = 'Map this spot';
	// maplink to map
	safire.append(maplink, map);
	// map to height finder
	safire.append(map, height_finder);

	var info = document.createElement('div');
	info.setAttribute('class', 'section');
	
	var spot_title = document.createElement('h2');
	spot_title.setAttribute('id', 'info');
	spot_title.innerHTML = item.name;
	// title to section
	safire.append(spot_title, info);
	
	var clr = document.createElement('div');
	clr.setAttribute('class', 'clr');
	// clr to section
	safire.append(clr, info);
	
	var content = document.createElement('div');
	content.setAttribute('class', 'data content');
	content.setAttribute('id', 'spot_desc');
	content.innerHTML = item.obstacles;
	// clr to section
	safire.append(content, info);
	
	var pictures = document.createElement('div');
	pictures.setAttribute('class', 'section');

	var pic_title = document.createElement('h2');
	pic_title.setAttribute('id', 'pics');
	pic_title.innerHTML = 'Spot Photo';
	// title to section
	safire.append(pic_title, pictures);

	// clr to pictures
	safire.append(clr, pictures);

	var pcontent = document.createElement('div');
	pcontent.setAttribute('class', 'data content');
	pcontent.setAttribute('id', 'spot_desc');
	
	var img = document.createElement('img');
	img.setAttribute('width', '266');
	img.setAttribute('src', (item.picture ? item.picture : 'http://iskate.diamondsupplyco.com/spotsnparks/nospot.png'));
	// img to content
	safire.append(img, pcontent);
	// content to pictures
	safire.append(pcontent, pictures);
	
	// pictures & info to height finder
	safire.append(info, height_finder);
	safire.append(pictures, height_finder);
	
	//slide to body
	safire.append(slide, safire.selector('#container'));
	safire.selector('.slide')[0].style.marginLeft = '-320px';
	safire.selector('.slide')[0].style.display = 'none';
}

function qSearch(){
	if( safire.selector('#search').value.length < 5)
		alert( 'You need to enter a valid city & state or zip code in order to search iSk8!' );
		return;
	
	//show loading
	show_loading();
}

function clearSearch()
{
	safire.selector('#search').removeAttribute('touched');
	safire.selector('#search').value = '';
}

function resetSearch()
{
	if( safire.selector('#search').value == '' )
	{
		safire.selector('#search').setAttribute('touched', 'nope');
		safire.selector('#search').value = 'City, State or Zip Code...';
	}
}

function get_parks(){
	//select tab
	safire.selector('.spot_link')[0].removeAttribute('id');
	this.setAttribute('id', 'selected');
	
	//show loading
	show_loading();
	
	//do work son
	//safire.geoLoc( parks_based_on_location );
}

function get_spots(){
	//select tab
	safire.selector('.park_link')[0].removeAttribute('id');
	this.setAttribute('id', 'selected');
	
	//show loading
	show_loading();
	
	//do work son
	safire.geoLoc( spots_based_on_location );	
}

function show_loading(){
	var ul = document.createElement('ul');
	ul.setAttribute('id', 'no_results');
	
	var li = document.createElement('li');
	var inner = '<div class="thumb" bg="/pholdr.png" style="display:none;">&nbsp;</div>';
	inner += '<img src="/images/loading.gif" /><br/>&nbsp;Loading...<a href="#"></a><div class="clr"></div>';
	li.innerHTML = inner;
	
	safire.append(li, ul);
	safire.selector('#content').innerHTML = '';
	safire.append(ul, safire.selector('#content'));
	
	return true;
}

var encryption = {
 charmap		: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
 encode			: function(str) {
  var ret		= "";
  var c, i, acc		= 0;
  var div		= 1;
  for(i=0,c=0;i<str.length;i++,c++) {
   acc			= acc*256 + str.charCodeAt(i);
   div			= div*4;
   ret			= ret + encryption.charmap.charAt(parseInt(acc/div));
   acc			= acc % div;
   if(div==64) ret	= ret + encryption.charmap.charAt(parseInt(acc)), acc = 0, div = 1,c++;
   if(c>=75) c=-1, ret	= ret + "\n";
  } if(i%3) {
   ret			= ret + encryption.charmap.charAt(parseInt(acc*((i%3==1)?16:4)));
   ret			= ret + ((i%3)==1?"==":"=");
  } return ret;
 },
 decode			: function(str) {
  var ret		= "";
  var i, acc		= 0;
  var div		= 1;
  for(i=0;i<str.length;i++) {
   if(str.charAt(i)=="=" || str.charAt(i)=='\n') break;
   acc			= acc*64 + encryption.charmap.indexOf(str.charAt(i));
   div			= (div==1?64:div/4);
   if(div!=64) {
    ret			= ret + String.fromCharCode(parseInt(acc/div));
    acc			= acc % div;
   }
  } return ret;
 }
}