// JavaScript Document


function belsisActivities(activitiesArea,listArea,instanceName){
		this.activitiesList = new Array();
		this.createdActivitiesList = new Array();
		
		this.activitiesCount = 5;
		this.activitiesArea = document.getElementById(activitiesArea);
		this.activitiesListArea = document.getElementById(listArea);
		
		this.imageEngine = "";	
		this.activitiesPage = "";	
		this.imagePath = "";
		
		this.ImageWidth = 245;
		this.ImageHeight = 220;
		
		this.ThumbImageWidth = 81;
		this.ThumbImageHeight = 55;
		
		this.instanceName = instanceName; 
		
		this.DateLabel = "Tarih";
		this.TimeLabel =  "Saat";
		this.LocationLabel = "Yer"; 
		
		return this;
	}

belsisActivities.prototype = {
		addActivities:function(id,header,comment,date,time,location,picture){
			this.activitiesList.push({id:id,header:header,comment:comment,date:date,time:time,location:location,pic:picture});
		},
		createId:function(len){
			var string = "ABCDEFGHIJKLMNOPRSTUVYZ0123456789";
			randomnumber=Math.floor(Math.random()*string.length);
			var ret = "";
			for ( var i = 0; i < len; i++) {
				randomnumber=Math.floor(Math.random()*string.length);
				ret = ret + "" + string.substring(randomnumber,randomnumber+1);
			}
			return ret;
		},
		render:function(){
			var mainContainerTable = document.createElement("table");
			
			mainContainerTable.style.width = "100%";
			mainContainerTable.style.tableLayout = "auto";
			mainContainerTable.cellspacing = "0";
			mainContainerTable.cellpadding = "0";
			mainContainerTable.setAttribute("cellspacing","0");
			mainContainerTable.setAttribute("cellpadding","0");
			
			var mainContainerTbody = document.createElement("tbody");
			var picContainerAreaRow =  document.createElement("tr");
			var picContainerArea =  document.createElement("td");
			picContainerArea.style.width = "60%";
			picContainerArea.innerHTML = '<div class="activitiesBigPicArea" id="ActivitiesBigPicArea">&nbsp;</div>';
			
			
			var infoContainer = document.createElement("td");
			infoContainer.style.width = "40%";
			var infoContainerDiv = document.createElement("div");
			infoContainerDiv.setAttribute("id", "ActivitiesInfoArea");
			infoContainerDiv.className = "activitiesInfoArea";
			
			
				var infoTable = document.createElement("table");
				var infoTbody = document.createElement("tbody");
				
				var headerContainerRow = document.createElement("tr");
				var headerContainer	   = document.createElement("td");
				headerContainer.innerHTML = '<div id="ActivitiesHeader" class="activitiesHeader"></div>';
				
				var CommentContainerRow = document.createElement("tr");
				var CommentContainer	   = document.createElement("td");
				CommentContainer.innerHTML = '<div id="ActivitiesComment" class="activitiesComment"></div>';
				
				var DateContainerRow = document.createElement("tr");
				var DateContainer	   = document.createElement("td");
				DateContainer.innerHTML = '<table width="100" border="0" cellspacing="0" cellpadding="0">'+
								              '<tr>'+
								                '<td><div class="activitiesInfoHeader">'+ this.DateLabel +'</div></td>'+
								                '<td><div class="activitiesContent" id="ActivitiesDate"></div></td>'+
								              '</tr>'+
								            '</table>';
				
				var TimeContainerRow = document.createElement("tr");
				var TimeContainer	   = document.createElement("td");
				TimeContainer.innerHTML = '<table width="100" border="0" cellspacing="0" cellpadding="0">'+
							                   '<tr>'+
								                '<td><div class="activitiesInfoHeader">' + this.TimeLabel + '</div></td>'+
								                '<td><div class="activitiesContent" id="ActivitiesTime"></div></td>'+
								              '</tr>'+
								            '</table>';
			    
				var LocationContainerRow = document.createElement("tr");
				var LocationContainer	   = document.createElement("td");
				LocationContainer.innerHTML = '<table width="100" border="0" cellspacing="0" cellpadding="0">'+
								               '<tr>'+
								                '<td valign="top"><div class="activitiesInfoHeader">'+ this.LocationLabel  +'</div></td>'+
								                '<td><div class="activitiesLocation" id="ActivitiesLocation"></div></td>'+
								              '</tr>'+
								            '</table>';
				
			
			headerContainerRow.appendChild(headerContainer);
			CommentContainerRow.appendChild(CommentContainer);
			DateContainerRow.appendChild(DateContainer);
			TimeContainerRow.appendChild(TimeContainer);
			LocationContainerRow.appendChild(LocationContainer);
			infoTbody.appendChild(headerContainerRow);
			infoTbody.appendChild(CommentContainerRow);
			infoTbody.appendChild(DateContainerRow);
			infoTbody.appendChild(TimeContainerRow);
			infoTbody.appendChild(LocationContainerRow);	
			infoTable.appendChild(infoTbody);
			infoContainerDiv.appendChild(infoTable);
			infoContainer.appendChild(infoContainerDiv);
			picContainerAreaRow.appendChild(picContainerArea);
			picContainerAreaRow.appendChild(infoContainer);
			mainContainerTbody.appendChild(picContainerAreaRow);
			mainContainerTable.appendChild(mainContainerTbody);
			this.activitiesArea.appendChild(mainContainerTable);
			
			var activitiesListMainContainer = document.createElement("table");
			activitiesListMainContainer.style.tableLayout = "auto";
			activitiesListMainContainer.cellspacing = "0";
			activitiesListMainContainer.cellpadding = "0";
			activitiesListMainContainer.setAttribute("cellspacing","1");
			activitiesListMainContainer.setAttribute("cellpadding","0");
			activitiesListMainContainerBody = document.createElement("tbody");
			activitiesListRow = document.createElement("tr");
			
			for ( var i = 0; i < this.activitiesCount; i++) {
				if(i < this.activitiesList.length){
					activitiesItem = document.createElement("td");
					activitiesItem.className = "activitiesThumb";
					var imageId = this.createId(11);
					if(i==0){
							this.firstAct = imageId;
						}
					activitiesItem.innerHTML = '<img id="'+imageId+'"  src="'+ this.imageEngine +''+ this.imagePath +''+ this.activitiesList[i].pic +'&w='+ this.ThumbImageWidth +'&h='+ this.ThumbImageHeight +'&f=jpg&zc=1&bg=FFFFFF" width="'+ this.ThumbImageWidth +'" height="'+ this.ThumbImageHeight +'" activitiesInd="'+ i +'" activitiesHeader="'+ this.activitiesList[i].header +'" activitiesComment="'+ this.activitiesList[i].comment +'" activitiesDate="'+ this.activitiesList[i].date +'" activitiesTime="' + this.activitiesList[i].time + '" activitiesLocation="'+ this.activitiesList[i].location  +'" activitiesPic="'+ this.activitiesList[i].pic +'" onMouseOver="'+ this.instanceName +'.activitiesChange(this)" onClick="document.location.href=document.location.href=\''+ this.activitiesPage +'&aid='+ this.activitiesList[i].id +'\'">';
					activitiesListRow.appendChild(activitiesItem);
				}
			}
			activitiesListMainContainerBody.appendChild(activitiesListRow);
			activitiesListMainContainer.appendChild(activitiesListMainContainerBody);
			this.activitiesListArea.appendChild(activitiesListMainContainer);
			this.activitiesChange(document.getElementById(this.firstAct));
		},
		activitiesChange:function(img){
						
			var headerTextContainer = document.getElementById("ActivitiesHeader");
			headerTextContainer.innerHTML = img.getAttribute("activitiesHeader");
			
			var CommentContainer = document.getElementById("ActivitiesComment");
			CommentContainer.innerHTML = img.getAttribute("activitiesComment");
			
			var DateContainer = document.getElementById("ActivitiesDate");
			DateContainer.innerHTML = img.getAttribute("activitiesDate");
			
			var TimeContainer = document.getElementById("ActivitiesTime");
			TimeContainer.innerHTML = img.getAttribute("activitiesTime");
			
			var LocContainer = document.getElementById("ActivitiesLocation");
			LocContainer.innerHTML = img.getAttribute("activitiesLocation");
			
			var pictureArea = document.getElementById("ActivitiesBigPicArea");
			pictureArea.style.backgroundImage = 'url('+this.imageEngine +''+ this.imagePath +''+ img.getAttribute("activitiesPic") +'&w='+ this.ImageWidth +'&h='+this.ImageHeight +'&f=jpg&zc=1&bg=FFFFFF)';
		}
	}