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 = true;
var initialCall = true;
     
function JSONscriptRequestMiniWidget(fullUrl) {
    this.fullUrl = fullUrl; 
    this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
    this.headLoc = document.getElementsByTagName("head").item(0);
    this.scriptId = 'JscriptId' + JSONscriptRequestMiniWidget.scriptCounter++;
}

JSONscriptRequestMiniWidget.scriptCounter = 1;

JSONscriptRequestMiniWidget.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);
}

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

JSONscriptRequestMiniWidget.prototype.addScriptTag = function () {
    this.headLoc.appendChild(this.scriptObj);
    // 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()));
	}
}

function getMiniWidget(jsonData, index) {
	//THE DOM
	//container
	//	bd
	//		prev			
	//		imagediv
	//			imageLink
	//				image
	//			meta		
	//		next

	var container = document.getElementById('miniPostershop');
	if(jsonData.Config.mode == 'slideshow'){
		container.style.width = '100px';
	}else if(jsonData.Config.mode == 'manual'){
		container.style.width = '130px';
	}
	if(document.getElementById('bd') != null){
		container.removeChild(document.getElementById('bd')); //reset
	}
	var bd = document.createElement('div');
	bd.id = 'bd';
	if(jsonData.Config.mode == 'slideshow'){
		bd.style.opacity = 0;
		bd.style.filter = 'alpha(opacity=0)';
		if(document.all){ // opacity in IE applies only with given with and height
			bd.style.width='100%';
			bd.style.height='100%';
		}
	}else{
		if(document.all){
			bd.style.width='100%';
			bd.style.width='100%';
		}
	}
	
	if(jsonData.Config.mode == 'manual'){
		createNavigation('prev', bd, jsonData, index);
	}
	
	var images = jsonData.Images;
	
	// imageDiv
	var imageDiv = document.createElement('div');
	imageDiv.style.width = '100px';
	if(jsonData.Config.mode == 'manual'){
		imageDiv.style.opacity = 0;
		imageDiv.style.filter = 'alpha(opacity=0)';
		imageDiv.style.cssFloat = "left";
	    imageDiv.style.styleFloat = "left"; // for IE
	}
	
	imageDiv.id = 'imageDiv';
	imageDiv.style.overflow = "hidden";
	
	// image & image link
	var imageLink = document.createElement('a');
	imageLink.id = 'image'
	imageLink.style.border = 'none';
	imageLink.href = host +"/include/image.jpg?imageId=" +images[index].id +"&size=500";
	imageLink.rel = "lightbox";
	
	var image = document.createElement('img');
	image.border = "0";
    image.style.border = "0px solid #000000";
	image.src = host +"/include/image.jpg?size=100&cropped=true&imageId=" +images[index].id;
	image.id = 'image_' + images[index].id;
	if(jsonData.Config.effect == 'reflection'){
     	if (document.all && !window.opera) {
	     	YAHOO.util.Event.onContentReady("image_" +images[index].id, function() {Reflection.add(this,{opacity: 1/3})});
     	}else{
     		image.setAttribute('onload','Reflection.add(this,{opacity: 1/3})');
     	}
    }
	
	imageLink.appendChild(image);
	imageDiv.appendChild(imageLink);
	
	var separator = document.createElement('div');
	separator.style.clear = 'both';
	imageDiv.appendChild(separator);
	
	// meta
	var meta = document.createElement('div');
	meta.style.fontSize = '10px';
	meta.style.fontFamily = "Verdana, Arial, sans-serif";
	meta.style.textAlign = 'center';
	if(jsonData.Config.textColor != ''){
		meta.style.color = '#' +jsonData.Config.textColor;
	}
	
	if(jsonData.Config.displayTitle && images[index].title != ''){
		meta.innerHTML += '<br/><b>' +images[index].title +'</b>'; 
	}
	
	if(jsonData.Config.showProfileLink){
		if(jsonData.Config.linkColor != ''){
			meta.innerHTML += '<br/>von <a href=\"' +host +'/profil/' +images[index].ownerName +'\" style=\"color:#' +jsonData.Config.linkColor +'\" target=\"_blank\">' +images[index].ownerName +'</a>';
		}else{
			meta.innerHTML += '<br/>von <a href=\"' +host +'/profil/' +images[index].ownerName +'\" target=\"_blank\">' +images[index].ownerName +'</a>';
		}
	}

	if(jsonData.Config.displayCommentCount){
		meta.innerHTML += '<br/>' +images[index].commentCount +' Kommentare'; 
	}
	
	if(jsonData.Config.displayVoting){
		meta.innerHTML += '<br/>' +images[index].voting +' (' +images[index].voteCount +' Stimmen)'; 
	}
	
	if(jsonData.Config.showAllLink != ''){
		var showAllLink = document.createElement('a');
		showAllLink.href = jsonData.Config.showAllLink;
		showAllLink.innerHTML = 'Alle anzeigen';
		showAllLink.style.fontSize = '11px';
		showAllLink.style.fontFamily = "Verdana, Arial, sans-serif";
		if(jsonData.Config.linkColor != ''){
			showAllLink.style.color = '#' +jsonData.Config.linkColor;
		}
		meta.appendChild(document.createElement('br'));
		meta.appendChild(showAllLink);
	}
	
	bd.appendChild(imageDiv)

	if(jsonData.Config.mode == 'manual'){
		createNavigation('next', bd, jsonData, index);
	}
	
	
	imageDiv.appendChild(separator);
	imageDiv.appendChild(meta);
	
	container.appendChild(bd);
	
	if(jsonData.Config.mode == 'slideshow'){
		slideshow(images, index, jsonData);
	}else if(jsonData.Config.mode == 'manual'){
		manual(index, jsonData);
	}
	
	if((initialCall && jsonData.Config.mode == 'slideshow') || jsonData.Config.mode == 'manual'){ // we don't want to track each slide, just the first
		createTracking(jsonData.Config.url);
		initialCall = false;
	}
	initLightbox();
}

function slideshow(images, index, jsonData){
	var getNext = function(){
		if(index < (images.length -1)){
			index = (index -0) +1;
		}else{
			index = 0;
		}
		
		if(document.getElementById('overlay').style.display == 'none'){
			getMiniWidget(jsonData, index);
		}else{
			YAHOO.util.Event.addListener("lightboxImage", "click", function(){
				hideLightbox();
				getMiniWidget(jsonData, index);
			});
			YAHOO.util.Event.addListener("closeButton", "click", function(){
				hideLightbox();
				getMiniWidget(jsonData, index);
			});
			
		}
	}
	var fadeOut = function(){
		var aniObjOut = new YAHOO.util.Anim('bd' , { opacity: {from: 1, to: 0 } },  jsonData.Config.transitionTime / 1000 ,  YAHOO.util.Easing.easeOut);
		aniObjOut.onComplete.subscribe(getNext);
		aniObjOut.animate();
	}
	var hold = function(){
		var aniObjHold = new YAHOO.util.Anim('bd' , {  },  jsonData.Config.holdTime / 1000);
		aniObjHold.onComplete.subscribe(fadeOut);
		aniObjHold.animate();
	}
	var aniObjIn = new YAHOO.util.Anim('bd' , { opacity: {from: 0, to: 1 } }, jsonData.Config.transitionTime / 1000,  YAHOO.util.Easing.easeIn);
	aniObjIn.onComplete.subscribe(hold);
	YAHOO.util.Event.onAvailable("image_" +images[index].id, function() {aniObjIn.animate()});
	
	YAHOO.util.Event.addListener("image_" +images[index].id, "click", function(){aniObjIn.stop()});
	
}

function manual(index, jsonData){
	var aniObjIn = new YAHOO.util.Anim('imageDiv' , { opacity: {from: 0, to: 1 } }, jsonData.Config.transitionTime / 1000,  YAHOO.util.Easing.easeIn);
	YAHOO.util.Event.onAvailable("image_" +jsonData.Images[index].id, function() {aniObjIn.animate()});
}

function createNavigation(direction, bd, jsonData, index){
		var images = jsonData.Images;
		var navDiv = document.createElement('div');
		navDiv.style.width = '15px';
		navDiv.style.height = '100px';
		navDiv.style.cursor = 'pointer';
		navDiv.style.fontSize = '13px';
		navDiv.style.cssFloat = "left";
	    navDiv.style.styleFloat = "left"; // for IE
		if(jsonData.Config.navBackground != ''){
			navDiv.style.backgroundColor = '#' +jsonData.Config.navBackground;
			navDiv.onmouseout = function(){ navDiv.style.backgroundColor = '#' +jsonData.Config.navBackground};
		}
		if(jsonData.Config.navBackgroundHover != ''){
			navDiv.onmouseover = function(){ navDiv.style.backgroundColor = '#' +jsonData.Config.navBackgroundHover};
		}
		if(direction == 'prev'){
			if(jsonData.Config.linkColor != ''){
				navDiv.innerHTML = '<br/><br/><center><font color=\"#' +jsonData.Config.linkColor +'\">&laquo;</font></center>';
			}else{
				navDiv.innerHTML = '<br/><br/><center>&laquo;</center>';
			}
			
			if(index == 0){
				index = (jsonData.Images.length -1);
			}else{
				index = index -1;
			}
			navDiv.onclick = function() {getMiniWidget(jsonData, index);};		
		}else if(direction == 'next'){
			if(jsonData.Config.linkColor != ''){
				navDiv.innerHTML = '<br/><br/><center><font color=\"#' +jsonData.Config.linkColor +'\">&raquo;</font></center>';
			}else{
				navDiv.innerHTML = '<br/><br/><center>&raquo;</center>';
			}
			
			if(index == (images.length -1)){
				index = 0;
			}else{
				index = (index - 0) +1;
			}
			navDiv.onclick = function() {getMiniWidget(jsonData, index);};
		}	
		bd.appendChild(navDiv);
}

function createTracking(remoteHost){
	var bd = document.getElementById('bd');
	var footer = document.createElement('div');
	footer.innerHTML += "<iframe src=\"" +host +"/remote/myGalleryTracking.html?remoteHost=" +remoteHost +"\" style=\"border:0px solid #FFFFFF; \" width=\"1\" height=\"1\" frameborder=\"0\" scrolling=\"no\" border=\"0\"></iframe>";
	bd.appendChild(footer);
}

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;
	
  }