/**
 * A class that makes a contentblocks collection slidable
 *
 * @since Tue 19 Okt 2010
 * @author Arjen Smit
 * @package
 **/
var HoogerbruggeCarousel = Class.create({
	initialize: function() {
	},

	/**
	 * initCarousel
	 *
	 * Init's a carousel
	 *
	 * @since Tue 19 Okt 2010
	 * @access public
	 * @param string container
	 * @return void
	 **/
	initCarousel: function(container) {
		var carouselcontent = $(container);
		var container = $(container).up(".carousel");
		var carouselslides = container.select(".carousel-slide");
		var firstslide = carouselslides.first().addClassName("carousel-slide-active");
		var brandbox_wrapper = $$("div.brandbox_wrapper");

		var options = {};
		if (container.hasAttribute("rel") ) {
			options = container.readAttribute("rel").evalJSON();
		}

		carouselcontent.style.width = ( (carouselslides.size() * carouselslides.first().getDimensions().width) + 10) + "px";

		var controls = container.select("a.carousel-control");

		if (container.select("a.carousel-jumper").size() > 0) {
			var jumpers = container.select("a.carousel-jumper");
			jumpers.first().addClassName("carousel-jumper-active");
			options["selectedClassName"] = "carousel-jumper-active";
			controls = (controls.size() > 0) ? controls.concat(jumpers) : jumpers;
			var progressbar = jumpers.first().down("span.progress");
		}

		var slidableid = container.down(".carousel-content").identify();
		var carousel = new Carousel(slidableid, carouselslides, controls, options);

		var jumperbuttons = container.down(".carousel-jumpers");
		jumperbuttons.setStyle( {
			visibility: "visible"
		} )

		var jumperwidth = ( ( carouselslides.first().getDimensions().width - 25 ) / (carouselslides.size() ) ) - 2 ; 
		jumperbuttons.select("a.carousel-jumper").invoke("setStyle", {width: jumperwidth+"px"});

		var morpheffect = {
			style: "width: 100%;",
			duration: carousel.options.frequency,
			transition: Effect.Transitions.linear,
			beforeStart: function(effect) {
				effect.element.setStyle( {display: "block"} );
			}
		};
		morpheffect.afterFinish = function(carousel, jumperbuttons) {
			if (carousel.current == carousel.slides.last()) {
				jumperbuttons.select("a.carousel-jumper span.progress").invoke("setStyle", {width: "0px", display: "none"});
			}
			carousel.next();
		}.bind(morpheffect, carousel, jumperbuttons)

		var progressbareffect = new Effect.Morph(progressbar, morpheffect);

		carousel.options.progressbareffect = progressbareffect;
		carousel.options.beforeMove = function(brandbox_wrapper,progressbareffect) {
			var current = (typeof(this.current) == "undefined") ? this.slides.first() : this.current;
			var carouselbgimage = 'url(\'' + current.down("div.photo img").readAttribute('src') + '\')';
			brandbox_wrapper.invoke("setStyle", {backgroundImage: carouselbgimage});
 			carousel.options.progressbareffect.cancel();
 		}.bind(carousel,brandbox_wrapper,progressbareffect);

		carousel.options.afterMove = function(container, jumpers, carouselslides, progressbareffect, jumperbuttons) {
			var id = container.identify();
			jumpers.invoke("removeClassName", this.options.selectedClassName);
			carouselslides.invoke("removeClassName", "carousel-slide-active");
			var index = this.current._index;
			var cindex = (typeof(jumpers[index] ) == "undefined") ? 0 : index;
			jumpers[cindex].addClassName(this.options.selectedClassName);
			this.current.addClassName("carousel-slide-active");
			this.options.foundactive = false;
			jumperbuttons.select("a.carousel-jumper").each( function(jumperbuttons, jumper) {
					if (this.options.foundactive == false && !jumper.hasClassName("carousel-jumper-active")  ) {
						jumper.down("span.progress").setStyle( {width: "100%", display: "block"} );
					}
					else {
						if (jumper.hasClassName("carousel-jumper-active") ) {
							this.options.foundactive = true;
						}
						jumper.down("span.progress").setStyle( {width: "0px", display: "none"} );
					}
 			}.bind(this, jumperbuttons) );
			this.options.foundactive = false;
			carousel.options.progressbareffect = new Effect.Morph(container.down(".carousel-jumper-active").down("span.progress"), morpheffect);
		}.bind(carousel, container, jumpers, carouselslides, progressbareffect, jumperbuttons);
	}
});
var hoogerbruggecarousel = new HoogerbruggeCarousel();/**
 * A class that retrieves and appends more projects from the server when the "more projects"-button is clicked
 *
 * @since Wed Aug 17 2011
 * @author Jaap Romijn
 * @package Hoogerbrugge
 **/
var WJProjectshoogerbrugge = Class.create({
	/**
	 * initialize
	 *
	 * Creates a new WJProjectshoogerbrugge
	 *
	 * @since Tue Jun 01 2010
	 * @access public
	 * @return WJProjectshoogerbrugge
	 **/
	initialize: function(offset, count, marketcategory, projectcategory) {
		this.offset = offset;
		this.count = count;
		this.marketcategory = marketcategory;
		this.projectcategory = projectcategory;
		console.log(this.marketcategory);
		document.observe("dom:loaded", this.registerForms.bindAsEventListener(this));
	},
 
	/**
	 * appendProjects
	 *
	 * Appends the responseText of the server (containing the projects) before the form
	 *
	 * @since Tue Jun 01 2010
	 * @access public
	 * @param string responseText - The responseText from the server containing projects and form
	 * @return void
	 **/
 	appendProjects: function(responseText) {
		var projectpager = $$('.projectpager').first();
		projectpager.insert({before:responseText } );
		Element.remove(projectpager);
		this.registerForms();

		$$('div.column').first().setStyle({display:"block"}); //Fix for IE8: makes the browser re-render the container and stretch it
		$$('div.column').innerHTML = $$('div.column').innerHTML;
	},
 
	/**
	 * registerForms
	 *
	 * Registers the form so that the append javascript is triggered when the form is submitted
	 *
	 * @since Tue Jun 01 2010
	 * @access public
	 * @return void
	 **/
 	registerForms: function() {
		$('fetchmorebutton').observe("click", this.updateProjects.bindAsEventListener(this));
	},
 
	/**
	 * updateProjects
	 *
	 * Updates the projects
	 *
	 * @since Tue Jun 01 2010
	 * @access public
	 * @return void
	 **/
 	updateProjects: function(event) {
		Event.stop(event);
		this._url = new WJUrl();
		this._url.setCt("wmdynamic");
		this._url.setDt("project");
		this._url.addParameter("module", "Wmprojecthoogerbrugge");
		this._url.addParameter("wmtrigger[]", "requestufts");
// 		this._url.addParameter("wmtrigger[]", "xml");
		this._url.addParameter("uft[]", "aeroplane");
		this._url.addParameter("count", this.count);
		this._url.addParameter("offset", this.offset + this.count);
		this._url.addParameter("marketcategory", this.marketcategory);
		this._url.addParameter("projectcategory", this.projectcategory);
		
		this.offset = this.offset + this.count;
		
// 		form.select('input').each(
// 			function(input) {
// 				this._url.addParameter(input.name, input.value);
// 			}.bind(this)
// 		);
		if (!this._spin) {
			this._spin = new WJSpin();
		}
		this._spin.content(this._url, [this.appendProjects.bindAsEventListener(this)]);
		
		return false;
	}

});