I4Portal.SlideBoard = function (namedDiv, slideBoardId, resourceUrl){
	this.namedDiv = namedDiv;
	this.slideBoardId = slideBoardId;
	this.resourceUrl=resourceUrl;
	
	this.slides=null;
	this.jsonLoaded=false;
	
	this.currentSlideIndex=0;
	this.maxSlides=0;
	
	this.header='GUIDING PRINCIPLES';
	this.slideInterval=4000;
};


I4Portal.SlideBoard.prototype = {
		
		renderHTML:function(namedDiv) {
	     
		   
		   var newHTML = 	' <div id="slide_board">';
		   newHTML 	   += 	' 		<div class="slide_board_header">' + this.header + '</div>';
		   newHTML	   +=   ' 		<div id="slide_wrp"><div id="slide">' + this.slides[0].content + '</div> </div>';
		   newHTML	   +=   ' 		<div class="slide_board_footer"><ul>'; 
		   newHTML	   +=   ' 			<li> <img class="slide_prev" src="simages/left_arrow.gif" /> </li>';
		   newHTML	   +=   ' 			<li> <img class="slide_next" src="simages/right_arrow.gif" /> </li>';
		   newHTML	   +=   '  		</ul></div>'; 
		   newHTML	   +=   '</div>';
		   
		   var changeDiv = document.getElementById(namedDiv);
   		   changeDiv.innerHTML = newHTML;
			

	       var t_component= this;
		   $(".slide_prev").bind('click',function(event) {t_component.prevSlide();}); 
		   $(".slide_next").bind('click',function(event) {t_component.nextSlide();}); 
		   
		   setInterval(function() {t_component.nextSlide();}, 9000);
			 
			
	    },
		
	    showSlide:function(){
	    	//alert("in show slide");
			var changeDiv = document.getElementById("slide");
			changeDiv.innerHTML = this.slides[this.currentSlideIndex].content;
			$("#slide").fadeIn(1000);
	    },
	    
	    nextSlide:function(){
	    	//alert("in next slide" + this.header);
			try {
				
				this.currentSlideIndex ++;
				if (this.currentSlideIndex == this.maxSlides)  this.currentSlideIndex= 0;
				var t_component= this;				
				$("#slide").fadeOut(1000,function(event) {t_component.showSlide();});
				
			
			}catch(e){
				
			}		
		},
		
		prevSlide:function(){
		//	alert("in prev slide" + this.slides[this.currentSlideIndex].content);
			try {
				
				this.currentSlideIndex --;
				if (this.currentSlideIndex == this.maxSlides)  this.currentSlideIndex= 0;
				
				var t_component= this;		
				$("#slide").fadeOut(1000,function(event) {t_component.showSlide();});
				
			
			}catch(e){
				
			}		
		},
		
		
		loadJson:function(){
			  var boardId= encodeURIComponent(this.slideBoardId);
			  postParams= "boardid=" + boardId;
		      var resourceUrl= this.resourceUrl+"?"+postParams;
			  
			  new I4Portal.ContentLoader(resourceUrl,this.onJsonLoad,this);
			  //new Sightix.ContentLoader(xslUrl,onXSLLoad);
		},	
		
		onJsonLoad:function(req){
				
				// var thisRef=this.callerRef;
				try {
					var jsonText=req.responseText;
					this.slides = jsonParse(jsonText);
				 	this.currentSlideIndex=0;
				 	this.maxSlides=this.slides.length;
				} catch(e){
					
				}
				 //alert("the gallery id is:"+this.galleryId);
				 this.jsonLoaded=true;
				 this.renderHTML(this.namedDiv);
	    }
				
};