var LOE_Galleries_WebLinks = new Class({

	Implements: [Options, Events],
	options: {
		host: 'http://www.loewe.de',
		'type': 'page',
		'selector': 'div#loeweContent > div.rightSidebar',
		'linkN': 0
	},
	initialize: function(options) {
		this.setOptions(options);
		//public properties
		this.adminPanel = false;
		this.itemID = this.getItemID();
		if(this.itemID == null) return false;
		this.wrapper = this.getWrapper(this.options.selector);
		this.getLinks();
	},

	getItemID: function() {
		var el = null;
		if(document.id('pageID')) {
			el = document.id('pageID').get('text');
		} else if(document.getElement('p[rel=newsText]')) {
			el = document.getElement('p[rel=newsText]').get('id');
			this.options.type = 'news'
		}
		return el;
	},

	/**
	 * TODO set a request method for checkPerms. (but it's already safe)
	 */
	checkPerms: function() {
		return (document.id('loggedStage')) ? true : false;
	},

	_showAdminPanel: function() {
		if(!this.checkPerms()) return false;
		this.adminPanel = true;
		this.wrapper[0].removeClass('emptyBox');
		var adminPanel = new Element('form.linkAdminPanel').inject(this.wrapper[0], 'bottom');
		var linkurl = new Element('input#linkurl[type=text][name=linkurl]').inject(adminPanel, 'bottom');
		var linkurlLabel = new Element('label[for=linkurl][text=Link]').inject(linkurl, 'before');
		var linktitle = new Element('input#linktitle[type=text][name=linktitle]').inject(adminPanel, 'bottom');
		var linktitleLabel = new Element('label[for=linktitle][text=Title]').inject(linktitle, 'before');
		var linksubmit = new Element('span#linksubmit[text=add link]').inject(adminPanel, 'bottom');
		linksubmit.addEvent('click', this.addLink.bind(this, [null, null, this.wrapper[1].retrieve('linkObj').links.length, null]));
	},

	getType: function() {
		return (this.options.type == 'page') ? 'pages' : 'gallery_news';
	},

	getWrapper: function(selector) {
		var container = document.getElement(selector);
		var linkBox = new Element('div.loeweSidebarElement.emptyBox').inject(container, 'top');
		var linkList = new Element('ul.linkList').inject(linkBox, 'top').store('linkObj', {'links': []});
		return new Array(linkBox, linkList);
	},

	addLink: function(title, url, i, setonly) {
		if(title === null || url === null) {
			i = String(Date.now());
			title = document.id('linktitle').get('value');
			url = document.id('linkurl').get('value');
		}
		if(!title || !url) return;
		var linkWrap = new Element('li#' + i + '.linkObj').inject(this.wrapper[1], 'bottom');
		var linkEl = new Element('a[href=' + url + '][text=' + title + ']').inject(linkWrap);
		if(this.adminPanel == true) {
			//var editIcon = new Element('span', {'class':'editIcon'}).addEvent('click', this.editLink.bind(this, linkWrap.get('id'))).inject(linkWrap, 'bottom');
			var deleteIcon = new Element('span', {'class':'deleteIcon', 'styles': {'float': 'right'}}).addEvent('click', this.delLink.bind(this, linkWrap.get('id'))).inject(linkWrap, 'top');
		}
		if(setonly) return;
		var linkObj = this.wrapper[1].retrieve('linkObj');
		linkObj.links.push({
			'title': title,
			'url': url,
			'uid': i
		});
		this.setLinks(linkObj);
		document.id('linkurl').set('value', '');
		document.id('linktitle').set('value', '');
	},

	editLink: function(e) {
		
	},

	delLink: function(uid) {
		var i, ln = this.wrapper[1].retrieve('linkObj');
		for (i = 0; i < ln.links.length; i++) {
			if(ln.links[i].uid == uid) {
				ln.links.splice(i, 1);
			}
		}
		document.id(uid).dispose();
		this.setLinks(ln);
	},

	storeLinks: function(response) {
		this.wrapper[1].store('linkObj', response);
		if(this.adminPanel === false) this._showAdminPanel();
	},

	parseLinks: function(response) {
		if(this.adminPanel === false) this._showAdminPanel();
		if(response == '0' || typeOf(response) != 'object') return false;
		if(this.wrapper[0].hasClass('emptyBox')) this.wrapper[0].removeClass('emptyBox');
		this.storeLinks(response);
		//if(this.options.linkN > 0) this.options.linkN = response.links.length;
		for (var i = 0; i < response.links.length; i++) {
			var link = response.links[i];
			this.addLink(link.title, link.url, link.uid, true);
		}
	},

	getLinks: function() {
		this.getRequest('getLinks', {
			onSuccess: this.parseLinks.bind(this)
		}, null).send();
	},

	setLinks: function(linkObj) {
		//var linkObj = this.wrapper[1].retrieve('linkObj');
		this.getRequest('setLinks', {
			onSuccess: this.storeLinks.bind(this)
		}, JSON.encode(linkObj)).send();
	},

	getRequest: function(action, events, json) {
		var reqConfig = {
			url: this.options.host + '/de/loewe-galleries.html',
			method: 'post',
			wait: true,
			noCache: false
		};
		if(typeOf(events) == 'object') Object.append(reqConfig, events);
		var reqData = 'type=868&tx_bmloegalleries_pi1[action]=' + action
			+ '&tx_bmloegalleries_pi1[gallery]=' + galleryID
			+ '&tx_bmloegalleries_pi1[id]=' + this.itemID
			+ '&tx_bmloegalleries_pi1[type]=' + this.getType();
		reqConfig.data = (!json) ? reqData + '&tx_bmloegalleries_pi1[getData]=1' : reqData + '&tx_bmloegalleries_pi1[linkObj]=' + json;
		return new Request.JSON(reqConfig);
	}

});

window.addEvent('domready', function() {
	var WebLinks = new LOE_Galleries_WebLinks();
});