// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");


  var zoomDiv = document.createElement('span');
  zoomDiv.appendChild(document.createTextNode("Zoom:"));
zoomDiv.style.color = "white";
container.appendChild(zoomDiv);


  var zoomDiv1 = document.createElement("div");
  this.setButtonStyle_(zoomDiv1);
  container.appendChild(zoomDiv1);
  zoomDiv1.appendChild(document.createTextNode("World"));
  GEvent.addDomListener(zoomDiv1, "click", function() {
    map.setCenter(R.cpoint, 2);
  });

  var zoomDiv2 = document.createElement("div");
  this.setButtonStyle_(zoomDiv2);
  container.appendChild(zoomDiv2);
  zoomDiv2.appendChild(document.createTextNode("Region"));
  GEvent.addDomListener(zoomDiv2, "click", function() {
    map.setCenter(R.cpoint, 8);
  });

  var zoomDiv3 = document.createElement("div");
  this.setButtonStyle_(zoomDiv3);
  container.appendChild(zoomDiv3);
  zoomDiv3.appendChild(document.createTextNode("City"));
  GEvent.addDomListener(zoomDiv3, "click", function() {
   	map.setCenter(R.cpoint, 12);
  });

  var zoomDiv4 = document.createElement("div");
  this.setButtonStyle_(zoomDiv4);
  container.appendChild(zoomDiv4);
  zoomDiv4.appendChild(document.createTextNode("Street"));
  GEvent.addDomListener(zoomDiv4, "click", function() {
   	map.setCenter(R.cpoint, 16);
  });

  var zoomDiv4 = document.createElement("div");
  this.setButtonStyle_(zoomDiv4);
  container.appendChild(zoomDiv4);
  zoomDiv4.appendChild(document.createTextNode("+"));
  GEvent.addDomListener(zoomDiv4, "click", function() {
   	if (map.getZoom() < 20) map.setCenter(R.cpoint, map.getZoom()+1);
  });

  var zoomDiv4 = document.createElement("div");
  this.setButtonStyle_(zoomDiv4);
  container.appendChild(zoomDiv4);
  zoomDiv4.appendChild(document.createTextNode("-"));
  GEvent.addDomListener(zoomDiv4, "click", function() {
   	if (map.getZoom() > 0) map.setCenter(R.cpoint, map.getZoom()-1);
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px 5px";
  button.style.marginLeft = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
  button.style.display = "inline";
button.style.textDecoration="none";
}

var R ={
	images : null,
	imageShowing : 0,
	stars : [],
	tmbs : null,
	cpoint : null,
	
	init : function(){
		
		MS.init();
		
		if ($('map')){
			var point = new GLatLng(lat, lng);
			R.cpoint = point;
			window.onunload = GUnload;
			R.map = new GMap2($('map'));
			R.map.setCenter(point, zoom, G_HYBRID_TYPE);
			//R.map.disableDragging();
			R.map.addControl(new TextualZoomControl());
			
			var icon = new GIcon();
			icon.image = "/images/newmarkers/marker.png";
			icon.shadow = "/images/newmarkers/marker_shadow.png";
			icon.shadowSize = new GSize(22, 18);
			icon.iconSize = new GSize(18, 18);
			icon.iconAnchor = new GPoint(9, 18);
			icon.infoWindowAnchor = new GPoint(9, 0);
			
			R.map.addOverlay(new GMarker(point, icon));
		}
		
		R.images = eval('('+images_json+')');
		if ((R.images.length > 0) && (MS.user != null) && (R.images[0]['user_id'] == MS.user.id)) R.replacePhoto(0);
		
		R.stars = [];
		for (var i=1; i <= 5; i++){
			R.stars[i] = $('star_'+i);
			R.stars[i].style.cursor = 'pointer';
		}
		R.resetStars();
		R.tmbs = [];
		for (var i=0; i <= 3; i++){
			R.tmbs[i] = $('photo_'+i);
		}
	},
	
	checkLogin : function(){
		if (MS.user == null){
			if (popupmode){
				parent.MS.loginOrSignup();
			} else{
				MS.loginOrSignup();
			}
			return false;
		} else {
			return true;
		}
	},
	
	deleteImageClicked : function(){
		if (!confirm('Are you sure you want to delete this image?')) return;
		
		var id = R.images[R.imageShowing]['image_id'];
		
		var url = '?action=deleteimage&action_param='+id+((popupmode) ? '&popupmode=true' : '');
		window.location.href = url;
	},
	
	replacePhoto : function(i){
		R.imageShowing = i;
		var img = $('photo');
		
		var image = R.images[i+R.photoStart];
		
		if ((MS.user != null) && (image['user_id'] == MS.user.id)){
			$('delete_image').style.display = '';
		} else {
			$('delete_image').style.display = 'none';
		}
		
		img.setAttribute('src', image.path);
		//img.setAttribute('width', image.width);
		//img.setAttribute('height', '100%');//image.height);
		
		if (image['source_type'] == 1){
			var html = 'Image from <a target="_blank" href="'+image['source_url']+'">flickr</a>';
			$('image_caption').innerHTML = html;
		} else {
			$('image_caption').innerHTML = '&nbsp;';
		}
	},
	
	
	photoStart : 0,
	photosRight : function(){
		R.photoStart ++;
		
		//$('photo_2').src =  '/images/skin/loading.png';
		R.photosUpdate();

		R.updateBounds();
	},
	
	photosLeft : function(){
		R.photoStart --;
		R.photosUpdate();
		
		R.updateBounds();
	},
	
	updateBounds : function(){
		if (R.photoStart >= (R.images.length - 3) ){
			$('photosRight').style.visibility="hidden";
		} else {
			$('photosRight').style.visibility="";
		}
		if (R.photoStart == 0 ){
			$('photosLeft').style.visibility="hidden";
		} else {
			$('photosLeft').style.visibility="";
		}
	},
		
	photosUpdate : function(){
		var tmbs = R.tmbs;
		for (i = 0; i < 3 ;i ++){
			var img = tmbs[i];
			img.src = R.images[i+R.photoStart]['tmb_path'];
		}
	},
	
	voteMouseOver : function(c){
		var stars = R.stars;
		
		if (stars.length ==0) return;
		
		for (var i =1 ; i <= c; i++){
			stars[i].src='/images/stars/star.gif';
		}
		for (var i =c+1 ; i <= 5; i++){
			stars[i].src='/images/stars/starun.gif';
		}
	},
	
	resetStars : function(){
		R.voteMouseOver(vote);
	},
	
	voteClick : function(s){
		var extra = (popupmode) ? '&popupmode=true&mssource='+MS.source : '';
		if (R.checkLogin()) window.location.href = "?action=vote&action_param="+s+extra;
	},
	
	tagClicked : function(t){
		parent.Explore.tagClicked(t);
	}
}


window.onload = R.init;