/* Create namespace */
if (Mediastruktur == undefined) var Mediastruktur = {};
var pageSlider;

/*
 *	Class	Mediastruktur.PageSlider
 *	Require Prototype.js 1.6 and Script.aculo.us 1.8.0
 */
Mediastruktur.PageSlider = Class.create({
	initialize: function() {
		this.backButton = $("backButton");
		this.contactButton = $("contactButton")
		this.welcomeButton1 = $("welcome1");
		this.welcomeButton2 = $("welcome2");
		this.welcomeButton3 = $("welcome3");
		
		/* Activate sliders */
		this.activateProjectSlide();
		this.activateProjectItemSlide();
		
		/* Activate draggables */
		this.contactButton.show();
		new Draggable(this.contactButton, {starteffect:'', endeffect:'', scroll: window, onEnd: function(draggable, event) {
				$(draggable.element).addClassName('been_dragged');
			}
		});
		new Draggable(this.backButton, {starteffect:'', endeffect:'', scroll: window, onEnd: function(draggable, event) {
				$(draggable.element).addClassName('been_dragged');
			}
		});
		new Draggable(this.welcomeButton1, {starteffect:'', endeffect:'', scroll: window, onEnd: function(draggable, event) {
				$(draggable.element).addClassName('been_dragged');
			}
		});
		new Draggable(this.welcomeButton2, {starteffect:'', endeffect:'', scroll: window, onEnd: function(draggable, event) {
				$(draggable.element).addClassName('been_dragged');
			}
		});
		new Draggable(this.welcomeButton3, {starteffect:'', endeffect:'', scroll: window, onEnd: function(draggable, event) {
				$(draggable.element).addClassName('been_dragged');
			}
		});
		
		Event.observe(this.backButton, "click", function(event) {
			if($("backButton").hasClassName("been_dragged")) {
				event.preventDefault();
				$("backButton").removeClassName("been_dragged");
			} else {
				this.closeProjectItems();
			};
		}.bind(this));
		
		Event.observe(this.contactButton, "click", function(event) {
			if($("contactButton").hasClassName("been_dragged")) {
				event.preventDefault();
				$("contactButton").removeClassName("been_dragged");
			};
		});
	},
	
	/*
	 * Activates the project area slide if multiple areas exists
	 */
	activateProjectSlide: function() {
		/* Container to search and append click events for */
		this.scroller 			= $("projectSlider");
		this.slides	 			= $$(".projectArea");
		this.defaultWidth		= 900;
		this.controls			= $$("a.projectButton");
		this.anchors			= $$("#projects a.active");
		this.bigImageContainer 	= $("projects");
		
		/* Check amount of project areas */
		if(this.slides.size() > 1) {
			/* Set width for horizontal scrolling */
			this.bigImageContainer.setStyle({width:this.defaultWidth*this.slides.size()+"px"});
			var carousel = new Carousel(this.scroller, this.slides, this.controls, {duration: 0.5, controlClassName:'projectButton'});
		}
		/* Add EventListeners to all projects, when clicked ==> load project items */
		//this.slides.invoke("observe", "click", this.closeProjectItems.bind(this));
		this.anchors.invoke("observe", "click", this.openProjectItems.bind(this));
	},
	
	activateProjectItemSlide: function() {
		/* Container to search and append click events for */
		this.scroller 			= $("projectItemSlider");
		if (this.scroller == null) {
			Element.insert($("content"), "<div class='itemArea' style='display: none;'><div id='leftButton' class='left buttonArea leftItemButton'><a rel='prev' class='itemButton' href='#'><span class='audial'>Previous</span></a></div><div id='projectItemSlider'></div><div id='rightButton' class='right buttonArea'><a rel='next' class='itemButton' href='#'><span class='audial'>Next</span></a></div>");
		}
		
		this.slides	 			= $$(".projectItem");
		this.defaultWidth		= 900;
		this.controls			= $$("a.itemButton");
		this.bigImageContainer 	= $("projectItems");
		
		if (this.slides.size() > 1) {
			/* Set width for horizontal scrolling */
			this.bigImageContainer.setStyle({width:this.defaultWidth*this.slides.size()+"px"});
			var carousel = new Carousel(this.scroller, this.slides, this.controls, {duration: 0.5, controlClassName:'itemButton'});
		}
		
		/* Add EventListeners all projectItems */
		this.slides.invoke("observe", "click", this.closeProjectItems.bind(this));
	},
	
	/*
	 *	Close items
	 */
	closeProjectItems: function(event) {
		this.projectItems = $$(".itemArea")[0];
		this.resetScrollPosition.delay(0.3, this.scroller);
		Effect.Fade(this.projectItems, { duration: 0.3 });
		this.resetDocumentTitle();
		
		/* Show contactButton while hiding backButton */
		this.contactButton.show();
		this.backButton.hide();
		
		/* "Return: false" */
		if (event)
			event.stop();
	},
	
	openProjectItems: function(event) {
		/* Set document title */
		this.aElement = event.findElement("a");
		this.divElement = this.aElement.up("div").cleanWhitespace();
		this.setDocumentTitle(this.divElement.down("h1").down("a").innerHTML, this.divElement.down("h2").innerHTML);

		/* Retrieve new data - AJAX */
		new Ajax.Request(this.aElement.href, {
			method:'get',
			
			/* When AJAX request is created start loading */
			onCreate: function(){
				Effect.Appear("loader", { duration: 0.3, to: 0.5, queue: { position: 'end', scope: "loading" } });
			},	
			
			onSuccess: function(transport) {
				$("backButton").show();
				
				var response = transport.responseText || "no response text";
				$("projectItemSlider").remove();
				Element.insert($$(".itemArea")[0], "<div id='projectItemSlider'><div id='projectItems'></div></div>");
				
				$("projectItems").update(response);
				pageSlider.activateProjectItemSlide();
				
				Effect.Fade("loader", { duration: 0.3, from: 0.5, queue: { position: 'end', scope: "loading" } });
				Effect.Appear($$(".itemArea")[0], { duration: 0.3 });
				$("projectItemSlider").scrollLeft = 0;
				$("projectItemSlider").scrollTop = 0;
				
				
			},
			
			onFailure: function() {
				Effect.Fade("loader", { duration: 0.3, from: 0.5, queue: { position: 'end', scope: "loading" } });
			}
		});
		
		/* Hide contactButton while showing backButton */
		this.contactButton.hide();
				
		/* "Return: false" */
		event.stop();
	},
	
	resetScrollPosition: function(element) {
		element = $(element);
		element.scrollLeft = 0;
		element.scrollTop = 0;	
	},
	
	setDocumentTitle: function(project, client) {
		if (client == "JW") {
			document.title = project + " / Jonas Williamsson / Graphic Design";
		} else {
			document.title = project + "; " + client + " / Jonas Williamsson / Graphic Design";
		}
	},
	
	resetDocumentTitle: function() {
		//document.title = $A(document.getElementsByTagName("title"))[0].cleanWhitespace().innerHTML;
		document.title = "Jonas Williamsson / Graphic Design";
	}
});


/*
 * Ajax.Request.abort
 * extend the prototype.js Ajax.Request object so that it supports an abort method
 * Thanks to: http://blog.pothoven.net/2007/12/aborting-ajax-requests-for-prototypejs.html
 */
Ajax.Request.prototype.abort = function() {
    /* prevent and state change callbacks from being issued */
    this.transport.onreadystatechange = Prototype.emptyFunction;
    /* abort the XHR */
    this.transport.abort();
    /* update the request counter */
    Ajax.activeRequestCount--;
};

 
/*
 *	Do this when page is loaded 
 */
Event.observe(window, 'load', function() {
	pageSlider = new Mediastruktur.PageSlider();

});