function updateContent(elementId, lable, value){
        if(document.getElementById(elementId+'Lbl')!= null && document.getElementById(elementId+'Val')!= null){
                if (value == "" || value==null){
                        document.getElementById(elementId+'Lbl').innerHTML = '';
                        document.getElementById(elementId+'Val').innerHTML='';
                }else{
                        document.getElementById(elementId+'Lbl').innerHTML = lable;
                        document.getElementById(elementId+'Val').innerHTML= value;
                }
        }
}
function createClassInstructionContainer(classInstruction){
	var classInstructionContainer = "";
	if (classInstruction != null && classInstruction.length >  0){
		classInstructionContainer += '<div>';
		classInstructionContainer +='<table cellspacing="0" cellpadding="0" align="left" >';
		classInstructionContainer +='<tr>';
		classInstructionContainer +='<td>';
		classInstructionContainer +='<table cellspacing="0" cellpadding="0">';
		classInstructionContainer +='<tr>';
		classInstructionContainer +='<td><img src="/sllsecure/web/images/tooltip2top.gif"></td>';
		classInstructionContainer +='</tr>';
		classInstructionContainer +='<tr>';
		classInstructionContainer +='<td class="classInstructionContainer">';
		classInstructionContainer +='<table cellspacing="0" cellpadding="0">';
		classInstructionContainer +='<tr><td width="1px" valign="top"><img src="/sllsecure/web/images/green_spacer.gif"></td>';
		classInstructionContainer +='<td>';
		classInstructionContainer +='<span class="classInstructionText" id="classInstruction">'+classInstruction+'  &nbsp;&nbsp;</span>';
		classInstructionContainer +='</td>';
		classInstructionContainer +='</tr>';
		classInstructionContainer +='</table>';
		classInstructionContainer +='</td>';
		classInstructionContainer +='</tr>';
		classInstructionContainer +='<tr>';
		classInstructionContainer +='<td><img src="/sllsecure/web/images/tooltip2bottom.gif"></td></tr>';
		classInstructionContainer +='</table>';
		classInstructionContainer +='</td>';
		classInstructionContainer +='<td><img src="/sllsecure/web/com/kcpt/assets/images/tooltip7.png"></td>';
		classInstructionContainer +='<td width="10px">&nbsp;</td>';
		classInstructionContainer +='<td><img name="imgTeacherImage" id="imgTeacherImage" src="' + teacherImagePath + '" width="45"></td>';
		classInstructionContainer +='</tr>';
		classInstructionContainer +='</table>';
		classInstructionContainer +='</div>';
	}
	return classInstructionContainer;
}


var loadpreviewpageactivity = function(jsfileName,folderName){
		$("#activityData").children().remove(); 
		$('#activityLoader').show();

		var jsfile=jsfileName+'_'+folderName+ '.js';
		var folder='folder_' + folderName;

	   $.getJSON(jsfile,
        function(dataf){
			
		   data = dataf[folder];

        updateContent('lastUpdated','Last Updated: ', data.publishDate);
        updateContent('className','Class Name: ', data.className);
        updateContent('period','Period: ', data.period);
	document.getElementById("classInstructionText").innerHTML = createClassInstructionContainer(data.classInstruction);
        if(data.period == null || data.period == ""){
                document.getElementById("separator").style.visibility = "hidden";
        }else{
                document.getElementById("separator").style.visibility = "visible";
 	}

		   var displayWorksheet	= data.displayWorksheet;
		   if(displayWorksheet ==1){
			document.getElementById('displayWorksheet').value = 1;
		   }
		   else
		   {	
			document.getElementById('displayWorksheet').value = 0;
		   }

		   var teacher = data.teacherImage;
		   if (data.resultCode == 1 || data.resultCode == 28)
		   {
			   var content ='<div class="noActivityFound">There are no activities to display for this folder.</div>';
			   $(content).appendTo("#activityData");
			   $('#activityLoader').hide();			  
		   }
		  else
		   {
          $.each(data.items, function(i,item){
		
		    $('#activityLoader').show();
            var content = '<div class="marginDiv">&nbsp;</div><fieldset class="activityField">';
		 if(item.sketchpadVersion!=null || item.sketchpadVersion!=undefined){
                        content +='<div class="sketchpadVersion">'+item.sketchpadVersion+'</div>';
                        }
			
			content +='<div class="fieldsetInside"><div style="display:block;margin-top:5px;">';
			/*
			if(item.instruction)
			{
				content +='<div class="teacherImage"><img src="'+teacher+'" height="'+teacherImgHeight+'" width="'+teacherImgWidth+'"></div>';
				content +='<div class="activityInstructionCallout"><img src="/sllsecure/web/com/kcpt/assets/images/tooltip8.png"></div>';
			
				content +='<div class="activityInstruction" >';
			
				content += '<table cellspacing="0" cellpadding="0" style="width: 510px;">';
				content += '<tr>'
				content += '<td ><img src="/sllsecure/web/images/callout_top.gif"></td>'
				content += '</tr>';
			
				content += '<tr>';
				content += '<td valign="top" style="padding: 5px 5px 5px 15px; background-color: rgb(0, 172, 188);">';
				if (item.instruction) {
					content += '<span class="activityInstructionText" id="activityInstructionText_'+item.id+'">'+wordwrap(item.instruction, 57, "<br>", true)+'</span>';
				}
				else {
					content +='<span class="activityInstructionText" id="activityInstructionText_'+item.id+'"></span>';
				}
						
				content += '</td>';
		
				content += '<tr>';
				content += '<td ><img src="/sllsecure/web/images/callout_bottom.gif"></td>';
				content += '</tr>';
				content += '</table>';
				content +='</div>';
			} */
			if(item.instruction)
			{
				content +='<div class="teacherImage"><img src="'+teacher+'" height="'+teacherImgHeight+'" width="'+teacherImgWidth+'"></div>';
				//content +='<div class="teacherImage"><img src="'+teacher+'" height="52" width="45"></div>';
				content +='<table border="0" cellpadding="0" cellspacing="0">';
				content +='<tr>';
				content +='<td valign="top">';
				content +='<div class="activityInstructionCallout" style="padding:  0px 0px 0px 0px;" ><img src="./images/callout_beak.gif"></div>';
				
				content +='</td><td><div>';
			
				content +='<table border="0" cellspacing="0" cellpadding="0" style="width: 510px;">';
				content +='<tr>'
				content +='<td ><img src="./images/callout_top.gif"></td>'
				content +='</tr>';
			
				content += '<tr>';
				content += '<td valign="top" style="padding: 5px 5px 5px 15px; background-color: rgb(0, 172, 188);">';
				if (item.instruction) {
					content += '<span class="activityInstructionText" id="activityInstructionText_'+item.id+'">'+item.instruction+'</span>';
				}
				else {
					content +='<span class="activityInstructionText" id="activityInstructionText_'+item.id+'"></span>';
				}
						
				content += '</td>';
		
				content += '<tr>';
				content += '<td ><img src="./images/callout_bottom.gif"></td>';
				content += '</tr>';
				content += '</table>';
				content +='</div>';
				content +='</td>';
				content +='</tr>';
				content +='</table>';
		
			}
			content +='<div class="clear"></div></div>';
			content +='<div class="marginDiv">&nbsp;</div><div class="clear"></div>';
			content +='<table width="940px"><tr><td valign="top">';
			content +='<div style="float:left; display:table-cell;"><!-- Activity Image Container starts -->';
			content +='<img name="imgActivityImage" class="imgContainer" id="imgActivityImage_'+item.id+'" src="'+item.thumbnail+'" height="180px" width="260px"><br/><br/>';
			
			if (item.studentSketchName !='' && item.studentSketchName !=null ) { 
			//content +='<a href="DownloadFile?activityID='+item.id+'"><img src="./com/kcpt/assets/images/sketchpadbutton.png" border="0"></a>';
			var file =item.studentSketch;
			var fileName =item.studentSketchName;
			content +='<a href="download.php?file='+file+'&fileName='+fileName+'"><img src="./assets/images/sketchpadbutton.png" border="0"></a>';
			}else{
				var  fileName = "Untitled.gsp";
				var file="./assets/ActivityFiles/Untitled.gsp";
			 content +='<a href="download.php?file='+file+'&fileName='+fileName+'"><img src="./assets/images/open_new_sketch.gif" border="0"></a>';

			}

				if (item.worksheetName && ($("#displayWorksheet").val() == '1')) {  
			content +='<div style="height:10px;">&nbsp;</div><a href="javascript:sheetpopup(\''+item.worksheet+'\',\''+item.accessKey+'\');"><img src="./assets/images/worksheetbutton.png" border="0"></a>';
			}
			content +='</div> <!-- Activity image container ends --></td><td valign="top">';
			content +='<div class="activityDetails">';
			content +='<div class="activityTitle">'+item.title+'</div><div class="fillerdiv">&nbsp;</div><div class="activityDescription">'+item.description+'</div><div class="fillerdiv">&nbsp;</div>';
			
				if (item.studentSketchName && item.studentSketchName !=null) { 
			content +='<div><span class="activityLabel">Sketch: </span><span class="activityValues">'+item.studentSketchName+'</span></div>';
			}else
			{
			content +='<div><span class="activityLabel">Sketch: </span><span class="activityValues">None</span></div>';
			}
			if(item.worksheetName){
			content +='<div><span class="activityLabel">Worksheet Title: </span><span class="activityValues">'+item.worksheetName+'</span></div>';
			}else
			{
			content +='<div><span class="activityLabel">Worksheet Title: </span><span class="activityValues">None</span></div>';
			}
			content +='<div style="height:10px">&nbsp;</div>';
			content +='<div style="height:25px">&nbsp;</div>';
			if(item.activitytips)
			{
			content +='<table wdith="645px" cellpadding="0" cellspacing="0">';
			content += '<tr>';
			content += '<td><img src="./images/sketchtipstop.png"></td>';
			content += '</tr>';
			content +='<tr>';
			content +='<td>';
				content += '<table class="sketchtip" cellspacing="0" cellpadding="0">';
				content += '<tr>';
				content += '<td>';
					content +='<table class="sketchtipHeader">';
					content += '<tr style="margin-left:10px;">';
					content +='<td  class="twistyUp" id="twisty_'+item.id+'">&nbsp;</td><td class="sketchTipText">&nbsp;Sketch Tips&nbsp;</td>';
					
					content +='</tr>';
					content +='</table>';
				content +='</td>';
				content += '</tr>';
				content += '</table>';
			content +='</td>';
			content +='</tr>';
			content += '<tr>';
			content += '<td style="background-color:#fff">';
				content += '<table class="tipTable" id="tiplist_'+item.id+'" style="display: none">';
				content += '<tr style="margin-left:10px">';
				content += '<td class="hrclass">';
				content += '<hr style="margin-left:10px;" width="610px">';
				content += '</td>';
				content += '</tr>';
				content += '<tr>';
				content +='<td>';
				
			
			for (i=0; i<item.activitytips.length; i++)
			{
				content +='<div class="tipContainer">';
								content +='<table>';
				
				content +='<table width="600" cellpadding="0" cellspacing="0">';
				content +='<tr>';
				
				content +='<td align="left" width="450px" >'
				content +='<span class="sttext" title="'+item.activitytips[i].sketch_tip_title+'">';		
				content +=item.activitytips[i].sketch_tip_name;
				content +='</span>';
				content +='</td>';
				
				content +='<td align="right" valign="top">';
				if ((item.activitytips[i].sketchtip_video == 1) && (item.show_tip_videos == 1) && (item.activitytips[i].sketchtip_video_url) !='') { 
				
				//content +='<a href="javascript:videopopup(\''+$("#videobase").val()+item.activitytips[i].sketchtip_file_title+'/'+item.activitytips[i].sketchtip_file_title+'.htm\');">Video</a>';					
				content +='<a class="sketchtipLink" href="javascript:videopopup(\''+item.activitytips[i].sketchtip_video_url+'\');">Video</a><span class="sketchtipdivider"> | </span>';					
				}

				if ((item.activitytips[i].sketchtip_sheet == 1) && (item.show_tip_sheets == 1))
				{ 
					content +='<a class="sketchtipLink" href="javascript:sheetpopup(\''+item.activitytips[i].sketchtip_sheet_url+'\',\''+item.activitytips[i].sketchtip_access_key+'\');">Sheet</a>';
				} 

//				//content +='</td>';
//				content +='</tr>';
				content +='</table>';
				content +='</div>'; 
			}

			content +='</div>';

				content +='</td>';
				content +='</tr>';
				content +='</table>';
			content +='</td>';
			content +='</tr>';
			content += '<tr>';
			content += '<td valing="top"><img style="padding:0px;" src="./images/sketchtipsbottom.png"></td>';
			content += '</tr>';

			content += '</table>';

			}
			content +='</div>';
			
			

			content +='<script type=\"text/javascript\">';
			content +='		$(function() {';
			content +='$("#twisty_'+item.id+'").click(function () {';
			content +='	 $("#tiplist_'+item.id+'").slideToggle("normal");';
			content +='		if($("#twisty_'+item.id+'").attr("className") == "twistyDown")';
			content +='		{';
			content +='			$("#twisty_'+item.id+'").removeClass("twistyDown");';
			content +='			$("#twisty_'+item.id+'").addClass("twistyUp");';
			content +='			return false;';
			content +='		}';		
			content +='		if($("#twisty_'+item.id+'").attr("className") == "twistyUp")';
			content +='		{';
			content +='			$("#twisty_'+item.id+'").removeClass("twistyUp");';
			content +='			$("#twisty_'+item.id+'").addClass("twistyDown");';
			content +='			return false;';
			content +='		}';	  
			content +='	    });';
			content +='	});';
			content +='<\/script>';

			content +='</div> <!-- Activity Details End --></td></tr>';
			content +='</table> <!-- Activity Container End -->';
			content +='</div>';
			content +='</fieldset>';
			
			$(content).appendTo("#activityData");

			$('#activityInstruction_'+item.id).corner();
			
			$('#activityLoader').hide();
            
          });
	   }
	   //$(".sketchtip").corner();
        });
//	
	 }