function SlideCanvas() {
 	var this1 = this;
	this1.id = "SlideCanvas"; // name of this object
	this1.imgpan = null; // contains panorama image
	this1.file_type = null; // null,panorama,panorama360
	this1.title = null;  // title for panorama image
	
	var ie6 = !window.XMLHttpRequest;
	// ie6 = true;  // for test

	var panorama = null;
	var test1 = 1;
	var panHeight = 450; // initial height of panorama container 
	var mode_360 = false;
	
 	// var ie6 = true; for test only
 	
 	
 	//
 	// socResize : for repositioning the image on the screen after a resize of the window
 	//
 	var docResize = function() {
 		//
 		// 1.
 		logit("docResize");
		var winheight = $(window).height();
		var winwidth  = $(window).width();
		logit('---------------------------window height/width='+winheight+'/'+winwidth);
	 	var divheight = winheight - 40;
	 	if (divheight < 550) divheight = 550;
	 	var divwidth = winwidth - 20;
	 	if (divwidth < 800) divwidth = 800;
	 	logit("document resize to:"+divheight+"/"+divwidth);
		var margintop = 20;
	 	$("#slide_canvas #show").css("height",divheight+"px")
	 	                        .css("width",divwidth+"px")
	 	                        .css("margin-top",margintop+"px");
	 	if (this1.file_type == 'panorama') {
	 		setPanTopMargin(panHeight);
	 	} 
	 	if (this1.file_type == 'youtube') {
	 		setYtTopMargin(350);
	 	} 
	 	if (this1.file_type == 'album') {
	 		this1.setWidthHeight(divwidth,divheight);
	 	}
	  logit("end docResize file_type="+this1.file_type);
 	}
	
	//
	// for ie6 only
	//
	/*
	var docScroll = function() {
 		logit("docScroll");
		var wintop = $(window).scrollTop();
		logit('*******************************window scrollTop='+wintop);
		//$("#slide_canvas").css("top",wintop+"px"); 
	}
  */
	//
	// Close Button rollover
	//
	var rollOver = function() {
		logit("rollOver");
		this1.closeButtonOn = new Image();
		this1.closeButtonOut = new Image();
		this1.closeButtonOut.src = "myicons/close_16_normal.png";
		this1.closeButtonOn.src = "myicons/close_16_highlighted.png";
		//this1.closeButtonOut.src = "myicons/close_16_disabled.png";
		
		logit('setupRollover');
		$("#closeSlide").hover(
			function() {
				//logit("close over hover:"+this1.constructor+"/"+this1.closeButtonOn);
				this.src = this1.closeButtonOn.src;
			},
			function() {
				//logit("close out hover:"+this.src);
				this.src = this1.closeButtonOut.src;
			});
		//logit("end rollOver");
	}

	
	this.startCanvas = function() {
		logit("startShow");
	 	// init a new image for slideshow
	 	this.newImage();
	 	overlay = $("#slide_canvas");
	 	//compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
	  //if (ie6) $(overlay).css("position","absolute");

	  $("#picslide").hide();
	  $("#panShow").hide();	
	  $("#youtubeShow").hide();	
	  $("#panShow").css("visibility","hidden");	 // because in ie7 hide does not seem to work
	  $("#picslide").css("visibility","hidden");	 // because in ie7 hide does not seem to work
	  $("#youtubeShow").css("visibility","hidden");	 // because in ie7 hide does not seem to work
	  
	  
	  if (this1.file_type == 'panorama' || this1.file_type == 'panorama360') {
			$("#showOverlay").css("opacity","0.8");
			$("#showContainer").show();
		  $(overlay).show();
	  	if (this1.title) {
	  		$("#imageTextPan").html(this1.title);
	  	} else {
	  		$("#imageTextPan").html("");
	  	}
		 	if (this1.file_type == 'panorama360') {
		 		mode_360 = true;
		 	} else {
		 		mode_360 = false;
		 	}
		 	logit("mode_360:"+mode_360);
  		imgLoaded(this1.imgpan,function(img1) {
  			logit("image loaded:"+img1.src);
  			panHeight = img1.height;
  			setPanTopMargin(panHeight);
			  $("#panShow").css("visibility","visible");	// for ie7
				$("#panShow").fadeIn(500);	
  			panorama.init(img1,mode_360);
			  panorama.start();
  		});
  	}
	  if (this1.file_type == 'album') {
			$("#showOverlay").css("opacity","1");
			$(overlay).show();
			$("#showContainer").show();
			docResize();
		  $("#picslide").css("visibility","visible");	// for ie7
			$("#picslide").fadeIn(500);	
			this1.startShow('first');
		}
	  if (this1.file_type == 'youtube') {
	  	logit("youtube");
			$("#showOverlay").css("opacity","0.8");
			$("#showContainer").show();
		  $(overlay).show();
		  $("#youtubeShow").css("visibility","visible");	// for ie7
			$("#youtubeShow").fadeIn(500);
			setYtTopMargin(350);
			var params = { allowScriptAccess: "always",allowfullscreen: "true" };
			var first_video = true;
			//var params = { allowScriptAccess: "always", bgcolor: "#cccccc",  name :"allowFullScreen", value:"true" };
			// this sets the id of the object or embed tag to 'myytplayer'.
			// You then use this id to access the swf and make calls to the player's API
			myYouTubePlayerReady = function(pl) {
				logit("myYouTubePlayerReady:"+this1.video_id);
				if (!first_video) { 
					pl.loadVideoById(this1.video_id);
				} else {
					var container = $("#youtubeBorder");
					if (!$(container).hasClass("flashBorder")) {
						$(container).addClass("flashBorder");
					}
					pl.playVideo();
				}
			}
		  //$("youtubeBorder").addClass("flashBorder");
					
			var atts = { id: "myytplayer" };
			var videoId = this1.video_id; // "EJIvxRGB6rI";
			
			if (ytplayer) {
				logit("ytplayer already loaded play:"+this1.video_id);
				//ytplayer.loadVideoById(this1.video_id);
				first_video = false;
			} else {
	      swfobject.embedSWF("http://www.youtube.com/v/"+videoId+"&border=0&enablejsapi=1&playerapiid=ytplayer&fs=1&autoplay=0&showsearch=0&showinfo=0&rel=0&egm=0",
	                         "ytapiplayer", "425", "344", "8", null, null, params, atts);
				//swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1",
	      //swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer&fs=1&autoplay=0&showsearch=0&showinfo=0&rel=0&egm=0",
	      //                   "ytapiplayer", "425", "344", "8", null, null, params, atts);
		   	//ytplayer.loadVideoById("EJIvxRGB6rI");
	  	}
	  }
	}
	
	var setPanTopMargin = function(height) {
		var topmargin = getTopMargin(height,$(window).height()) - 20;
		if (topmargin < 0) topmargin = 0;
		$("#panShow").css("margin-top",topmargin+"px");	
 		logit("pan top-margin:"+topmargin);
	}

	var setYtTopMargin = function(height) {
		var topmargin = getTopMargin(height,$(window).height()) - 20;
		if (topmargin < 0) topmargin = 0;
		$("#youtubeShow").css("margin-top",topmargin+"px");	
 		logit("youtube top-margin:"+topmargin);
	}
	
	this1.cb_stoppit = function() {
		this1.stopCanvas();
	}
	
	this.stopCanvas = function() {
		if (this1.imgpan) {
		  panorama.stop();
		}
		if (this1.file_type == 'youtube') {
			//swfobject.removeSWF("myytplayer");
			if (ytplayer) {
				ytplayer.stopVideo();
			}
		}
		this1.stopShow();
		$("#slide_canvas").hide();
		$("#showContainer").hide();
	}
 	this.initSlideCanvas = function() {
 		logit("initSlideCanvas this.id="+this.id);
		this1 = this;

		this.initSlideControl();
		this.getorder = 'time';

	 	//window.onresize = docResize; 
		$(window).bind("resize",docResize);
		// ie6 does not know fixed position, therefor we reposition canvas top when scrolling 
		if (ie6) {
			//window.onscroll = docScroll;
			//$(window).bind("scroll",docScroll);
		}
		//window.onresizestart = function() {$("#slide_canvas #show").hide();}
	
	 	//$("#slide_canvas").hide();
	 	/*
		$("#openSlide").click(function () {
			this1.startCanvas();
		});
		*/
		$("#closeSlide").click(function () {
			this1.stopCanvas();
		});
		if (ie6) {
			$("#show").click(function () {
				this1.stopCanvas();
			});
		}
		rollOver();
		
 		panorama = new Panorama();
		panorama.setup({
		  viewport_width: 800,
		  speed: 50000,
		  direction: 'right',
		  control_display: 'auto',
		  mode_360: false
    });
    
	 	logit("start initSlideCanvas resize");
	  //docScroll();
	 	docResize();
	 	logit("end initSlideCanvas");
	}


	function logit(text) {
		//window.console.log(text);
		logitAll("SlideCanvas-"+text);
	}

 }
logit("extend SlideControl to SlideCanvas");
SlideCanvas.prototype = new SlideControl();
SlideCanvas.prototype.constructor = SlideCanvas;