dojo.require("dojox.image.Lightbox");
 dojo.require("dojox.image.ThumbnailPicker");
 dojo.require("dojo.data.ItemFileReadStore"); 

function initItemStoreGallery(){
	try {
		var itemRequest = { query: {}, count: 20 };
		var itemNameMap = { imageThumbAttr: "thumb", imageLargeAttr: "large", linkAttr: "link" };
		var imageItemStore = new dojo.data.ItemFileReadStore({data: itemDataSource});
		dijit.byId('thumbPickerCustom').setDataStore(imageItemStore, itemRequest, itemNameMap);
		return true;
	} catch (error) {
		return false;
	}
}

function lightboxShow(packet){

	// you can just "show" this image
	lightbox.showCustom({
		group: "thGroup",
		href: packet.largeUrl,
		title: packet.title,
		teasertext: packet.link
	});
	
};

function customizeLightboxLinks() {
	dojo.query("A.anchorEditor[dojoType=\"dojox.image.Lightbox\"]").forEach(function(node, index, arr){
			dojo.attr(node, "dojoType", "GalleryLightbox");
		});
}

function addImagesToDialog(imageObjects) {
	var gotItems = function(items, request){
		dojo.forEach(items, function(imgItem, i){
		  lightbox.addImage({ title:imgItem.title, href:imgItem.large, teasertext:imgItem.link }, "thGroup");
		});
	};
	imageObjects.fetch({onComplete: gotItems});
	
}

dojo.declare("ThumbnailPickerCustomized",
		dojox.image.ThumbnailPicker, {
			// WORKAROUND IE8 Problem - Ticket #9116
			_blankGif:(dojo.config.blankGif || dojo.moduleUrl("dojo", "resources/blank.gif")).toString(),
			// end WORKAROUND
			
			size: 470,
			
			thumbHeight: 95,
			
			thumbWidth: 163,
			
			postCreate: function(){
			// summary: Initializes styles and listeners		
			this.widgetid = this.id;
			this.inherited(arguments);
			this.pageSize = Number(this.pageSize);

			/* hardcodierte size von 80 auf 25 geaendert */
			this._scrollerSize = this.size - (25 * 2);
			
			var sizeProp = this._sizeProperty = this.isHorizontal ? "width" : "height";
		
			// FIXME: do this via css? calculate the correct width for the widget
			dojo.style(this.outerNode, "textAlign","center");
			dojo.style(this.outerNode, sizeProp, this.size+"px");
		
			dojo.style(this.thumbScroller, sizeProp, this._scrollerSize + "px");
		
			//If useHyperlink is true, then listen for a click on a thumbnail, and
			//open the link
			if(this.useHyperlink){
				dojo.subscribe(this.getClickTopicName(), this, function(packet){
					var index = packet.index;
					var url = this.imageStore.getValue(packet.data,this.linkAttr);
					
					//If the data item doesn't contain a URL, do nothing
					if(!url){return;}
					
					if(this.hyperlinkTarget == "new"){
						window.open(url);
					}else{
						window.location = url;
					}
				});
			}
		
			if(this.isClickable){
				dojo.addClass(this.thumbsNode, "thumbClickable");
			}
			this._totalSize = 0;
			this.init();
		},
		
		_loadImage: function(data, index, callback){	
			var url = this.imageStore.getValue(data,this.imageThumbAttr);
			var img = document.createElement("img");
			var imgContainer = document.createElement("div");
			imgContainer.setAttribute("id","img_" + this.widgetid+"_"+index);
			imgContainer.appendChild(img);
			img._index = index;
			img._data = data;
		
			this._thumbs[index] = imgContainer;
			var loadingDiv;
			if(this.useLoadNotifier){
				loadingDiv = document.createElement("div");
				loadingDiv.setAttribute("id","loadingDiv_" + this.widgetid+"_"+index);
		
				//If this widget was previously told that the main image for this
				//thumb has been loaded, make the loading indicator transparent.
				this._setThumbClass(loadingDiv,
					this._loadedImages[index] ? "thumbLoaded":"thumbNotifier");
		
				imgContainer.appendChild(loadingDiv);
			}
			var size = dojo.marginBox(this.thumbsNode);
			var defaultSize;
			var sizeParam;
			if(this.isHorizontal){
				defaultSize = this.thumbWidth;
				sizeParam = 'w';
			} else{
				defaultSize = this.thumbHeight;
				sizeParam = 'h';
			}
			size = size[sizeParam];
			var sl = this.thumbScroller.scrollLeft, st = this.thumbScroller.scrollTop;
			dojo.style(this.thumbsNode, this._sizeProperty, (size + defaultSize + 20) + "px");
			//Remember the scroll values, as changing the size can alter them
			this.thumbScroller.scrollLeft = sl;
			this.thumbScroller.scrollTop = st;
			this.thumbsNode.appendChild(imgContainer);
		
			dojo.connect(img, "onload", this, function(){
				var realSize = dojo.marginBox(img)[sizeParam];
				this._totalSize += (Number(realSize) + 4);
				dojo.style(this.thumbsNode, this._sizeProperty, this._totalSize + "px");
		
				if(this.useLoadNotifier){
					dojo.style(loadingDiv, "width", (img.width - 4) + "px"); 
				}
				dojo.style(imgContainer, "width", img.width + "px");
				callback();
				return false;
			});
		
			dojo.connect(img, "onclick", this, function(evt){
				dojo.publish(this.getClickTopicName(),	[{
					index: evt.target._index,
					data: evt.target._data,
					url: img.getAttribute("src"), 
					largeUrl: this.imageStore.getValue(data,this.imageLargeAttr),
					title: this.imageStore.getValue(data,this.titleAttr),
					link: this.imageStore.getValue(data,this.linkAttr)
				}]);
				return false;
			});
			dojo.addClass(img, "imageGalleryThumb");
			/* customized, set magnifiying glass */
			//img.setAttribute("src", url);
			img.setAttribute("src", "/Projects/c2c/cda/images/channel1171/lupeFullSize.png");
			dojo.style(img, "background", "url("+url+") no-repeat scroll center center "); 
			/* end customized, set magnifiying glass */

			var title = this.imageStore.getValue(data, this.titleAttr);
			if(title){ img.setAttribute("title",title); }
			this._updateNavControls();
		
		}
			
	});


dojo.declare("GalleryLightbox",
		dojox.image.Lightbox, {
	
			startup: function(){
			this.inherited(arguments);
			// setup an attachment to the masterDialog (or create the masterDialog)
			var tmp = dijit.byId('dojoxGalleryLightboxDialog');
			if(tmp){
				this._attachedDialog = tmp;
			}else{
				// this is the first instance to start, so we make the masterDialog
				this._attachedDialog = new GalleryLightboxDialog({ id: "dojoxGalleryLightboxDialog" });
				this._attachedDialog.startup();
			}
			if(!this.store){
				// FIXME: full store support lacking, have to manually call this._attachedDialog.addImage(imgage,group) as it stands
				this._addSelf();
				this.connect(this.domNode, "onclick", "_handleClick");
			}
		
		}	
	});



dojo.declare("GalleryLightboxDialog",
	dojox.image.LightboxDialog, {
	teasertext:"",
	templateString:"<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\r\n<div class=\"dojoxLightboxText\" dojoAttachPoint=\"titleTextNode\">\r\n<span dojoAttachPoint=\"textNode\" class=\"dojoxLightboxTitle\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\" style=\"display:none\"></span>\r\n<span class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeNode\"></span>\r\n</div>\r\n<div style=\"position:relative\">\r\n<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\" dojoAttachEvent=\"onclick: _onImageClick\">\r\n<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\r\n<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextNode\"></div>\r\n<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevNode\"></div>\r\n<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\"><span dojoAttachPoint=\"teasertextNode\">${teasertext}</span></div>\r\n</div>\r\n</div>\r\n</div>\r\n",

	showCustom: function(/* Object */groupData){
		var _t = this; // size
		if(groupData.teasertext == "null") {
			_t.teasertextNode.innerHTML = "";
		} else {
			_t.teasertextNode.innerHTML = groupData.teasertext;
		}
		this.show(groupData);
	},

	resizeTo: function(/* Object */size, forceTitle){
		// summary: Resize our dialog container, and fire _showImage
		
		var adjustSize = dojo.boxModel == "border-box" ? 
			dojo._getBorderExtents(this.domNode).w : 0,
			titleSize = forceTitle || { h:30 }
		;
		
		this._lastTitleSize = titleSize;
		
		if(this.adjust && 
			(size.h + titleSize.h + adjustSize + 80 > this._vp.h ||
			 size.w + adjustSize + 60 > this._vp.w
			)
		){
			this._lastSize = size;
			size = this._scaleToFit(size);
		}
		this._currentSize = size;
		
		var _sizeAnim = dojox.fx.sizeTo({ 
			node: this.containerNode,
			duration: size.duration||this.duration,
			width: size.w + adjustSize,
			height: size.h + titleSize.h + adjustSize + 30
		});
		this.connect(_sizeAnim, "onEnd", "_showImage");
		_sizeAnim.play(15);
	},
	
	_prepNodes: function(){
		// summary: A localized hook to accompany _loadImage
		this._imageReady = false; 
		this.showCustom({
			href: this.inGroup[this._index].href,
			title: this.inGroup[this._index].title,
			teasertext: this.inGroup[this._index].teasertext
		});
	}
});




var lightbox;
dojo.require("dojo.parser");
  dojo.addOnLoad(
   function() {
	customizeLightboxLinks();
    dojo.parser.parse(dojo.byId("contentContainer"));

 	if (initItemStoreGallery()) {
		lightbox = new GalleryLightboxDialog().startup();
 		var thumbPicker = dijit.byId('thumbPickerCustom');
 		addImagesToDialog(thumbPicker.imageStore);
 		dojo.subscribe(thumbPicker.getClickTopicName(), lightboxShow);
 	} else {
 		// error on init, delete DOM-Node
 		dojo.destroy("thumbPickerCustom"); 
 	}
   });