var eDaabGallery = new Class({
    element: $('galleryContainer'),
	initialize: function(element,page) {
		this.current 	= 1 | page;
        this.element 	= element || this.element;
        this.gatherElements();
    },
    gatherElements : function()
    {
		var self = this;
		this.galleryId = this.element.getProperty("galleryId");
		this.sendToFriendContainer = new Element("div");
		this.sendToFriendContainer.injectBefore(this.element.getParent());

		this.pictureContainer = this.element.getElements(".pictureContainer")[0];
		this.thumbnailContainer = this.element.getElements(".thumbnailContainer")[0];
		this.galleryDescription = this.element.getElements(".galleryDescription")[0];
		this.galleryRanking = this.element.getElements(".galleryRanking")[0];
		this.galleryComments = this.element.getElements(".galleryComments")[0];
		//this.pictureRanking = this.element.getElements(".pictureRanking")[0];
		//this.pictureComments = this.element.getElements(".pictureComments")[0];
		this.previousPicture = this.element.getElements(".previousPicture")[0];
		this.nextPicture = this.element.getElements(".nextPicture")[0];
		this.previousArrow = this.element.getElements(".previousArrow")[0];
		this.nextArrow = this.element.getElements(".nextArrow")[0];
		this.pictureDescription = this.element.getElements(".pictureDescription")[0];
		this.pictureViews = this.element.getElements(".pictureViews")[0];
		this.galleryViews = this.element.getElements(".galleryViews")[0];
		this.pictureInformation = this.element.getElements(".pictureInformation")[0];
		this.galleryInformation = this.element.getElements(".galleryInformation")[0];
		this.galleryCommentsBox = this.element.getElements(".galleryCommentsBox")[0];
		this.pictureCommentsBox = this.element.getElements(".pictureCommentsBox")[0];

		this.picInfoToggle = gui.createButtonText('span', 'hide');
		this.picInfoToggle.setStyle("float","right").setStyle("margin-right","4px");
		//this.picInfoToggle.src = "/img/buttonFixedSize.php?value=hide&width=normal&bgColor=737982";
		var self = this;
		this.picInfoToggle.addEvent("click",function(e){self.togglePicInfo();});
		this.galInfoToggle = gui.createButtonText('span', 'hide');
		this.galInfoToggle.setStyle("float","right").setStyle("margin-right","4px");
		//this.galInfoToggle = new Element("img").setStyle("float","right").setStyle("margin-top","4px").setStyle("margin-right","4px");
		//this.galInfoToggle.src = "/img/buttonFixedSize.php?value=hide&width=normal&bgColor=737982";
		this.galInfoToggle.addEvent("click",function(e){self.toggleGalInfo();});

		if (userObj.isLoggedIn())
		{
			this.galleryRank = gui.createButtonText('span', 'vote');
			this.galleryRank.setStyle("float","right").setStyle("margin-right","4px");
			//this.galleryRank.src = "/img/buttonFixedSize.php?value=vote&width=normal&bgColor=737982";
			this.galleryRanking.getParent().adopt(this.galleryRank);
			this.galleryRank.addEvent("click",function(){self.rank(self.galleryId,'gallery');});

			this.pictureRank = gui.createButtonText('span', 'vote');
			this.pictureRank.setStyle("float","right").setStyle("margin-right","4px");
			//this.pictureRank = new Element("img").setStyle("float","right").setStyle("margin-top","4px").setStyle("margin-right","4px");
			//this.pictureRank.src = "/img/buttonFixedSize.php?value=vote&width=normal&bgColor=737982";
			//this.pictureRanking.getParent().adopt(this.pictureRank);
		}

		//this.pictureCommentsToggle = gui.createButtonText('span', 'hide');
		//this.pictureCommentsToggle.setStyle("float","right").setStyle("margin-right","4px");
		//this.pictureCommentsToggle = new Element("img").setStyle("float","right").setStyle("margin-top","4px").setStyle("margin-right","4px");
		//this.pictureCommentsToggle.src = "/img/buttonFixedSize.php?value=hide&width=normal&bgColor=737982";
		//this.pictureCommentsToggle.addEvent("click",function(e){self.togglePicComments();});
		//this.pictureComments.getParent().adopt(this.pictureCommentsToggle);

		this.galleryCommentsToggle = gui.createButtonText('span', 'hide');
		this.galleryCommentsToggle.setStyle("float","right").setStyle("margin-right","4px");
		//this.galleryCommentsToggle = new Element("img").setStyle("float","right").setStyle("margin-top","4px").setStyle("margin-right","4px");
		//this.galleryCommentsToggle.src = "/img/buttonFixedSize.php?value=hide&width=normal&bgColor=737982";
		this.galleryCommentsToggle.addEvent("click",function(e){self.toggleGalComments();});
		this.galleryComments.getParent().adopt(this.galleryCommentsToggle);

		this.galleryShoutbox = new galleryShoutbox(this.galleryCommentsBox,{objectId:this.galleryId});
		this.galleryShoutbox.addEvent("countChanged",function(count){self.galleryComments.innerHTML = count;});

		this.pictureInformation.adopt(this.picInfoToggle);
		this.galleryInformation.adopt(this.galInfoToggle);

		this.pictureContainer.setStyle("overflow","hidden");
		this.pictureContainer.setStyle("height","300px");
		this.pictureContainer.adopt(new Element("div").setStyles({"width":this.pictureContainer.getSize().x,"height":this.pictureContainer.getSize().y,'background':'url(/img/icons/ajax-loader.gif) center center no-repeat'}));

		var slideShow = new SWFObject("/js/slideshow.swf?xmlURL=/galleryXML.php?id="+this.galleryId, "slideshow", "114", "16", "8", "#ffffff");
		slideShow.addParam("align", "left");
		slideShow.addParam("allowScriptAccess","always");
		slideShow.addParam("allowFullScreen","true");
		slideShow.addParam('wmode', 'opaque');
		slideShow.addParam("scale","noscale");
		slideShow.write("slideshow");

		//var previousArrow = new Element("img").setProperty("src","/img/buttonFixedSize.php?value=arrowLeft&width=arrow").setStyle("opacity","0");
		//var nextArrow = new Element("img").setProperty("src","/img/buttonFixedSize.php?value=arrowRight&width=arrow").setStyle("opacity","0").setStyle("float","right");
		//http://edaab-sta.vnweb03.de/img/icons/3eckGrauL.png
		var previousArrow = new Element("img").setProperty("src","/img/icons/triangle_grey_left.png").setStyle("opacity","0");
		var nextArrow = new Element("img").setProperty("src","/img/icons/triangle_grey_right.png").setStyle("opacity","0").setStyle("float","right");
		this.previousArrow.adopt(previousArrow);
		this.nextArrow.adopt(nextArrow);
		this.nextArrow = nextArrow;
		this.previousArrow = previousArrow;
		var previousPicture = new Element("img").setProperty("class","img").setStyle("display","block").setStyle("opacity",0);
		var nextPicture = new Element("img").setProperty("class","img").setStyle("display","block").setStyle("opacity",0);
		this.nextPicture.adopt(nextPicture);
		this.previousPicture.adopt(previousPicture);
		this.nextPicture = nextPicture;
		this.previousPicture = previousPicture;

		this.sendToFriendContainer.setStyle("display","none");
		if(userObj.isLoggedIn())
			new eDaabRecommend({'element':this.sendToFriendContainer,'objectId':this.galleryId});
		this.gatherData();
	},
	rank: function(id,type,i)
	{
		var url = "/json/galleries/rank.html";
    	var self = this;
		var request = new Json.Remote(url+'?SESSID='+sessionId+'&rand='+Math.random(),
		{
        	onComplete: function(jsonObj)
			{
				if (jsonObj.rankings=='already')
				{
					alerts.fireEvent('add',{'type':'vote','text':'you have already voted for this gallery','title':'Sorry'});
				}
				else
				{
					if (type=='gallery') self.galleryRanking.innerHTML = jsonObj.rankings;
					else
					{
						self.pictureRanking.innerHTML = jsonObj.rankings;
						self.data.pictures[i].ranking = jsonObj.rankings;
					}
				}
			}
		}).send({'objectId':id});
	},
	togglePicInfo: function(){this.toggle(this.pictureDescription,this.picInfoToggle);},
	toggleGalInfo: function(){this.toggle(this.galleryDescription,this.galInfoToggle);},
	toggleGalComments: function(){this.toggle(this.galleryCommentsBox,this.galleryCommentsToggle);},
	togglePicComments: function(){this.toggle(this.pictureCommentsBox,this.pictureCommentsToggle);},
	toggle: function(el,to)
	{
		if (el.fx!=null) el.fx.cancel();
		//el.toggleEl();
		if (el.style.display=="none")
		{

			el.setStyle("display","block");
			el.setStyle("height","auto");
			el.setStyle("overflow","auto");
			el.originalHeight = el.getSize().y;
			el.setStyle("display","block");
			el.setStyle("overflow","hidden");
			el.setStyle("height","0px");
			el.fx = new Fx.Styles(el,{'duration':500});
			el.fx.addEvent("onComplete",function(){});
			el.fx.start({'opacity':1,'height':el.originalHeight});

			gui.updateButton(to, 'hide');
			/*
			if (to!=null)
				to.src = "/img/buttonFixedSize.php?value=hide&width=normal&bgColor=737982";
			*/
		}
		else
		{

			el.originalHeight = el.getSize().y;
			el.setStyle("height",el.originalHeight);
			el.setStyle("overflow","hidden");
			el.setStyle("display","block");
			this.effect(el,{'opacity':0,'height':0},function(){el.setStyle("display","none");});

			gui.updateButton(to, 'show');
			/*
			if (to!=null)
				to.src = "/img/buttonFixedSize.php?value=show&width=normal&bgColor=737982";
			*/
		}
	},
	gatherData: function()
	{
		var self = this;
    	var request = new Json.Remote('/json/galleries/'+this.galleryId+'.html?SESSID='+sessionId+'&rand='+Math.random(),
		{
        	onComplete: function(jsonObj)
			{
				try{
					jsonObj.phpReturn = jsonObj.phpReturn;
					self.ready(jsonObj);
				}
				catch(e)
				{
					self.pictureContainer.getChildren()[0].setStyles({"background":"#fff","font-weight":"bold","font-size":"16px","width":"250px","height":"100px","padding":"150px"}).setHTML("Failure... Please reload this page");
				}
			}
		}).send();
	},
	ready: function(obj)
	{
		this.loaded = 0;
		this.data = obj;
		this.preload();
	},
	preload: function()
	{
		this.thumbnails = new Array();
		this.pictures = new Array();

		for (var i=0;i<this.data.pictures.length;i++)
		{
			var el = this.data.pictures[i];
			this.preloadImages(i,el.big,el.thumbnail);
		}
	},
	preloadImages: function(i,big,thumb)
	{
		this.thumbnails[i] = new Element("img");
		this.pictures[i] = new Element("img");
		var self = this;
		this.thumbnails[i].addEvent("load",function(){self.imageReady('thumb',i);});
		this.pictures[i].addEvent("load",function(){self.imageReady('big',i);});
		this.thumbnails[i].src = thumb;
		this.pictures[i].src = big;
	},
	imageReady: function(type,i)
	{
		if (type=='big')
		{
			this.pictures[i].setOpacity(0);
			this.pictureContainer.adopt(this.pictures[i]);
			this.pictures[i].oheight = this.pictures[i].getSize().y
			this.pictures[i].setStyle("position","relative");
			this.pictures[i].setStyle("display","none");
		}
		else
		{
			this.thumbnails[i].setOpacity(0);
			this.thumbnails[i].setStyle("display","none");
		}
		this.loaded++;
		if (this.loaded == this.data.pictures.length*2)
		{
			this.allLoaded();
		}
	},
	allLoaded: function()
	{
		for (var i=0;i<this.thumbnails.length;i++)
		{
			var div = new Element("div");
			if (i%4==3)
			{
				div.setStyle("margin-right","0px");
			}
			div.setProperty("class","inner size1_6");
			this.thumbnailContainer.adopt(div);
			this.thumbnails[i].setStyle("display","block");
			this.thumbnails[i].setProperty("class","img");
			this.thumbnails[i].setStyle("float","left");
			this.effect(this.thumbnails[i],'opacity1');
			div.adopt(this.thumbnails[i]);
			this.addThumbnailEvent(i);
		}
		var element = this.pictureContainer.getChildren()[0];
		var self = this;
		this.effect(element,'opacity0',function(){element.remove();self.start();});
		this.galleryDescription.innerHTML = '';
		if (this.data.description!="")
		{
			this.galleryInformation.setStyle('display','block');
			this.galleryDescription.setStyle('display','block');
			this.galleryDescription.innerHTML += '<div class="infoList" style="float:none;"><p>'+this.data.description+'</p></div>';
		}
		//this.galleryDescription.innerHTML += '<div class="infoList"><div class="attr">gallery views</div><div class="value">'+this.data.views+'</div></div>';
		this.galleryViews.setText(this.data.views);
		this.galleryRanking.innerHTML = this.data.ranking;
	},
	addThumbnailEvent: function(i)
	{
		var self = this;
		this.thumbnails[i].addEvent("click",function(){self.showPicture(i);});
	},
	start: function()
	{
		this.showPicture(this.current-1);
	},
	blendOut: function(i)
	{
		var self = this;
		this.effect(this.pictures[i],'opacity0',function(){self.pictures[i].setStyle("display","none");});
	},
	blendIn: function(i)
	{
		var self = this;
		this.pictures[i].setStyle("display","block");
		this.effect(this.pictures[i],'opacity1',function(){
			var request = new Json.Remote('/json/galleries/updateViews.html?galleryId='+self.data.pictures[i].id+'&SESSID='+sessionId+'&rand='+Math.random(),
			{
	        	onComplete: function(jsonObj)
				{
					self.data.pictures[i].views+=1;
				}
			}).send();
		});
		new Fx.Scroll(window).toElement($('breadcrumb'));
		//new Fx.Scroll(window).toElement(this.pictures[i]);
	},
	showPicture: function(num)
	{
		if (num!=this.oldImage)
		{
			/*if (this.pictureShoutbox!=null) this.pictureShoutbox = null;
			this.pictureCommentsBox.empty();
			this.pictureShoutbox = new galleryShoutbox(this.pictureCommentsBox,{objectId:this.data.pictures[num].id});
			this.pictureShoutbox.addEvent("countChanged",function(count){self.pictureComments.innerHTML = count;});*/
			this.pictureDescription.innerHTML = '';
			if (this.data.pictures[num].description!="")
			{
				this.pictureInformation.setStyle('display','block');
				this.pictureDescription.setStyle('display','block');
				this.pictureDescription.innerHTML += '<div class="infoList"><p>'+this.data.pictures[num].description+'</p></div>';
			}

			//this.pictureDescription.innerHTML += '<div class="infoList"><div class="attr">image views</div><div class="value">'+this.data.pictures[num].views+'</div></div>';
			/*this.pictureRanking.innerHTML = this.data.pictures[num].ranking;
			if (userObj.isLoggedIn())
			{
				this.pictureRank.removeEvents("click");
				this.pictureRank.addEvent("click",function(){self.rank(self.data.pictures[num].id,'picture',num);});
			}*/

			var self = this;
			this.previousPicture.removeEvents("click");
			this.nextPicture.removeEvents("click");
			this.previousArrow.removeEvents("click");
			this.nextArrow.removeEvents("click");

			var onComplete = function(){};
			if (num>0)
			{
				var onComplete = function()
				{
					self.previousPicture.addEvent("click",function(){self.showPicture(num-1);});
					self.previousPicture.src = self.thumbnails[(num-1)].src;
					self.previousPicture.fx = new Fx.Styles(self.previousPicture,{'duration':500});
					self.previousPicture.fx.start({'opacity':1});
				};
				this.previousArrow.addEvent("click",function(){self.showPicture(num-1);});
				this.effect(this.previousArrow,'opacity1');
			}
			else
				this.effect(this.previousArrow,'opacity0');
			this.effect(this.previousPicture,'opacity0',onComplete);

			var onComplete = function(){};
			if (num<this.pictures.length-1)
			{
				var onComplete = function()
				{
					self.nextPicture.addEvent("click",function(){self.showPicture(num+1);});
					self.nextPicture.src = self.thumbnails[(num+1)].src;
					self.nextPicture.fx = new Fx.Styles(self.nextPicture,{'duration':500});
					self.nextPicture.fx.start({'opacity':1});
				};
				this.nextArrow.addEvent("click",function(){self.showPicture(num+1);});
				this.effect(this.nextArrow,'opacity1');
			}
			else
				this.effect(this.nextArrow,'opacity0');

			this.effect(this.nextPicture,'opacity0',onComplete);
			var marginTop = 0;
			if (this.oldImage!=null) this.blendOut(this.oldImage);
			this.effect(this.pictureContainer,{'height':this.pictures[num].oheight},function(){self.blendIn(num);});
			this.oldImage = num;
		}
	},
	effect: function(el,styles,complete,duration)
	{
		if (styles=='opacity0') styles = {'opacity':0};
		if (styles=='opacity1') styles = {'opacity':1};
		if (duration==null) duration = 500;

		if (el.fx!=null) el.fx.cancel();
		el.fx = new Fx.Morph(el,{'duration':duration});
		if (complete!=null) el.fx.addEvent("onComplete",complete);
		el.fx.start(styles);
	},
	sendToFriend: function()
	{
		this.sendToFriendContainer.setStyle("display","block");
	},
	blockGallery: function(el)
	{
		var self = this;
		var url = el.getProperty('href');//"/json/profile/favorites/addFavorite.html";
			url += '?objectId='+this.galleryId;
		var container = new Element('div');
		var form = new Element('form');
			form.setProperty('action', url);
			form.setProperty('method', 'post');
		var subjectLabel = new Element('label').inject(form);
			subjectLabel.setText('subject');
		var subject = new Element('input').inject(form);
			subject.setProperty('name', 'subject');
		var textLabel = new Element('label').inject(form);
			textLabel.setText('message');
		var text = new Element('textarea').inject(form);
			text.setProperty('name', 'message');
		
		container.adopt(form);
		var popup = new inlinePopup(
		{
			buttons:
				new Array(
						{
							caption:"save",
							callback:function(popup)
							{										
								form.submit();
								//window.location.href = url;
								popup.closePopup();	
							}
						},
						{
							caption:"cancel",
							callback:function()	{popup.closePopup();}
						}
					)
				,
				width:400,
				title:el.getProperty('type') + " this gallery",
				paddingBottom:1,
				content: container
			});	
		
		return false;
    	
	},
	addToFavorites: function()
	{
		var url = "/json/profile/favorites/addFavorite.html";
    	var self = this;
		var request = new Json.Remote(url+'?SESSID='+sessionId+'&rand='+Math.random(),
		{
        	onComplete: function(jsonObj)
			{
				if (jsonObj.code=='already')
				{
					alerts.fireEvent('add',{'type':'favorite','text':'this gallery is already in your favorites','title':'Sorry'});
				}
				else
				{
					alerts.fireEvent('add',{'type':'favorite','text':'this gallery is added to your favorites','title':'Ok'});
				}
			}
		}).send({'objectId':this.galleryId});
	}
});
var gallery;
window.addEvent('domready', function()
{
	if ( gui == null)	gui = new guiClass();
	gallery = new eDaabGallery(null,galleryPage);
});