function TripPlayControl() {
}

function initTripPlayControl(clickCB) {
	TripPlayControl.prototype = new GControl();
	
	TripPlayControl.prototype.initialize = function(map) {
		var this1 = this;
		this1.pause = true;

		var container_ = document.createElement("div");
	
		container_.setAttribute('id','tripPlayCont');
		
		if (ie6) {
			$(container_).addClass("barStyleIE6");
		} else {
			$(container_).addClass("barStyle");
		}
 		container_.style.display = "none";
    //container_.style.width = "200px";
    //container_.style.height = "20px";
	  //container_.style.backgroundColor = "#738699";
	  //container_.style.padding = "3px";
    //container_.style.border   = "1px solid #FFFFFF";

		if (!ie6) {
		  var overlay_ = document.createElement("div");
		  $(overlay_).addClass("baroverlay");
		  container_.appendChild(overlay_);
		}
		/*
		var imgContainer_ = document.createElement("div");
		imgContainer_.setAttribute('id','tripImgDiv');
	  imgContainer_.style.width = "164px";
	  imgContainer_.style.height = "124px";
	  imgContainer_.style.display = "none";
		//$(imgContainer_).attr("align","center");
		$(imgContainer_).css("margin","3px")
										.css("position","relative"); 

		var img_ = document.createElement("img");
		img_.setAttribute('id','tripImg');
	  img_.style.border   = "1px solid #FFFFFF";
	  $(img_).css("opacity",0)
	  imgContainer_.appendChild(img_);
		this.img_ = img_;
		
		var imgContainer2_ = document.createElement("div");
		imgContainer2_.setAttribute('id','tripImgDiv');
	  imgContainer2_.style.width = "164px";
	  imgContainer2_.style.height = "124px";
		$(imgContainer2_).attr("align","center");
		$(imgContainer2_).css("margin","3px")
										.css("position","absolute").css("left",0).css("top",0).css("opacity",0);
		
		var img2_ = document.createElement("img");
		img2_.setAttribute('id','tripImg2');
	  img2_.style.border   = "1px solid #FFFFFF";
	  $(img2_).css("position","absolute").css("left",0).css("top",0).css("opacity",0);
	  imgContainer_.appendChild(img2_);
		this.img2_ = img2_;
		
	  imgContainer_.appendChild(imgContainer2_);
		this.imgContainer2_ = imgContainer2_;
		
	  container_.appendChild(imgContainer_);
		this.imgContainer_ = imgContainer_;
		*/
		var cityContainer_ = document.createElement("h2");
		cityContainer_.setAttribute('id','tripTextCity');
	  //cityContainer_.style.backgroundColor = "#666666";
	  container_.appendChild(cityContainer_);
		this.cityContainer_ = cityContainer_;

		var dateContainer_ = document.createElement("h3");
		dateContainer_.setAttribute('id','tripTextDate');
	  container_.appendChild(dateContainer_);
		this.dateContainer_ = dateContainer_;
		
		var buttonContainer_ = document.createElement("div");
		//$(buttonContainer_).addClass('clearFix');
		buttonContainer_.style.position = "relative";
	  //$(buttonContainer_).addClass("ui-widget-header"); 

		var buttonFirst_ = addButton('tripFirstButton','ui-icon-seek-first');
	  buttonContainer_.appendChild(buttonFirst_);

		var buttonPrev_ = addButton('tripPrevButton','ui-icon-seek-prev');
	  buttonContainer_.appendChild(buttonPrev_);

		var buttonStop_ = addButton('tripStopButton','ui-icon-stop');
	  buttonContainer_.appendChild(buttonStop_);

		var buttonPlay_ = addButton('tripPlayButton','ui-icon-play');
	  buttonContainer_.appendChild(buttonPlay_);
		this.buttonPlay_ = buttonPlay_;

		var buttonNext_ = addButton('tripNextButton','ui-icon-seek-next');
	  buttonContainer_.appendChild(buttonNext_);

		var buttonEnd_ = addButton('tripEndButton','ui-icon-seek-end');
	  buttonContainer_.appendChild(buttonEnd_);

	  container_.appendChild(buttonContainer_);
		
		var br_ = document.createElement("br");
		$(br_).addClass('clear');
	  container_.appendChild(br_);
		
		map.getContainer().appendChild(container_);
		this.container_ = container_;
		return container_;

		function addButton(iconId,iconClass) {
			var button_ = document.createElement("span");
			button_.setAttribute('id',iconId);
			$(button_).addClass('ui-icon '+iconClass+' ui-state-default ui-corner-all');
			button_.style.position = "relative";
		  
		  if (!$.browser.msie) { // not in IE7 because the buttons and text start drifting
			 	$(button_).hover(
					function(){ 
						$(this).addClass("ui-state-hover"); 
					},
					function(){ 
						$(this).removeClass("ui-state-hover"); 
					}
				);
			} 
		 	$(button_).click(function() {
		 		buttonClick(this);
		 	});
			return button_;
		}

		function buttonClick(me) {
			logit("Button Clicked:"+me.id);
			if (me.id == "tripPlayButton") {
		 		if ($(me).hasClass("ui-icon-play")) { 
					$(me).removeClass("ui-icon-play").addClass("ui-icon-pause"); 
					this1.pause = false;
				} else {
					$(me).removeClass("ui-icon-pause").addClass("ui-icon-play"); 
					this1.pause = true;
				}
			}
			if (me.id == "tripEndButton") {
				this1.pause = false;
			}
			if (clickCB) clickCB(me,this1.pause);
		}
	}
	/*
	TripPlayControl.prototype.showImg = function(img) {
		var my = this;
		logit('TripPlayControl.prototype.showImg:'+img.src);
		
		var topmargin = getTopMargin(img.height,parseInt(my.imgContainer_.style.height));
		var leftmargin = getLeftMargin(img.width,parseInt(my.imgContainer_.style.width));
		logit('setMargin '+topmargin+'/'+leftmargin);
		
		if ($(this.img_).css("opacity") == 0) {
			logit("-----------------------------------------------fade in IMG1:"+img.src);
			this.img_.src = img.src;
			$(my.img_).css("margin-top",topmargin+"px").css("margin-left",leftmargin+"px");
			CrossFade(this.img_,this.img2_);
		} else {
			logit("------------------------------------------------fade in IMG2:"+img.src);
			this.img2_.src = img.src;
			$(my.img2_).css("top",topmargin+"px").css("left",leftmargin+"px");
			CrossFade(this.img2_,this.img_);
		}
		
		$(this.img_).stop().fadeOut("slow",function() {
			$(my.img_).css("margin-top",topmargin+"px");
			$(this).fadeIn("slow");			
		});
	}
	*/
	TripPlayControl.prototype.getDefaultPosition = function() {
 		return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7,40));
	}
	TripPlayControl.prototype.hide = function() {
		$("#tool_source_cont").hide();
 		this.container_.style.display = "none";
	}
	TripPlayControl.prototype.show = function() {
		$("#tool_source_cont").show();
 		this.container_.style.display = "";
	}
	TripPlayControl.prototype.setCity = function(city) {
 		$(this.cityContainer_).html(city);
	}
	TripPlayControl.prototype.setDate = function(date_) {
 		$(this.dateContainer_).html(date_);
	}
	TripPlayControl.prototype.stopPlay = function() {
		this.pause = true;
		if ($(this.buttonPlay_).hasClass("ui-icon-pause")) {
			$(this.buttonPlay_).removeClass("ui-icon-pause").addClass("ui-icon-play"); 
		}
	}
	function logit(text) {
		if (debug) logitAll("TripPlayControl-"+text);
	}
}