// JavaScript Document

$(function() {


	var clients = {

		allURL: $("#more-clients").attr("href"),
		loaded: false,
		opened: false,
		
		init: function () {

			window.slideshow.create({
				wrapper: $(".slideshow"),
				list: $(".slideshow .images"),
				items: $(".slideshow .images li"),
				overlays: $(".slideshow .overlays"),
				overlayItems: $(".slideshow .overlays li"),
				navPrev: $(".slideshow .prev"),
				navNext: $(".slideshow .next"),
				subNav: $(".slideshow-nav"),
				subNavPrev: $(".slideshow-nav .prev"),
				subNavNext: $(".slideshow-nav .next"),
				subNavCurrent: $(".slideshow-nav .current"),
				itemWidth: $(".slideshow").width(),
				animationTime: 300,
				autoSwitch: true,
				autoInterval: 6000,
				infinite: true
			});

			var count = $("#clients-container .count").text().split("/");
			this.collapsedCount = count[0],
			this.fullCount = count[1],

			this.setupEventHandlers();

			this.subscribe("toggling", this.updateToggles, this);
			this.subscribe("toggling", this.updateCount, this);
		},

		setupEventHandlers: function () {

			var self = this,
				toggles = $("#clients-container h2, #clients-container h3, #constraint-clients"),
				mustache = $(".mustache");
			
			// Include the mustache the first load
			if (!this.loaded) {
				toggles = toggles.add(mustache);
			}
			
			// Use the pointer cursor for all toggles
			toggles.css("cursor", "pointer");
			
			// Bind event handler for all toggles
			toggles.bind("click", function (e) {
				e.preventDefault();
				self.toggleHandler.call(self, this, e);
			});


			if (!this.loaded) {

				// Trigger mustache animation when it's hovered
				mustache.bind("mouseover", function () {
					mustache.addClass("animate");
				}).bind("mouseout", function () {
					mustache.removeClass("animate");
				});
			}
		},

		toggleHandler: function (elem, e) {
			var self = this;
			
			// Load all clients the first time
			if (!this.loaded) {
				this.subscribe("clientsLoaded", function () {
					self.toggleHandler(elem, e);
				});
				this.loadAllClients();
				return;
			}

			this.publish("toggling", this.opened ? "close" : "open");

			// Toggle mode
			if (this.opened) {
				this.close();
			} else {
				this.open();
			}
		},

		loadAllClients: function () {
			var self = this;
			
			// Load the module containing all clients
			$.get(this.allURL, function(data) {

				// Find the existing container
				var oldContainer = $("#clients-container"),
					newContainer = $("<div>").append(data).find("#clients-container");

				// Replace the container with the new container for all clients
				oldContainer.replaceWith(newContainer);

				// Get the new container
				newContainer = $("#clients-container");

				// Get the sub container for all clients to retrieve the full height
				self.clients = newContainer.children(".clients");
				self.clientsFullHeight = self.clients.height();

				// Set flag
				self.loaded = true;

				// Reset the event handlers
				self.setupEventHandlers();

				// Publish event
				self.publish("clientsLoaded");
			});
		},

		open: function () {
			var self = this,
				clients = this.clients;

			// Set initial height
			clients.css({ height: 300 });

			// Set flag
			self.opened = true;

			// Animate to full height
			clients.stop().animate({
				height: this.clientsFullHeight
			}, 1500, 'easeOutCubic');
		},

		close: function () {
			var self = this,
				clients = this.clients;

			// Set flag
			self.opened = false;
			
			// Animate to collapsed height
			clients.stop().animate({
				height: 321
			}, 1000, 'easeOutCubic');
		},

		scroll: function () {
			$("html, body").stop().animate({
				scrollTop: $("#clients-container").offset().top
			}, 500, "easeOutCubic");
		},

		updateToggles: function (mode) {

			// Get labels
			var toggleArrow = $("#constraint-clients"),
				toggleText = $("#more-clients"),
				expand = toggleArrow.data("expand-title"),
				collapse = toggleArrow.data("collapse-title");

			if (mode === "open") {
				toggleArrow.removeClass("client-expand").addClass("client-collapse");
				toggleText.text("- " + collapse);
			}

			if (mode === "close") {
				toggleArrow.removeClass("client-collapse").addClass("client-expand");
				toggleText.text("- " + expand);
			}
		},

		updateCount: function (mode) {

			var count = $("#clients-container .count");

			if (mode === "open") {
				count.text(this.fullCount + "/" + this.fullCount);
			}
			if (mode === "close") {
				count.text(this.collapsedCount + "/" + this.fullCount);
			}
		}
	};

	$.extend(clients, pubSub);

	clients.init();

});