/**
 *+----------------------------------------------------------------------------+
 *|                                                                            |
 *| TOSOM s.r.l.                                                               |
 *| webcam stream javascript module                                            |
 *|                                                                            |
 *| @author : Tosom s.r.l.                                                     |
 *| @version : 1.07.1                                                          |
 *| @requires : nothing, no jquery no prototype just plain javascript.         |
 *|                                                                            |       
 *+----------------------------------------------------------------------------+
 */
 
/**
 *  Main object, build this object once the page is loaded. 
 *  
 *  @param op -> json object
 * 		webcam   => (required)                string   the webcam id
 * 		id       => (required)                string   the html page id where to show the stream
 *		auto     => (optional::default true)  boolean  auto load the cam on startup  
 * 		w|width  => (optional::default 640)   integer  the id width 
 * 		h|height => (optional::default 480)   integer  the id height 
 * 		refresh  => (optional::default 5)     integer  the time in seconds used to refresh the image 
 *  		loader   => (optional::default false) string   image to use as background loader for the webcam(usually a little gif anim)
 * 
 * 		// Added from version 1.07.1 
 * 		caption              => boolean (show caption or not)
 * 		captionType          => string "div" or "link"
 * 		captionWidth         => integer with the caption width
 * 		captionHeight        => integer with the caption height
 * 		captionHREF          => use if type is "link", the url to link
 * 		captionVeritcalAlign => string "top"(default) , "bottom" , middle	
 * 
 */
var Webcam = function(op)
{
	this.status = "uninitialized" ;
	var URL     = "www.camlocandaalgambero.com" ;
	var opts    = null ;
	var pageCam = null ;
	var timer   = null ;
	var self    = this ;
	
	/* PUBLIC :: CONSTRUCTOR (used below to build the obj) */
	this.build = function(op)
	{
		if( typeof op != "object" )
		{ trace("ERROR::build() => no options."); return; }
		
		if( typeof op.webcam != "string" || op.webcam=="" || op.webcam.replace(/^\s+|\s+$/g,'')=="" )
		{ trace("ERROR::build() => empty or invalid webcam."); return; }
		
		if( typeof op.id != "string" || op.id=="" || op.id.replace(/^\s+|\s+$/g,'')=="" )
		{ trace("ERROR::build() => empty or invalid id."); return;	}
		
		// Check Html Id where to show contents
		var tmp = document.getElementById(op.id) ;
		if( !tmp )
		{ trace("ERROR::build() =>  id unavailable in the html.");return ; }
		this.pageCam = tmp ;
		
		// SETUP MAIN OPTIONS
		self.opts = {
			id : op.webcam ,   // webcam id
			w  : 640 ,         // default width
			h  : 360 ,         // default height
			refresh : 5*1000 , // default refresh time in millisec
			loader  : false   ,  // loader image for background container only if specified
			
			//caption attributes 
			showCaption          : false ,
		 	captionType          : "div" ,
		 	captionWidth         : false ,
		 	captionHeight        : false ,
		 	captionHREF          : false ,
		 	captionVeritcalAlign : "bottom" ,// (top,middle,bottom)
			
			empty:true 
		};
		
		// Update defaults if specified in the op obj
		var tmp = false ; 
		if( typeof op.w && !isNaN(op.w) )
		{ tmp = (op.w) ; } 
		if( typeof op.width && !isNaN(op.width) )
		{ tmp = parseInt(op.width) ; } 
		if(tmp)	
		{self.opts.w = tmp; }
		
		tmp = false ;
		if( typeof op.h && !isNaN(op.h) )
		{ tmp = parseInt(op.h); }
		if( typeof op.height && !isNaN(op.height) )
		{ tmp = parseInt(op.height); }
		if(tmp)
		{self.opts.h = parseInt(tmp); }
		
		if( typeof op.refresh!="undefined" && !isNaN(op.refresh) )
		{ self.opts.refresh = parseInt(op.refresh)*1000 ; }
		if( typeof op.loader=="string" && op.loader!=""  && op.loader.replace(/^\s+|\s+$/g,"")!="" )
		{ self.opts.loader = op.loader.replace(/^\s+|\s+$/g,"") ; }
		
		if( typeof op.showCaption !="undefined" && op.showCaption===true )
		{ 
			self.opts.showCaption = true ;
			
			if( typeof op.captionType   != "undefined" ){ self.opts.captionType   = op.captionType ; }
			if( typeof op.captionWidth  != "undefined" ){ self.opts.captionWidth  = op.captionWidth ; }
			if( typeof op.captionHeight != "undefined" ){ self.opts.captionHeight = op.captionHeight ; }
			if( typeof op.captionHREF   != "undefined" ){ self.opts.captionHREF   = op.captionHREF ; }
			if( typeof op.captionVeritcalAlign != "undefined" ){ self.opts.captionVeritcalAlign = op.captionVeritcalAlign ; }
			
		}
		
		
		this.camSet();
		this.status = "initialized" ;
		
		if( typeof op.auto == "undefined" ||  (typeof op.auto != "undefined" && op.auto===true) )
		{ this.camStart(); }  
		
		var footer = document.getElementById(op.id+"_footer") ;
		
		if( footer )
		{ 
			footer.innerHTML = ''
				+'<div style="float:right">Automatic refresh every '+(self.opts.refresh/1000)+' seconds.</div>'
				+'<div style="float:left">'
				+'<a href="http://'+URL+'" target="_blank" >'+URL+'</a> ' 
				+'</div>'
				+'';
		}
	}
	/* PUBLIC :: setup html container to start handling cam */
	this.camSet = function()
	{
		if( typeof opts != "object" )
		{ trace("ERROR::camSet() => no options set."); return ; }
		
		if( self.pageCam == null )
		{ trace("ERROR::camSet() => no cam container set."); return ; }
		
		// SETUP THE HTML CAM 
		var camStyle=''+
			'position:relative;'+
			'display:block;'+
			'width:'+self.opts.w+'px;'+
			'height:'+self.opts.h+'px;'+
		'';
		if( self.opts.loader )
		{ camStyle += 'background-image:url(\''+self.opts.loader+'\');background-repeat:no-repeat;background-position:center center;' }
		
		self.pageCam.setAttribute("style",camStyle)
		
		// Add links overlay
		if( self.opts.showCaption === true  )
		{
			var caption = false ; 
			var captionStats = {
				type    : "div" ,
				width   : self.opts.w ,
				height  : 100 ,
				offTop  : 0 ,
				offLeft : 0  
			}
			
			if( self.opts.captionWidth && !isNaN(self.opts.captionWidth) )
			{ captionStats.width = self.opts.captionWidth ; }
			
			if( self.opts.captionHeight && !isNaN(self.opts.captionHeight) )
			{ captionStats.height = self.opts.captionHeight ; }
			
			if( self.opts.captionType=="link" )
			{ captionStats.type = "a" ; }
			
			if( captionStats.width < self.opts.w )
			{ captionStats.offLeft = Math.round( (self.opts.w-captionStats.width)/2 ) ; }
			
			if( self.opts.captionVerticalAlign == "middle" )
			{ captionStats.offTop = Math.round(  (self.opts.h/2) - (captionStats.height/2)  ) ; }
			else if( self.opts.captionVeritcalAlign == "bottom" )
			{ captionStats.offTop = self.opts.h - captionStats.height ; }
			
			caption = document.createElement(captionStats.type) ;
			
			caption.setAttribute("style",""+
				"position:absolute;"+
				"z-index:99999;"+
				"display:block;"+
				"width:"+captionStats.width+"px;"+
				"height:"+captionStats.height+"px;"+
				"top:"+captionStats.offTop+"px;"+
				"left:"+captionStats.offLeft+"px;"+
				"background-image:url('./images/empty.png');"+
				""
			);
			
			if( self.opts.captionType=="link" )	
			{
				if( typeof self.opts.captionHREF != "undefined" )
				{ caption.setAttribute("href",self.opts.captionHREF);caption.setAttribute("target","_blank"); }
				else{ caption.setAttribute("href","javascript:void(0)") ; }
			}
			
			caption.innerHTML="" ; //'<table width="'+captionStats.width+'" height="'+captionStats.height+'" cellspacing="0" cellpadding="0" border="0"><tr><td>&nbsp;</td></tr></table>';
			
			self.pageCam.appendChild(caption); 
		}
		
	}
	/* PUBLIC :: main! this starts up the cam */
	this.camStart = function()
	{
		if( typeof opts != "object" )
		{ trace("ERROR::camStart() => no options set."); return ; }
		
		if( self.pageCam == null )
		{ trace("ERROR::camStart() => no cam container set."); return ; }
		
		if( this.timer != null )
		{ trace("ERROR::camStart() => already started."); return ; }
		
		this.status = "running" ;
		this.timer = window.setInterval( function(){ camRefresh() } , self.opts.refresh ) ;	
	}
	/* PUBLIC :: top cam execution */
	this.camStop = function()
	{
		this.status = "stopped" ;
		if( this.timer!=null )
		{ clearTimeout(this.timer);this.timer=null; }
	}
		
	/* PRIVATE :: cam handling */
	var camRefresh = function()
	{
		var idxTop = 100 ; 
		var idxBg  = 99 ;
		var imageStyle = 'position:absolute;top:0;left:0;width:'+( self.opts.w )+'px;height:'+( self.opts.h )+'px;';
		
		// create the new image node
		var imageSrc = "https://www.locandaalgambero.com/webcam/camloader/?p="+Math.random() ;
		var newImage = document.createElement("img") ;//'<img src="'+(imageSrc)+'" alt="" title="" />' ;
		newImage.setAttribute("src",imageSrc) ;
		newImage.setAttribute("alt","") ;
		newImage.setAttribute("title","") ;
		newImage.setAttribute("width",self.opts.w) ;
		newImage.setAttribute("height",self.opts.h) ;
		newImage.style.position = "absolute";
		newImage.style.top      = "0" ;
		newImage.style.left     = "0" ;
		newImage.style.zIndex   = idxTop ;
		
		if (document.all && !document.querySelector) 
		{
			// Get Container Offset
			newImage.style.top  = self.pageCam.offsetTop+1  ;// Add border !!
			newImage.style.left = self.pageCam.offsetLeft+1 ;// Add border !!
		}
		
		// load prevuoisly added images if any
		var images = self.pageCam.getElementsByTagName("img"); 
		
		// remove background if any
		if( images[0] && images[0].style.zIndex == idxBg )
		{ self.pageCam.removeChild( images[0] ) ; }
		if( images[1] && images[1].style.zIndex == idxBg ) // should never happen but just in case
		{ self.pageCam.removeChild( images[1] ) ; }
		
		// move top image to background
		if( images[0] && images[0].style.zIndex == idxTop )
		{ images[0].style.zIndex = idxBg ; }
		if( images[1] && images[1].style.zIndex == idxTop ) // should never happen but just in case
		{ images[1].style.zIndex = idxBg ; }
		
		// add new top image
		self.pageCam.appendChild(newImage);
		
	}
	
	/* PRIVATE :: utility methods */
	var trace = function(m){ 
		if( self.opts && typeof self.opts.id != "undefined" && this.pagecam!=null )
		{ this.pagecam.innerHTML = m ; }
		if(window.console){window.console.log(m)}/*else{alert(m)*/ 
	}
	
	/* CONSTRUCT !!! */
	this.build(op) ;
}