var host = 'http://www.digi-images.de';

var loadingImage = host +'/gfx/icons/lightbox/loading.gif';
var closeButton = host +'/gfx/icons/lightbox/close.gif'
var isPostershop = false;
     
function JSONscriptRequest(fullUrl) {
    this.fullUrl = fullUrl; 
    this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
    this.headLoc = document.getElementsByTagName("head").item(0);
    this.scriptId = 'JscriptId' + JSONscriptRequest.scriptCounter++;
    
}

JSONscriptRequest.scriptCounter = 1;

JSONscriptRequest.prototype.buildScriptTag = function () {
    this.scriptObj = document.createElement("script");
    this.scriptObj.setAttribute("type", "text/javascript");
    this.scriptObj.setAttribute("charset", "utf-8");
    this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE);
    this.scriptObj.setAttribute("id", this.scriptId);
}

JSONscriptRequest.prototype.removeScriptTag = function () {
    this.headLoc.removeChild(this.scriptObj);  
}

JSONscriptRequest.prototype.addScriptTag = function () {
    this.headLoc.appendChild(this.scriptObj);
}

function getPage(start, fullUrl){
	document.getElementById('myGallery').innerHTML = '';
	var req = fullUrl +"&start=" +start; 
	bObj = new JSONscriptRequest(req); 
	bObj.buildScriptTag(); 
	bObj.addScriptTag();
}

function getCollectionDetail(start, collectionId, fullUrl){
	document.getElementById('myGallery').innerHTML = '';
	var req = fullUrl +"&cid=" +collectionId +'&start=' +start; 
	bObj = new JSONscriptRequest(req); 
	bObj.buildScriptTag(); 
	bObj.addScriptTag();
	
}

function getGallery(jsonData) {     
     // gallery container
     var myGallery = document.createElement("div");
     if(jsonData.Gallery.MyGallery.bgColor != ""){
	     myGallery.style.backgroundColor = "#" +jsonData.Gallery.MyGallery.bgColor;
     }
     myGallery.style.width = (jsonData.Gallery.MyGallery.imagesPerRow * 140 +60) +'px';
     myGallery.style.padding = "20px";
     myGallery.style.cssFloat = "left";
     myGallery.style.styleFloat = "left"; // for IE
     myGallery.style.clear = "both";

     
    // css
	var headElem = document.getElementsByTagName("head").item(0);
    var cssStyle=document.createElement('style');
    headElem.appendChild(cssStyle); // todo fix ie
    cssStyle.setAttribute('type', 'text/css');
    cssStyle.setAttribute('media', 'screen');
    
	if(cssStyle.styleSheet){// IE
		cssStyle.styleSheet.cssText = generateCss();
	} else {// w3c
		cssStyle.appendChild(document.createTextNode(generateCss()));
	}
    
     // title
     if(jsonData.Gallery.MyGallery.title != ''){
	     var myGalleryTitle = document.createElement("div");
	     if(jsonData.Gallery.Collection.isCollection == 'true' && jsonData.Gallery.Collection.collectionId != '-1' && jsonData.Gallery.MyGallery.sorting != 'oneCollection'){
	     	if(jsonData.Gallery.MyGallery.linkColor != ""){
		     	myGalleryTitle.innerHTML = jsonData.Gallery.Collection.collectionTitle +"&nbsp;<font style=\"color:#" +jsonData.Gallery.MyGallery.linkColor +";font-size:12px;cursor:pointer; font-weight:normal\" onclick=\"location.reload(true);\">Zur&uuml;ck</font>" +"<br/>";
	     	}else{
	     		myGalleryTitle.innerHTML = jsonData.Gallery.Collection.collectionTitle +"&nbsp;<font style=\"font-size:12px;cursor:pointer; font-weight:normal\" onclick=\"location.reload(true);\">Zur&uuml;ck</font>" +"<br/>";
	     	}
	     }else{
	     	myGalleryTitle.innerHTML = jsonData.Gallery.MyGallery.title +"<br/>";
	     }
	     if(jsonData.Gallery.MyGallery.textColor != ""){
		     myGallery.style.color = "#" + jsonData.Gallery.MyGallery.textColor;
	     }
	     myGallery.style.fontSize = "18px";
	     myGallery.style.fontWeight = "bold";
	     myGallery.style.fontFamily = "Verdana, Arial, sans-serif"
	     myGallery.appendChild(myGalleryTitle);
     }
     
     var images = jsonData.Gallery.Images.Image;
     for (var i=0; i < images.length; i++) {
     	var imageContainer = document.createElement("div");
   		var centerElem = document.createElement('center');
   		imageContainer.appendChild(centerElem);
     	
     	imageContainer.style.width ="100px";
     	imageContainer.style.minHeight ="100px";
   		
   		if(document.all && !window.opera){ // IE
	   		imageContainer.style.margin = "5px";
	   		imageContainer.style.paddingLeft = "15px";
	   		imageContainer.style.styleFloat = "left";
   		}else{
   			imageContainer.style.margin = "10px";
   			imageContainer.style.padding = "10px";
   			imageContainer.style.cssFloat = "left";
   		}
   		if(jsonData.Gallery.ImageContainer.borderColor != ""){
	   		imageContainer.style.border = "1px " +jsonData.Gallery.ImageContainer.borderStyle +" #" +jsonData.Gallery.ImageContainer.borderColor;
   		}
   		  	
     	// the link to large image
     	var imageLink = document.createElement('a');
     	if(jsonData.Gallery.Collection.isCollection == 'false' || (jsonData.Gallery.Collection.isCollection == 'true' && jsonData.Gallery.Collection.collectionId != '-1')) {
	     	imageLink.href = host +"/include/image.jpg?imageId=" +images[i].id +"&size=500";
	     	imageLink.rel = "lightbox";
	     	imageLink.id = images[i].id;
	     }else{
	     	imageLink.href = '#';
	     	imageLink.setAttribute("onclick", "getCollectionDetail(" +0 +',' +images[i].collectionId +",'" +jsonData.Gallery.Gallery.url +"')" ); 
	     }	
	    imageLink.style.textDecoration = 'none';
	    imageLink.title  = images[i].title;
     	centerElem.appendChild(imageLink)
     	
     	
     	// the image
     	var image = document.createElement("img");
     	image.src = host +"/include/image.jpg?imageId=" +images[i].id +"&size=100&cropped=true"
     	image.style.padding = "20px 20 0 0";
     	image.title = images[i].title;
     	image.border = "0";
     	image.style.border = "0px solid #000000";
     	if(jsonData.Gallery.MyGallery.effect == 'reflection'){
     		image.setAttribute('onload','Reflection.add(this,{opacity: 1/3})');
     	}
     	imageLink.appendChild(image);
	   	
	   	// metadata
	   	if(jsonData.Gallery.Gallery.displayTitle == 'true' || jsonData.Gallery.Gallery.displayVoting == 'true' || jsonData.Gallery.Gallery.displayCommentCount == 'true'){
		   	var metadataContainer = document.createElement("div");
		   	if(jsonData.Gallery.MyGallery.textColor != ""){
			   	metadataContainer.style.color = "#" +jsonData.Gallery.MyGallery.textColor;
		   	}
		   	metadataContainer.style.fontSize = "10px";
		   	metadataContainer.style.fontWeight = "normal";
		   	metadataContainer.style.overflow = "hidden";
		   	
		   	metadataContainer.innerHTML = "";
		   	if(jsonData.Gallery.Gallery.displayTitle == 'true'){
	   			metadataContainer.innerHTML += "<b>" +images[i].title +"</b>";
		   	}
		   	if(jsonData.Gallery.Gallery.showProfileLink){
				if(jsonData.Gallery.MyGallery.linkColor != ''){
					metadataContainer.innerHTML += '<br/>von <a href=\"' +host +'/profil/' +images[i].ownerName +'\" style=\"font-size:10px; color:#' +jsonData.Gallery.MyGallery.linkColor +'\" target=\"_blank\">' +images[i].ownerName +'</a>';
				}else{
					metadataContainer.innerHTML += '<br/>von <a href=\"' +host +'/profil/' +images[i].ownerName +'\" target=\"_blank\" style=\"font-size:10px\">' +images[i].ownerName +'</a>';
				}
			}
		   	// we do not display at collection overview 
		   	if(jsonData.Gallery.Gallery.displayVoting == 'true' && !(jsonData.Gallery.Collection.isCollection == 'true' && jsonData.Gallery.Collection.collectionId == '-1')){
		   		metadataContainer.innerHTML += "<br/>Bewertung:" +(images[i].vote - 0).toFixed(1);
		   	}
		   	if(jsonData.Gallery.Gallery.displayCommentCount == 'true' && !(jsonData.Gallery.Collection.isCollection == 'true' && jsonData.Gallery.Collection.collectionId == '-1')){
		   		metadataContainer.innerHTML += "<br/>" +images[i].commentCount +" Kommentare";
		   	}
		   	
		   	var seperator = document.createElement('div');
			seperator.style.clear = 'both';
		   	imageContainer.appendChild(metadataContainer);
			imageContainer.appendChild(seperator);
	   	}
	   	
	   	if((i % jsonData.Gallery.MyGallery.imagesPerRow) == 0){
	   		var seperator = document.createElement('div');
		    seperator.style.clear = 'both';
		    myGallery.appendChild(seperator);
	   	}

	   	myGallery.appendChild(imageContainer);
	   	
	   	
     }
     
     // paging
     var pageContainer = document.createElement("div");
     var pages = jsonData.Gallery.Pages.Page;
     for(var j=0; j < pages.length; j++){
	     var page = document.createElement("div");
	     page.innerHTML = pages[j].label;
	     page.style.cssFloat = "left";
	     page.style.styleFloat = "left"; // for IE
	     page.style.padding = "5px";
      	 if(cssStyle.styleSheet){// IE
			page.style.cursor = "hand";
		 } else {// w3c
			page.style.cursor = "pointer"; 
		 }
	     
	     page.style.fontSize = "12px";
	     page.style.fontFamily = "Verdana, Arial, sans-serif";
	     if(pages[j].current == true){
	     	page.style.fontWeight = "bold"; 
	     	if(jsonData.Gallery.MyGallery.textColor != ""){
		     	page.style.color = "#" +jsonData.Gallery.MyGallery.textColor;
	     	}
	     }else{
	     	page.style.fontWeight = "normal"; 
	     	if(jsonData.Gallery.MyGallery.linkColor != ""){
		     	page.style.color = "#" +jsonData.Gallery.MyGallery.linkColor;
	     	}
	     }
	     var start = jsonData.Gallery.Pages.Page[j].start;
	     
	     
	     if(jsonData.Gallery.Collection.isCollection == 'true' && jsonData.Gallery.Collection.collectionId != '-1'){
	     	page.setAttribute("onclick", "getCollectionDetail(" +start +',' +jsonData.Gallery.Collection.collectionId +",'" +jsonData.Gallery.Gallery.url +"')" );
	     }else{
		     page.setAttribute("onclick", "getPage(" +start +",'" +jsonData.Gallery.Gallery.url +"')" ); 
	     }
	     pageContainer.appendChild(page);
	 }    
     var splitter = document.createElement('div');
     splitter.style.clear = "both";
     myGallery.appendChild(splitter);
     
     var seperator = document.createElement('div');
     seperator.style.clear = 'both';
     myGallery.appendChild(seperator);
     myGallery.appendChild(document.createElement('br'));
     
     myGallery.appendChild(pageContainer);
     myGallery.appendChild(seperator);
     
     // footer
     var footer = document.createElement('div');
     if(jsonData.Gallery.MyGallery.textColor != ""){
	     footer.style.color = "#" +jsonData.Gallery.MyGallery.textColor;
     }
     footer.style.fontSize = "9px";
     footer.style.fontWeight = "normal";
	 footer.style.fontFamily = "Verdana, Arial, sans-serif";
	 footer.innerHTML = "";
	 if(jsonData.Gallery.MyGallery.sorting != 'bestByPrintable' && jsonData.Gallery.MyGallery.sorting != 'lastupByPrintable' && jsonData.Gallery.MyGallery.sorting != 'bestByPrintableUser' && jsonData.Gallery.MyGallery.sorting != 'lastupByPrintableUser'){
		 if(jsonData.Gallery.MyGallery.linkColor != ""){
			 footer.innerHTML += "<br/>mein Profil auf <a href=\"http://www.digi-images.de/user/profile.html?userId=" +jsonData.Gallery.User.id +"\" target=\"_blank\" style=\"color:#" +jsonData.Gallery.MyGallery.linkColor +"\">digi-images.de</a>";
		 }else{
		 	footer.innerHTML += "<br/>mein Profil auf <a href=\"http://www.digi-images.de/user/profile.html?userId=" +jsonData.Gallery.User.id +"\" target=\"_blank\">digi-images.de</a>";
		 }
	 }else{
	 	isPostershop = true;
	 }
     footer.innerHTML += "<iframe src=\"" +host +"/remote/myGalleryTracking.html?remoteHost=" +jsonData.Gallery.Gallery.remoteHost +"\" style=\"border:0px solid #FFFFFF; \" width=\"5\" height=\"5\" frameborder=\"0\" scrolling=\"no\" border=\"0\"></iframe>";
     myGallery.appendChild(footer);
     
     document.getElementById('myGallery').appendChild(myGallery);
     document.getElementById('myGallery').innerHTML += '<div style=\"clear:both\"></div>'
     
     initLightbox();
     bObj.removeScriptTag(); 
  }
  
  function generateCss() {
  // we need this to customize lightbox layout
  var htmlStyle = "";
  htmlStyle += "canvas {border:0px solid #FFFFFF}"
  htmlStyle += "#lightbox{"
	htmlStyle += "background-color:#eee;"
	htmlStyle += "padding: 10px;"
	htmlStyle += "border-bottom: 2px solid #666;"
	htmlStyle += "border-right: 2px solid #666;"
	htmlStyle += "}"
htmlStyle += "#lightboxDetails{"
	htmlStyle += "font-size: 0.8em;"
	htmlStyle += "padding-top: 0.4em;"
	htmlStyle += "color:#666666;";
	htmlStyle += "font-size:11px;";
	htmlStyle += "font-family:Verdana, Arial, sans-serif;";
	htmlStyle += "}"	
htmlStyle += "#lightboxCaption{ float: left; }"
htmlStyle += "#keyboardMsg{ float: right; }"
htmlStyle += "#closeButton{ top: 5px; right: 5px; }"

htmlStyle += "#lightbox img{ border: none; clear: both;} "
htmlStyle += "#overlay img{ border: none; }"

htmlStyle += "#overlay{ background-image: url(" +host +"/gfx/icons/lightbox/overlay.png); }"

htmlStyle += "* html #overlay{"
	htmlStyle += "background-color: #333;"
	htmlStyle += "back\ground-color: transparent;"
	htmlStyle += "background-image: url(" +host +"/gfx/icons/lightbox/blank.gif);"
	htmlStyle += "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"" +host +"/gfx/icons/lightbox/overlay.png\", sizingMethod=\"scale\");"
	htmlStyle += "}"
	
	return htmlStyle;
	
  }