var lCurrentCenterPhotoIndex = 2;
var lMinCenterPhotoIndex = 2;
var lMaxCenterPhotoIndex = 2;
var count_bar_per_step = 5;
var pixel_per_box = 150;
var radian = Math.PI / 2;
var deltaRadian = Math.PI / 2 * 0.1;
var bMoving = false;



// functions for animation moving

function onClickRight5()
{
	if(!bMoving){
		if (lCurrentCenterPhotoIndex-5 < lMinCenterPhotoIndex) {
			
			if(lCurrentCenterPhotoIndex > lMinCenterPhotoIndex){
			
				acceleratedMoveR(lCurrentCenterPhotoIndex - lMinCenterPhotoIndex);
			}
			lCurrentCenterPhotoIndex = lMinCenterPhotoIndex;
			
		}else{
			lCurrentCenterPhotoIndex = lCurrentCenterPhotoIndex - 5;
			acceleratedMoveR(5);
		}
	}
	//show_debug();
}

function onClickLeft5()
{
	if (!bMoving){
		if (lCurrentCenterPhotoIndex+5 > lMaxCenterPhotoIndex) {
			
			if(lCurrentCenterPhotoIndex < lMaxCenterPhotoIndex){
			
				acceleratedMoveL(lMaxCenterPhotoIndex - lCurrentCenterPhotoIndex);
			}
			
			lCurrentCenterPhotoIndex = lMaxCenterPhotoIndex;
			
		}else{
			lCurrentCenterPhotoIndex = lCurrentCenterPhotoIndex + 5;
			acceleratedMoveL(5);
		}
	}
	//show_debug();
}

function onClickRight()
{
	if(!bMoving){
		if (lCurrentCenterPhotoIndex <= lMinCenterPhotoIndex) {
			lCurrentCenterPhotoIndex = lMinCenterPhotoIndex;
		}else{
			lCurrentCenterPhotoIndex = lCurrentCenterPhotoIndex - 1;
			acceleratedMoveR(1);
		}
	}
	//show_debug();
}

function onClickLeft()
{
	if (!bMoving){
		if (lCurrentCenterPhotoIndex >= lMaxCenterPhotoIndex) {
			lCurrentCenterPhotoIndex = lMaxCenterPhotoIndex;
		}else{
			lCurrentCenterPhotoIndex = lCurrentCenterPhotoIndex + 1;
			acceleratedMoveL(1);
		}
	}
	//show_debug();
}

function onClickMarker(index){
	if(!bMoving){
		if(index<=lMinCenterPhotoIndex){
			if(lCurrentCenterPhotoIndex>lMinCenterPhotoIndex){
				acceleratedMoveR(lCurrentCenterPhotoIndex - lMinCenterPhotoIndex);
				
				lCurrentCenterPhotoIndex = lMinCenterPhotoIndex;
			}		
			
			
		}else if (index>=lMaxCenterPhotoIndex){
			if(lCurrentCenterPhotoIndex<lMaxCenterPhotoIndex){
				acceleratedMoveL(lMaxCenterPhotoIndex - lCurrentCenterPhotoIndex);
				
				lCurrentCenterPhotoIndex = lMaxCenterPhotoIndex;
			}
			
			
		}else if(index<lCurrentCenterPhotoIndex){
			acceleratedMoveR(lCurrentCenterPhotoIndex - index);
			
			lCurrentCenterPhotoIndex = eval(index);
		}else if(index>lCurrentCenterPhotoIndex){
			acceleratedMoveL(index - lCurrentCenterPhotoIndex);
			
			lCurrentCenterPhotoIndex = eval(index);
		}
	}
	//show_debug();
	
}

function smoothOpacity(e)
{
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
		
	var index = targ.getAttribute("index");
	var pointName = targ.getAttribute("photoID");
	
	var img_photo = document.getElementById("img_photo"+pointName);

	img_photo.className = "img_hover";
	
}

function clearSmoothOpacity(e)
{
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
		
	var index = targ.getAttribute("index");
	var pointName = targ.getAttribute("photoID");
	
	var img_photo = document.getElementById("img_photo"+pointName);
	
	if(pointName==current_select_photo_id){
		img_photo.className = "img_selected";
		
	}else{
		img_photo.className = "img_normal";
	}
}

function acceleratedMoveL(delBox){

	var div_slide_bar = document.getElementById("div_slide_bar");
	var left = Number(div_slide_bar.style.left.replace("px",""));
	var delPixel = pixel_per_box * delBox;
	var calculatedPosition = left - delPixel;
	
	if (delBox==1) {
		move_object_quickly("div_slide_bar", delPixel, "-", calculatedPosition);
	} else {
		move_object_slowly("div_slide_bar", delPixel, "-", calculatedPosition);
	}
}

function acceleratedMoveR(delBox){
	var div_slide_bar = document.getElementById("div_slide_bar");
	var left = Number(div_slide_bar.style.left.replace("px",""));
	var delPixel = pixel_per_box * delBox;
	var calculatedPosition = left + delPixel;
	
	if (delBox==1) {
		move_object_quickly("div_slide_bar", delPixel, "+", calculatedPosition);
	} else {
		move_object_slowly("div_slide_bar", delPixel, "+", calculatedPosition);
	}
}

function move_object_slowly(obj_id, delPixel, op, calculatedPosition){
	
	if(op=="-"){
		delPixel = -delPixel;
	}
	
	new Effect.Move (obj_id,{ x: delPixel, y: 0, mode: 'relative', duration: 0.5});
	
}

function move_object_quickly(obj_id, delPixel, op, calculatedPosition){
	
	if(op=="-"){
		delPixel = -delPixel;
	}
	
	new Effect.Move (obj_id,{ x: delPixel, y: 0, mode: 'relative', duration: 0.1});
	
}

function move_object_location(obj_id, delPixel, op, calculatedPosition){
	var debug = document.getElementById("debug");
	var d = new Date();
	debug.innerHTML = debug.innerHTML + "<br>one" + d.getTime();
	
	bMoving = true;
	var obj = document.getElementById(obj_id);
	var left = Number(obj.style.left.replace("px",""));
	var deltaLeft = 0;
	var radianTemp = radian + deltaRadian;
	
	if (radianTemp>Math.PI){
		radianTemp = Math.PI;
		
	}
	
	if (radian >= (Math.PI / 2) && radian < Math.PI){
		deltaLeft = ( Math.sin(radian) - Math.sin(radianTemp) ) * delPixel;
		radian = radian + deltaRadian;
		
		if(op=="+"){
			left = left + deltaLeft;
		}else if(op=="-"){
			left = left - deltaLeft;
		}
		
		obj.style.left = (String(left) + "px");
		
	}else{
		left = calculatedPosition;
		
		obj.style.left = (String(left) + "px");
		
		radian = Math.PI / 2;
		
		bMoving = false;
		
		return;
	}
	var d2 = new Date()
	debug.innerHTML = debug.innerHTML + "<br>two" + d2.getTime();
	//alert(obj.style.left);
	//move_object_location(obj, delPixel, op)
	//var Move_setTimeout = setTimeout("move_object_location('"+ obj_id +"', "+ delPixel +", '"+ op +"', "+ calculatedPosition +")", 6, "JavaScript");
	setTimeout("move_object_location('"+ obj_id +"', "+ delPixel +", '"+ op +"', "+ calculatedPosition +")", 1, "JavaScript");
	
	var d3 = new Date()
	debug.innerHTML = debug.innerHTML + "<br>thr" + d3.getTime();
	
}


function show_debug(){
	var debug = document.getElementById("debug");	
	debug.style.display = "inline";
	
	var strCurrentCenterPhotoIndex = "<br>lCurrentCenterPhotoIndex is " + lCurrentCenterPhotoIndex ;
	var strMinCenterPhotoIndex = "<br>lMinCenterPhotoIndex is " + lMinCenterPhotoIndex ;
	var strMaxCenterPhotoIndex = "<br>lMaxCenterPhotoIndex is " + lMaxCenterPhotoIndex ;
	var strDebug = strCurrentCenterPhotoIndex + strMinCenterPhotoIndex + strMaxCenterPhotoIndex;
	
	debug.innerHTML = strDebug;
	
}







	// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
	// map. It has a border of the given weight and color and can optionally
	// have a semi-transparent background color.
	function Rectangle(bounds, photo_ids, photo_urls, opt_weight, opt_color) {
	
	  this.bounds_ = bounds;
	  this.weight_ = opt_weight || 2;
	  this.color_ = opt_color || "#888888";
	  this.photo_ids_ = photo_ids;
	  this.photo_urls_ = photo_urls;
	}
	Rectangle.prototype = new GOverlay();

	// Creates the DIV representing this rectangle.
	Rectangle.prototype.initialize = function(map) {
		
	  // Create the DIV representing our rectangle
	  //var div_bar = document.createElement("iFrame");
	  var div_bar = document.createElement("div");
	  div_bar.style.border = this.weight_ + "px solid " + this.color_;
	  div_bar.style.position = "absolute";
	  
	  
	  var n;
	  for (n=0; n<this.photo_ids_.length; n++){
			var div_photo = document.createElement("div");
			var img_photo = document.createElement("img");
			div_photo.setAttribute("id","div_photo"+this.photo_ids_[n]);
			img_photo.setAttribute("id","img_photo"+this.photo_ids_[n]);
			img_photo.setAttribute("id","img_photo"+this.photo_ids_[n]);
			img_photo.setAttribute("src",this.photo_urls_[n]);
			
			div_photo.appendChild(img_photo);
			div_bar.appendChild(div_photo);
			
	  }
	  
	  
	  // Our rectangle is flat against the map, so we add our selves to the
	  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
	  // below the marker shadows)
	  map.getPane(G_MAP_MAP_PANE).appendChild(div_bar);
	  
	  this.map_ = map;
	  this.div_ = div_bar;
	}

	// Remove the main DIV from the map pane
	Rectangle.prototype.remove = function() {
	  this.div_.parentNode.removeChild(this.div_);
	}

	// Copy our data to a new Rectangle
	Rectangle.prototype.copy = function() {
	  return new Rectangle(this.bounds_, this.weight_, this.color_,
						   this.backgroundColor_, this.opacity_);
	}

	// Redraw the rectangle based on the current projection and zoom level
	Rectangle.prototype.redraw = function(force) {
	  // We only need to redraw if the coordinate system has changed
	  if (!force) return;

	  // Calculate the DIV coordinates of two opposite corners of our bounds to
	  // get the size and position of our rectangle
	  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
	  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
	
	  // Now position our DIV based on the DIV coordinates of our bounds
	  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
	  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
	  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
	  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
	}



	function Slide_bar( photo_ids, photo_urls, opt_weight, opt_color) {
	
	  this.bounds_ = bounds;
	  this.weight_ = opt_weight || 2;
	  this.color_ = opt_color || "#888888";
	  this.photo_ids_ = photo_ids;
	  this.photo_urls_ = photo_urls;
	}

	Slide_bar.prototype.initialize = function(map) {
		
	  // Create the DIV representing our rectangle
	  //var div_bar = document.createElement("iFrame");
	  var div_bar = document.getElementById("div_slide_bar");
	  div_bar.style.border = this.weight_ + "px solid " + this.color_;
	  div_bar.style.position = "absolute";
	  
	  
	  var n;
	  for (n=0; n<this.photo_ids_.length; n++){
			var div_photo = document.createElement("div");
			var img_photo = document.createElement("img");
			div_photo.setAttribute("id","div_photo"+this.photo_ids_[n]);
			img_photo.setAttribute("id","img_photo"+this.photo_ids_[n]);
			img_photo.setAttribute("id","img_photo"+this.photo_ids_[n]);
			img_photo.setAttribute("src",this.photo_urls_[n]);
			
			div_photo.appendChild(img_photo);
			div_bar.appendChild(div_photo);
			
	  }
	  
	   
	  // Our rectangle is flat against the map, so we add our selves to the
	  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
	  // below the marker shadows)
	  //map.getPane(G_MAP_MAP_PANE).appendChild(div_bar);
	  
	  //this.map_ = map;
	  this.div_ = div_bar;
	}