var eDaabGallery = new Class({
    options: {
        parentEl: $('galleryWrapper'),
        galleryId: null,
		onLoad: function() {
			this.onLoad();
		},
		onChange: function() {
			this.onChange();
		}
	},
	initialize: function(options) {
        this.setOptions(options);
        this.galleryId 	= this.options.galleryId;
        this.parentEl 	= this.options.parentEl;
       // this.parentEl.setStyle('display', 'none');
        this.jsonObj = this.options.json;
        this.hideSendToFriend = this.options.hideSendToFriend;
        this.scrollThis = new Fx.Scroll(window, {
	      	wait: false,
	      	duration: 750,
	      	offset: {'x': 0, 'y': -20},
	      	transition: Fx.Transitions.Quad.easeIn
	    });
        if(this.jsonObj.infos.type=='books')
        	this.showAll = 1;
        else
        	this.showAll = 0;
        this.currentPic = 1;
        this.createTemplate();
        this.pictures = new Array();
        this.onLoad();
    },
    startSlideshow: function() {
    	var picturesArray = new Array();
		this.pictures.each(function(pic, index)
		{
			picturesArray[index] = {'title':pic.title,'image':pic.slideshow,'description':pic.description};
		});
		this.slideshow.setPictures(picturesArray);
		this.slideshow.openSlideshow();
    },
    createTemplate : function()
    {
		var self = this;
    	var galleryDetail =  new eDaabBox();
    	var galleryOverview =  new eDaabBox();

		var linkList = new Element('ul');
			linkList.addClass('links');

		if (this.options.hideSendToFriend != true)
		{
		var listPoint3 = new Element('li');
			listPoint3.addClass('arrowLink')
					  .setStyle('margin-left','8px');
			linkList.adopt(listPoint3);
				var link3 = new Element('a');
					link3.setProperty('href','?sendToFriend=1')
						.setStyle('padding-left','4px');
					link3.setText('send to friend');
				listPoint3.adopt(link3);
		}

		var listPointSS = new Element('li');
		linkList.adopt(listPointSS);
		listPointSS.setStyle("margin-top","2px");
			var linkSS = new Element('span');
				linkSS.setProperty("id","slideshow");
		listPointSS.adopt(linkSS);
    	galleryDetail.addLegend(linkList);

		var galleryLeft = new eDaabInnerbox({size: '4'});

		var headline = new Element('h2');
			headline.setProperty('style', 'margin-bottom:5px;');
			var	headlineTitle =  new Element('span');
				headlineTitle.addClass('title');
				headlineTitle.setProperty('vnname', 'galleryTitle');
			var	headlineSubtitle =  new Element('span');
				headlineSubtitle.addClass('subtitle');
				headlineSubtitle.setProperty('vnname', 'artistName');
			headline.adopt(headlineTitle);
			headline.adopt(headlineSubtitle);
    		galleryLeft.add(headline);

		var detailPic = new Element('div');
			detailPic.setProperty('id','detailPic');
			galleryLeft.add(detailPic);
		var detailInfo = new eDaabInnerbox({size: '2'});
			detailInfo.setId('detailRight');
			//galleryLeft.add(detailInfo);

		var clear = new Element('div');
			galleryLeft.add(clear);
			clear.setStyle('clear','both');
			clear.setStyle('margin-bottom','10px');

		var overviewList = new Element('div');
			galleryLeft.add(overviewList);
			overviewList.setProperty('id','overviewList');
		/*var overviewInfo = new eDaabInnerbox({size: '2'});
			overviewInfo.setId('overviewInfo');
			overviewInfo.setStyles({'float':'right'});*/

		var trenner = new eDaabInnerbox({size:'6'});
			trenner.add(new Element('p').addClass('clear').setStyle('background', 'red').setText('testet'));
		galleryDetail.addToContent(galleryLeft);
			galleryDetail.addToContent(detailInfo);
		/*galleryOverview.addToContent(overviewList);
		galleryOverview.addToContent(overviewInfo);*/

		var galleryDetailBox 	= galleryDetail.returnBox();
		//var galleryOverviewBox 	= galleryOverview.returnBox();
		this.box = galleryDetailBox;
		//galleryOverviewBox.injectAfter(this.parentEl);
		galleryDetailBox.injectAfter(this.parentEl);

		var detailNavi= new Element('div', {'id':'detailNavi',	'styles':
			{	'display':'none',
				'width':'258px',
				'height':'150px',
				'float':'left',
				'marginBottom':'8px',
				'paddingTop':'0px'
			}
		});

		var detailNaviHead = new Element('h3', {'id': 'detailNaviHead'});
		var detailPicBottom = new Element('p', {'id': 'detailPicBottom'});
		var detailNaviPrev = new Element('div', {'id':'detailNaviPrev',
			'styles':{'clear':'both', 'border':'none','float':'left','height':'119px','width':'119px','marginLeft':'8px','display':'none'}});
		var detailNaviNext = new Element('div', {'id':'detailNaviNext',
			'styles':{'float':'right', 'border':'none','height':'119px','width':'119px','marginRight':'8px','display':'none'}});

		$('detailRight').adopt(detailNaviHead);
		$('detailRight').adopt(detailNavi);
			detailNavi.adopt(detailNaviPrev);
			detailNavi.adopt(detailNaviNext);
		$('detailRight').adopt(new Element('div', {'id':'detailInfo'}));

		if(this.showAll==1)
		{
			var self = this;
			setTimeout(function(){
				var slideShow = new SWFObject("/js/slideshow.swf?xmlURL="+HOST+"/galleryXML.php%3Fid="+self.jsonObj.infos.id+"%26type="+self.jsonObj.infos.type, "slideshow", "114", "16", "8", "#ffffff");
				slideShow.addParam("align", "left");
				slideShow.addParam("allowScriptAccess","always");
				slideShow.addParam("allowFullScreen","true");
				slideShow.addParam("scale","noscale");
				slideShow.write("slideshow");
			},1000);
		}
	},
	createSinglePicture: function(obj)
	{
		var self = this;
			$('detailPic').empty();
			if(self.firstPictureLoaded == null)
			{
				self.firstPictureLoaded = true;
				var	img = new Asset.image(obj.detail);
			}
			else
			{
				var	img = new Asset.image(obj.detail, {
					onload: function()
					{
					//console.log(self.parentEl);
						self.scrollThis.options.offset = {'x': 0, 'y': -10};
						self.scrollThis.toElement(self.box);
						self.scrollThis.options.offset = {'x': 0, 'y': -20};
					}
				});
			}
			$('detailPic').adopt(img.setStyle('border','1px solid #CECECE'));
			if (obj.title != '')
			{
				$('detailPic').adopt(new Element('h2', {'styles':{'textAlign':'left'}}).setText(obj.title));
				//$('detailNaviHead').setStyle('display', 'block').setText('&nbsp');
			}
			else
			{
				$('detailNaviHead').setStyle('display', 'none');
			}
			if (obj.description != '')
			{
				$('detailPic').adopt(new Element('p').setText(obj.description));
			}

			$('detailInfo').empty();
			if(this.showAll==1)
				this.setInfos(self.jsonObj.infos, $('detailInfo'));
			this.currentPic = obj.counterId;
	},
	updateShortNavi: function()
	{
		var self = this;
		var	counter = 1;
		var picCount = this.pictures.length;
		if (picCount <= 1)
			$('detailNavi').remove();
		else
		{
			var elementBefore 	= -1;
			var elementAfter 	= 1;
			if (this.currentPic >1)
			{
				elementBefore 	= (this.currentPic - 2);
				elementAfter 	= (this.currentPic);
			}
			var detailNavi = $('detailNavi');
			detailNavi.setStyle('display', 'block')

			$('detailNaviPrev').empty();
			$('detailNaviNext').empty();

			this.pictures.each(function(pic, index)
			{
				if (elementBefore >= 0 && index == elementBefore)
				{
					$('detailNaviPrev').adopt(self.createSinglePicOverview(pic));
					$('detailNaviPrev').setStyle('display', 'block');
					var prevButton = new Element('a');
						var img = new Element('img').setProperty('src','/img/layout/button_prev.gif');
						prevButton.adopt(img);
						prevButton.injectInside($('detailNaviPrev'));
						prevButton.setStyles({'float':'left', 'margin-top':'4px'});
						prevButton.cloneEvents(self.createSinglePicOverview(pic).getElement('a'));
				}
				else if (elementAfter < picCount && index == elementAfter)
				{
					$('detailNaviNext').adopt(self.createSinglePicOverview(pic));
					$('detailNaviNext').setStyle('display', 'block');
					var nextButton = new Element('a').injectInside($('detailNaviNext'));
						var img = new Element('img').setProperty('src','/img/layout/button_next.gif');
						nextButton.adopt(img);
						nextButton.setStyles({'float':'right', 'margin-top':'4px'});
						nextButton.cloneEvents(self.createSinglePicOverview(pic).getElement('a'));
				}
			});
		}
	},
	createSinglePicOverview:function(pic)
	{
		var self = this;
		var picDiv = new Element('div');
			picDiv.addClass('img1_6');
		var link = new Element('a');
			link.setStyle('cursor', 'pointer');
			link.addEvent('click', function(){
				self.createSinglePicture(pic);
				if(self.showAll==1)
					self.updateShortNavi();
			});
		var img = new Element('img');
			img.setProperty('src', pic.thumbnail);
			img.addClass('img');
			img.setStyle('width', '100%');
			img.setStyle('height', '100%');
			img.setProperty('border', 'none');
		picDiv.adopt(link);
		link.adopt(img);
		return picDiv;
	},
	createOverview:function(pictures)
	{
		var self = this;
		var insertInto = $('overviewList');
		var counter = 1;
		var row = 1;

    	this.createSinglePicture(pictures.list[0]);

		pictures.list.each(function (pic)
		{
			self.pictures.include(pic);
			pic.counterId = (counter + (4*row) -4);
			var picDiv = self.createSinglePicOverview(pic)
			if (counter == 4)
			{
				counter = 0;
				row = row+1;
			}
			else
				picDiv.setStyle('marginRight', '13px');
			picDiv.setStyle('marginBottom', '14px');

			insertInto.adopt(picDiv);

			counter++;
		});
		if(this.showAll==1)
			this.updateShortNavi();
	},
	setInfos: function (jsonObj, insertInto)
	{
		var self = this;

		var infoHeader = new Element('div', {'class': 'option'});
		var infoHeaderText = new Element('div', {'class':'text'}).setText('information');
		var infoBox = new Element('div');

		var infoBoxDesc = new Element ('div', {'class': 'infoList'}).injectInside(infoBox);
		if (jsonObj.original != null && jsonObj.useOwnDescription != null && jsonObj.description != '')
		{
			var p = new Element('div');
			p.setHTML(jsonObj.description);
			p.setStyle('text-align','justify')
			 .setStyle('margin-bottom','10px');
			p.setStyle('width','240px');
			infoBoxDesc.adopt(p);
		}
		else if (jsonObj.original != null && jsonObj.useOwnDescription == null && jsonObj.original.description != '')
		{
			var p = new Element('div');
			p.setHTML(jsonObj.original.description);
			p.setStyle('text-align','justify')
			 .setStyle('margin-bottom','10px');
			p.setStyle('width','240px');
			infoBoxDesc.adopt(p);
		}
		else if (jsonObj.original == null && jsonObj.description != '')
		{
			var p = new Element('div');
			p.setHTML(jsonObj.description)
			p.setStyle('text-align','justify')
			 .setStyle('margin-bottom','10px');;
			p.setStyle('width','240px');
			infoBoxDesc.adopt(p);
		}

		if(jsonObj.publicated!=null && jsonObj.publicated!="")
		{
			var infoBoxPublicated = new Element ('div', {'class': 'infoList'}).injectInside(infoBox);
			var div = new Element('div').setText(jsonObj.publicated).injectInside(infoBoxPublicated);
				div.setStyle('float','left');
				div.setStyle('text-align','justify');

			//infoBoxPublicated.adopt(new Element('div', {'class': 'value'}).setText());
		}

		if(jsonObj.date!=null && jsonObj.date!="")
		{
			var infoBoxDate = new Element ('div', {'class': 'infoList'}).injectInside(infoBox);
			var div = new Element('div').setHTML(jsonObj.date).injectInside(infoBoxDate);
				div.setStyle('float','left');
				div.setStyle('text-align','justify');


		}

		infoHeader.adopt(infoHeaderText);
		insertInto.adopt(infoHeader);
		insertInto.adopt(infoBox);


		if(jsonObj.format!=null || jsonObj.informations!=null || jsonObj.isbn!=null || jsonObj.price!=null)
		{
			var infoFormatHeader = new Element('div', {'class': 'option'});
			var infoFormatHeaderText = new Element('div', {'class':'text'}).setText('format');
			var infoFormatBox = new Element('div');

			if(jsonObj.format!=null)
			{
				var infoBoxFormat = new Element ('div', {'class': 'infoList'}).injectInside(infoFormatBox);
				var div = new Element('div').setText(jsonObj.format).injectInside(infoBoxFormat);
				div.setStyle('float','left');
				div.setStyle('text-align','justify');

			}

			if(jsonObj.informations!=null)
			{
				var infoBoxPages = new Element ('div', {'class': 'infoList'}).injectInside(infoFormatBox);
				var div = new Element('div');
				div.setHTML(jsonObj.informations+'');
				div.setStyle('float','left');
				div.setStyle('text-align','justify');
				infoBoxPages.appendChild(div);
			}

			if(jsonObj.isbn!=null)
			{
				var infoBoxIsbn = new Element ('div', {'class': 'infoList'}).injectInside(infoFormatBox);

				/*infoBoxIsbn.adopt(new Element('div', {'class': 'attr'}).setText('ISBN'));
				infoBoxIsbn.adopt(new Element('div', {'class': 'value'}).setText(jsonObj.isbn));*/

				var div = new Element('div');
				div.setText('ISBN '+jsonObj.isbn);
				div.setStyle('float','left')
				   .setStyle('margin-bottom','10px');;
				div.setStyle('text-align','justify');

				infoBoxIsbn.appendChild(div);
			}

			if(jsonObj.price!=null)
			{
				var infoBoxPrice = new Element ('div', {'class': 'infoList'}).injectInside(infoFormatBox);

				/*infoBoxIsbn.adopt(new Element('div', {'class': 'attr'}).setText('ISBN'));
				infoBoxIsbn.adopt(new Element('div', {'class': 'value'}).setText(jsonObj.isbn));*/

				var div = new Element('div');
				jsonObj.price.each(function(data)
				{
					div.adopt(new Element('span').setText(data.text));
					div.adopt(new Element('br'));
				});

				//div.setText('price '+jsonObj.price.replace(/<br>/g,"\n"));
				div.setStyle('float','left');
				div.setStyle('text-align','justify');
				infoBoxPrice.appendChild(div);
			}

			infoFormatHeader.adopt(infoFormatHeaderText);
			insertInto.adopt(infoFormatHeader);
			insertInto.adopt(infoFormatBox);
		}

		if(jsonObj.downloads!=null && jsonObj.downloads!="")
		{
			var infoHeaderDownloads = new Element('div', {'class': 'option'}).setStyle('margin-bottom','0px');
			var infoHeaderTextDownloads = new Element('div', {'class':'text'}).setText('downloads');
			var infoBoxDownloads = new Element('div');

			var list = new Element('dl',{'class':'linkbox'}).setStyle('margin-bottom','0px');
			jsonObj.downloads.each(function(data){
				var li = new Element('dd',{'class':'link'});

				var link = new Element('a').setProperty('href',data.link);
				link.setText(data.title);

				li.adopt(link);
				list.adopt(li);
			});

			var infoBoxMore = new Element ('div', {'class': 'infoList'}).injectInside(infoBoxDownloads);
				infoBoxMore.adopt(list);

			infoHeaderDownloads.adopt(infoHeaderTextDownloads);
			insertInto.adopt(infoHeaderDownloads);
			insertInto.adopt(infoBoxDownloads);
		}

		if(jsonObj.related!=null && jsonObj.related!="")
		{
			var infoHeaderRelated = new Element('div', {'class': 'option'}).setStyle('margin-bottom','0px');
			var infoHeaderTextRelated = new Element('div', {'class':'text'}).setText('related links');
			var infoBoxRelated = new Element('div');

			var list = new Element('dl',{'class':'linkbox'});
			jsonObj.related.each(function(data){
				var li = new Element('dd',{'class':'link'});

				var link = new Element('a').setProperty('href',data.link);
				link.setText(data.title);

				li.adopt(link);
				list.adopt(li);
			});

			var infoBoxMore2 = new Element ('div', {'class': 'infoList'}).injectInside(infoBoxRelated);
				infoBoxMore2.adopt(list);

			infoHeaderRelated.adopt(infoHeaderTextRelated);
			insertInto.adopt(infoHeaderRelated);
			insertInto.adopt(infoBoxRelated);
		}

	},
	commentsBox: function(jsonObj)
	{
		var self = this;
		var commentsHeader = new Element('div', {'class': 'option'});
		var commentsHeaderCount = new Element('div', {'class':'title'});
		var commentsHeaderText = new Element('div', {'class':'text'}).setText('comments');
		var commentsBox = new Element('div');
			commentsBox.setStyle('display', 'none');

		commentsHeader.adopt(commentsHeaderCount);
		commentsHeader.adopt(commentsHeaderText);

		var commentsToggler = gui.createButtonFixedSize('a', 'show', 'normal', '737982');
			commentsToggler.setStyles({'float': 'right','marginRight':'8px' });
			commentsToggler.addEvent('click', function(){self.toggleBox(this, commentsBox)});
		commentsHeader.adopt(commentsToggler);

		var commentsCounterEl = new Element('span');
		var comments = new eDaabComments({
			'objectId':jsonObj.id,
			'perPage':3,
			'objectType': jsonObj.type,
			'page':'1',
			'callbackCounter': function(counter){
				commentsCounterEl.setText(counter);
				if (counter <= 0)
				{
					if (userObj.noUser == 1)
						commentsToggler.remove();
					else
						commentsToggler.fireEvent('click');
				}
			}});
		commentsBox.adopt(comments.returnComments());
		commentsBox.adopt(comments.writeCommentForm());
		commentsHeaderCount.adopt(commentsCounterEl);


		var returnComments = new Element('div');
		returnComments.adopt(commentsHeader);


		returnComments.adopt(commentsBox);

		return returnComments;

	},
	toggleBox: function(toggler, box)
	{
		if (box.getStyle('display') == 'none')
		{
			gui.updateButton(toggler, 'hide');
			box.fadeIn();
		}
		else
		{
			gui.updateButton(toggler, 'show');
			box.fadeOut();
		}
	},
    getGalleryInfos : function()
    {
		var self = this;
    	this.showLoader($('overviewList'));
		/*self.box.getElements('[vnname=galleryTitle]').each(
			function(el)
			{
				el.setText(self.jsonObj.infos.title);
			}
		);*/
		if(this.showAll==1)
			this.setInfos(self.jsonObj.infos, $('detailInfo'));

		self.createOverview(self.jsonObj.pics);
		self.hideLoader($('overviewList'));
	},
	showLoader:function(el)
	{
		var loader = new Element('div', {'id': 'loaderDiv'});
			loader.adopt(new Element('img', {'src':'/img/ajax-loader.gif'}));
			loader.setStyles({'height':'200px', 'textAlign': 'center', 'paddingTop':'20px'});
		el.setStyle('display', 'none');
		loader.injectBefore(el);
	},
	hideLoader:function(el)
	{
		if ($('loaderDiv') != null)
			$('loaderDiv').remove();
		el.setStyle('display', 'block');
	},
    onChange: function()
    {
    },
    onLoad: function()
    {
    	this.getGalleryInfos();

    },
    readystatechange: function(){
		if (this.readyState == 'complete' || this.readyState == 'loaded') this.fireEvent('load');
	},
    doNothing: function()
    {}
});
eDaabGallery.implement(new Options);
eDaabGallery.implement(new Events);