//CMSlistener.js
//Code for CMS login and edit button

var cmsListener = new Class({
	options: {
		domain: "playthefield.co.uk",
		page_name: "home"
	},
	Implements: [Events, Options],
	initialize: function(options){
		this.setOptions(options);
		this.checkCookie();
	},
	makeCookie: function(username, showlogin){
		//let's store "example" as "some value" for 10 days
		var settings = {
				duration: 60,
				domain: this.options.domain,
				path: "/"
		};
		Cookie.write("username", username, settings);
		Cookie.write("showlogin", showlogin, settings);
	},
	checkCookie: function(){
		
		this.username = Cookie.read("username");
		if(Cookie.read("showlogin") == "true")
			this.addLogin(this.username);
	},
	addLogin: function(username){
		//structure: 
		//<div class="editLink">
		//<a class="hide">x</a>
		//<a>Edit this page</a>
		//</div>
		//<div class="shim"></div>
		//<div class="login">
		//<form class="login">
		//<p>Username:</p><input type="text" name="username" size="15" /><br />
		//<p>Password:</p><input type="password" name="password" size="15" /><br />
    		//<input type="submit" value="Login" />
		//</form>
		//</div>
		this.eDiv = new Element("div", {
			'class': "editLink",
			styles: {
				opacity: 0
			}
		});
		var closeLink = new Element("a", {
			'class': "hide",
			events: {
				click: this.hideListener.bind(this)
			}
		});
		closeLink.appendText("Close");
		var editLink = new Element("a", {
			events: {
				click: this.showLogin.bind(this)
			}
		});
		editLink.appendText("Edit");

		this.eDiv.set("html", "<strong>" + username + "</strong> | ");
	
		this.eDiv.adopt(editLink).appendText(" | ").adopt(closeLink);


		this.lDiv = new Element("div", {
			'class': "login",
			styles: {
				display: "none",
				position: "absolute",
				left: ($(document.body).getSize().x / 2 - 200) + "px",
				top: ($(document.body).getSize().y / 2 - 100) + "px",
				width: "400px",
				height: "200px",
				padding: "20px",
				zIndex: 10001
			}
		});
		this.shimDiv = new Element("div", {
			styles: {
				display: "none",
				position: "absolute",
				width: "100%",
				height: $(document.body).getScrollSize().y + "px",
				opacity: 0,
				zIndex: 10000,
				backgroundColor: "#FFFFFF"
			},
			events: {
				click: this.hideLogin.bind(this)
			}
		});
		var lForm = new Element("form", {
			'class': "login",
			events: {
				submit: function(){
					var show = true;
					if(!$("persist").checked)
						show = false;
					this.makeCookie(this.username, show);
				}.bind(this)
			}
		});
		lForm.set("html", "<label>Username:</label><input type='text' name='username' value='" + username + "' size='15' /><br /><label>Password:</label><input type='password' name='password' size='15' /><br /><input id='persist' type='checkbox' value='yes' checked='checked' /><label>Remember me on this computer.</label><br /><input type='submit' value='Login' />");
		lForm.set("action", "/login/login/?page=" + this.options.page_name);
		lForm.set("enctype", "application/x-www-form-urlencoded")
		lForm.set("method", "post");
		this.lDiv.adopt(lForm);

		this.eDiv.inject(document.body, "top");
		this.lDiv.inject(document.body, "top");
		this.shimDiv.inject(document.body, "top");

		new Fx.Tween(this.eDiv).start("opacity", 0, 1);
	},
	hideListener: function(){
		new Fx.Tween(this.eDiv).addEvent("complete", function(){
			this.eDiv.setStyle("display", "none");
		}.bind(this)).start("opacity", 1, 0);
	},
	showLogin: function(){
		this.eDiv.setStyle("display", "none");
		this.shimDiv.setStyle("display", "block");
		new Fx.Tween(this.shimDiv, {duration: 100}).addEvent("complete", function(){
			this.lDiv.setStyle("display", "block");
		}.bind(this)).start("opacity", 0, 0.3);
	},
	hideLogin: function(){
		this.shimDiv.setStyle("opacity", "0");
		this.shimDiv.setStyle("display", "none");
		this.lDiv.setStyle("display", "none");
		this.eDiv.setStyle("display", "block");
	}
});