/*
* Cache van javascripts.script.js
* Created: 2011-12-06 14:22:21
*/

/*
$Author: sjors $
$LastChangedDate: 2006-10-19 14:05:31 +0200 (do, 19 okt 2006) $
$Id: javascripts.js 28 2006-10-19 12:05:31Z sjors $
$Rev: 28 $
*/

var google = 'UA-16207997-1';
if (google) {
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}

window.addEvent('domready',function() {

	$$('body').addClass('js');

	$$('.expandinglist').each(function(list) {
		var defopen = -1;

		list.getElements('.toggler').each(function(a, i) {
			if (a.get('tag') == 'a') {
				a.addEvent('click', function(e) {
					e.stop();
				});
				if (defopen == -1 && document.location.href.substr(document.location.href.indexOf('#')) == a.get('href')) {
					defopen = i;
				}
			}
		});

		new Accordion(list.getElements('.toggler'), list.getElements('.toggling'), {
			'display': defopen,
			'show': defopen,
			'alwaysHide': true,
			onActive: function(toggler, element) {
				var icon = toggler.getElement('.toggle-icon');
				if (icon) {
					icon.addClass('toggle-down');
				}
			},
			onBackground: function(toggler, element) {
				var icon = toggler.getElement('.toggle-icon');
				if (icon) {
					icon.removeClass('toggle-down');
				}
			}
		});
	});

	$$('.overview-tabs').each(function(el) {
		new tabsnav(el);
	});

	// Put label in value
	$$('input.labelinside').each(function(inp) {
		var labelvalue = inp.getPrevious('label').setStyle('display', 'none').get('text');
		//inp.store('origtype', 'text');
		inp.addEvent('focus', function(e) {
			if (inp.get('value') == labelvalue) {
				inp.set('value', '');
				inp.removeClass('defaultvalue');
				//inp.set('type', inp.retrieve('origtype'));
			}
		});
		inp.addEvent('blur', function(e) {
			if (inp.get('value') == '' || inp.get('value') == labelvalue) {
				inp.set('value', labelvalue);
				inp.addClass('defaultvalue');
				//inp.set('type', 'text');
			}
		});
		inp.fireEvent('blur');
	});

	$$('.hidedeletes a.delete').each(function(el) {
		el.getParent().addEvent('mouseenter', function(e) {el.setStyle('visibility', 'visible');});
		el.getParent().addEvent('mouseleave', function(e) {el.setStyle('visibility', 'hidden');});
		el.setStyle('visibility', 'hidden');
	});

	if ($('MooFlow')) {
		/* MooFlow instance with the complete UI and Viewer */
		MooFlow.implement({
			onClickView: function(cur){
				switch (cur.rel.toLowerCase()){
					case 'image':
					this.loadImage(cur);
					break;
					case 'link':
						var el = new Element('img', {
							'src': cur.href
						}).inject(
							new Element('a', {
								'href': cur.href
							})
						);
					//window.open(cur.href, cur.target || '_self');
					var zoom = new imageZoom(new Array(el));
					zoom.showImage(null, 0);
					break;
					default:
				}
			}
		});
		var mf = new MooFlow($('MooFlow'), {
			useSlider: false,
			useAutoPlay: false,
			useCaption: true,
			useMouseWheel: true,
			useKeyInput: true,
			useViewer: true
		});

		mf.attachViewer();

		$$('.loadremote').addEvent('click', function(){
			mf.loadHTML(this.get('href'), this.get('rel'));
			return false;
		});
	}

});

window.addEvent('load',function() {

	if (google && _gat) {
		var pageTracker = _gat._getTracker(google);
		pageTracker._initData();
		pageTracker._trackPageview();
	}

	document.addEvent('click', function(e) {
  	var el = $(e.target)
  	if (el.tagName.toLowerCase() != 'a') {
  		el = el.getParent('a');
  	}
  	var newwin = false;

		if (el && el.get('href')) {
			newwin = newwin || el.hasClass('newwindow');
			newwin = newwin || el.hasClass('externlink');

			/*if (el.get('href').substring(0, 7) == 'http://' || el.get('href').substring(0, 8) == 'https://') {
				newwin = newwin || el.get('href').indexOf('http://www.bodymince.nl');
			}*/

			var downloadsurl = '/downloads/';
			newwin = newwin || el.get('href').substring(0, downloadsurl.length) == downloadsurl;
		}
		if (newwin) {
			e.stop();
			window.open(el.href, '_blank');
		}
	});

	new imageZoom($$('img.zoom'));

	$$('div.graphs-overview div.zoom-icon').each(function(el) {
		new Element('img', {
			'src': '/images/interface/magnify.png',
			'alt': 'vergroot',
			'height': 20,
			'width': 20,
			'class': 'magnify-icon'
		})
			.inject(el)
			.addEvent('click', function(e) {
				el.getElement('.zoom').getParent('a').fireEvent('click');
			});
	});

	if ($('map_canvas')) {
		if ($('map_canvas').hasClass('single')) {
			new franchiseMapSingle($('map_canvas'));
		} else {
			new franchiseMap($('map_canvas'));
		}
	}
});

var tabsnav = new Class({

	Extends: Fx.Elements,
	options: {},

	initialize: function(element, options) {
		this.setOptions(options);
		this.element = $(element);

		this.elements = [];
		this.element.removeClass('overview-img');
		this.elementsContainer = new Element('ul', {
			'class': 'overview-tabs-content'
		}).inject(this.element, 'after');

		var height = 0;
		this.element.getElements('.tab-content').each(function(el, i) {
			var li = new Element('li').inject(this.elementsContainer);
			li.setStyle('opacity', i==0?1:0);
			el.inject(li);
			this.elements.push(li);
			var myHeight = li.getSize().y;
			if (myHeight > height) {
				height = myHeight;
			}
		}, this);
		this.elementsContainer.setStyle('height', height);

		this.tabs = this.element.getElements('li');
		this.tabs.each(function(el, i) {
			el.addEvent('click', this.display.bindWithEvent(this, i));
			el.addClass('el-'+i);
		}, this);

		this.display(null, 0);
	},

	display: function(e, idx) {
		if (e) {
			e.stop();
		}
		var obj = {};
		this.elements.each(function(el, i) {
			if (i == idx) {
				obj[i] = {
					'opacity': [el.getStyle('opacity'), 1]
				}
			} else {
				obj[i] = {
					'opacity': [el.getStyle('opacity'), 0]
				}
			}
		});
		this.start(obj);

		this.tabs.removeClass('current');
		this.tabs[idx].addClass('current');
	}
});

var franchiseMap = new Class({

	Implements: [Options],
	options: {
		singleZoom: 11
	},
	bounds: null,
	franchisers: [],
	map: null,
	mapInit: false,
	mapelement: null,
	franchiseicon: null,

	initialize: function(element, options) {
		this.setOptions(options);
		this.mapelement = $(element);

		if (!GBrowserIsCompatible()) {
			this.mapelement.set('html', '<p>Uw browser biedt geen ondersteuning voor Google Maps. Gebruik het menu links om naar een vestiging te navigeren</p>');
			return;
		}

		this.mapelement.addClass('loading');

		$$('body').addEvent('unload', function() {
			GUnload();
		});

		var me = this;
		new Request.JSON({
			url: document.location.href,
			onSuccess: function(franchisers) {
				me.init();
				me.loadFranchisers(franchisers);
			}
		}).get({'ajax': 1});
	},

	init: function() {
		var me = this;
		this.initMap();
		/*$$('ul.vestigingen a').addEvent('click', function(e) {
			e.stop();
			var franchiser = me.getFranchiserById(this.getParent('li').get('id').substr(2));
			me.map.setCenter(franchiser.marker.getLatLng(), me.options.singleZoom);
			GEvent.trigger(franchiser.marker, 'click');
		});*/
		if ($('franchiser-near')) {
			this.searchmarker = null;
			$('franchiser-near').getParent('form').addEvent('submit', this.findNear.bindWithEvent(this));
		}
	},

	findNear: function(e) {
		e.stop();
		var me = this;
		var address = $('franchiser-near').get('value');
		var geocoder = new GClientGeocoder();
		var searchicon = new GIcon(G_DEFAULT_ICON);
		searchicon.image = '/images/interface/gm-search.png';
		searchicon.shadow = '/images/interface/gm-shadow.png';
		searchicon.iconSize = new GSize(36, 41);
		searchicon.shadowSize = new GSize(36, 41);
		searchicon.iconAnchor = new GPoint(23, 41);
		searchicon.imageMap = [0,0, 36,0, 36,41, 0,41];
		searchicon.infoWindowAnchor = new GPoint(24, 41);

		geocoder.getLatLng(
			address,
			function(point) {
				if (!point) {
					alert(address + " niet gevonden");
				} else {
					// Calc distances
					var nearest = [];
					me.franchisers.each(function(franchiser) {
						if (franchiser) {
							franchiser.dist = franchiser.marker.getLatLng().distanceFrom(point);
							if (franchiser.dist < 100000) {
								// Skip locations over 100km
								nearest[franchiser.id] = franchiser;
							}
						}
					});
					nearest.sort(function(a,b){return a.dist-b.dist;});
					nearest = nearest.slice(0, 3);

					if (nearest.length == 0) {
						alert('Geen vestigingen in de buurt gevonden');
						return;
					}

					if (me.searchmarker) {
						me.map.removeOverlay(me.searchmarker);
					}

					me.searchmarker = new GMarker(point, {'icon': searchicon});
					me.map.addOverlay(me.searchmarker);
					GEvent.addListener(me.searchmarker, "click", function() {
						me.searchmarker.openInfoWindowHtml(address);
					});

					var bounds = new GLatLngBounds();
					bounds.extend(point);
					nearest.each(function(franchiser) {
						bounds.extend(franchiser.marker.getLatLng());
					});
					me.centerMap(bounds);
				}
			}
		);
	},

	loadFranchisers: function(franchisers) {
		franchisers.each(function(franchiser) {
			var point = new GLatLng(franchiser.coords.lat, franchiser.coords.lng);
			franchiser.marker = this.createMarker(point, this.buildInfoWindowHtml(franchiser));
			this.map.addOverlay(franchiser.marker);
			this.bounds.extend(point);

			this.franchisers[franchiser.id] = franchiser;
		}, this);
		this.bindEvents.delay(1000, this);
		this.centerMap(this.bounds);
	},

	bindEvents: function() {
	},

	initMap: function() {
		if (!this.mapInit) {
			this.mapelement.removeClass('loading');
			this.map = new GMap2(this.mapelement);
			this.bounds = new GLatLngBounds();
			this.map.setUIToDefault();
			this.mapInit = true;

			this.franchiseicon = new GIcon(G_DEFAULT_ICON);
			this.franchiseicon.image = '/images/interface/gm-default.png';
			this.franchiseicon.shadow = '/images/interface/gm-shadow.png';
			this.franchiseicon.iconSize = new GSize(36, 41);
			this.franchiseicon.shadowSize = new GSize(36, 41);
			this.franchiseicon.iconAnchor = new GPoint(10, 41);
			this.franchiseicon.imageMap = [0,0, 36,0, 36,41, 0,41];
			this.franchiseicon.infoWindowAnchor = new GPoint(18, 41);
		}
	},

	centerMap: function(bounds) {
		this.map.setCenter(bounds.getCenter(), this.map.getBoundsZoomLevel(bounds));
	},

	createMarker: function(point, html) {
		var me = this;
		var marker = new GMarker(point, {'icon': this.franchiseicon});
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
			me.bindEvents.delay(1000, me);
		});
		return marker;
	},

	getFranchiserById: function(id) {
		return this.franchisers[id];
	},

	infoWindowContent: function(franchiser) {
		var html = '<h3>' + franchiser.name + '</h3>' +
			'<p>' + franchiser.address + '<br />' +
			franchiser.zipcode + ' ' + franchiser.city + '<br />';
		if (franchiser.phone1 != '') {
			html += 'T ' + franchiser.phone1 + '<br />';
		}
		html += '<a href="mailto:' + franchiser.email + '">' + franchiser.email + '</a><br />' +
			'</p>';
		return html;
	},

	buildInfoWindowHtml: function(franchiser) {
		return '<div class="marker">' +
			this.infoWindowContent(franchiser) + 
			'<p><a class="button" href="' + document.location.href + '/' + franchiser.slug + '"><span>bekijk deze vestiging</span></a></p>' +
			'</div>';
	}
});

var franchiseMapSingle = new Class({
	
	Extends: franchiseMap,
	options: {
		singleZoom: 13
	},
	directions: null,

	bindEvents: function() {
		var me = this;
		if ($('routeform')) {
			$('routeform').addEvent('submit', function(e) {
				e.stop();
				me.getDirections();
			});
		}
		if ($('routebutton')) {
			$('routebutton').addEvent('click', function(e) {
				e.stop();
				me.franchisers.getLast().marker.openInfoWindowHtml(
					me.buildInfoWindowHtmlRoute(me.franchisers.getLast())
				);
				me.bindEvents.delay(500, me);
			});
		}
	},

	initMap: function() {
		var wasInit = this.mapInit;
		this.parent();
		if (!wasInit) {
			this.directions = new GDirections(this.map, $('map_route'));
		}
	},

	loadFranchisers: function(franchisers) {
		this.parent(franchisers);
		this.map.setZoom(this.options.singleZoom);
		GEvent.trigger(franchisers.getLast().marker, 'click');
		this.bindEvents.delay(500, this);
	},

	buildInfoWindowHtml: function(franchiser) {
		return '<div class="marker">' +
			this.infoWindowContent(franchiser) + 
			'<p><a href="#" class="button" id="routebutton"><span>bepaal route</span></a></p>' +
			'</div>';
	},

	buildInfoWindowHtmlRoute: function(franchiser) {
		return '<div class="marker">' +
			this.infoWindowContent(franchiser) + 
			'<form method="get" action="" class="singleinput" id="routeform"><fieldset><legend></legend>' +
			'<label for="routefrom">Vertrekpunt</label><br />' +
			'<input type="text" class="text" name="routefrom" id="routefrom" value="Zoek" />' +
			'<input type="submit" class="submit" value="" /></fieldset></form>' +
			'</div>';
	},	

	getDirections: function() {
		var me = this;
		var geocoder = new GClientGeocoder();
		var address = $('routefrom').get('value');
		geocoder.getLatLng(
			address,
			function(point) {
				if (!point) {
					alert(address + " niet gevonden");
				} else {
					me.directions.clear();
					var franchiser = me.franchisers.getLast();
					franchiser.marker.closeInfoWindow();
					var franchaddress = franchiser.address + ' ';
					franchaddress += franchiser.zipcode + ' ' + franchiser.city;
					me.directions.load('from: ' + address + ' to: ' + franchaddress);
				}
			}
		);
	}
});

var mouseOvers = new Class({
	initialize: function(elements) {
		elements = elements || $$('img.mouseover');
		elements.each(function(image) {
			if (image.hasClass('specialmo')) {
				image.set('src_mouseover', image.get('class').replace(/.*mouseover=/, ''));
				image.set('src_mouseout',  image.get('src'));
				image.addEvent('mouseenter', this.mouseover);
				image.addEvent('mouseleave', this.mouseout);
				new Asset.image(image.get('src_mouseover'));
			} else {
				var xsrc = image.src;
				if (xsrc.substring(xsrc.length-7, xsrc.length-3) == '_up.')	{
					image.set('src_mouseover', image.get('src').replace(/_up\.([a-z]{3})/, '_ov.$1'));
					image.set('src_mouseout',  image.get('src'));

					image.addEvent('mouseenter', this.mouseover);
					image.addEvent('mouseleave', this.mouseout);

					// Preload
					new Asset.image(image.get('src_mouseover'));
				}
			}
		}, this);
	},
	mouseover: function() {
		this.set('src', this.get('src_mouseover'));
	},
	mouseout: function()	{
		this.set('src', this.get('src_mouseout'));
	}
});

var pngSupport = new Class({

	Implements: [Options],

	options: {
		transparentImage: '/images/pnghack/transparent.gif'
	},

	initialize: function(options) {
		this.setOptions(options);
		this.needed = Browser.Engine.trident4 && Browser.Platform.win;
	},

	replace: function(parentel) {
		if (!this.needed) return;
		if (!parentel) parentel = document;

		parentel.getElements('img').each(function(img) {
			if (img.src.indexOf(this.options.transparentImage) == -1 && img.src.indexOf("png") >= 0) {
				var oldsrc = img.get('src');
				var size = img.getSize();
				img.set('src', this.options.transparentImage);
				img.set('width', size.x);
				img.set('height', size.y);
				img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldsrc + "',sizingMethod='scale')";
			}
		}, this);
	}
});

var overlayBg = new Class({

	Implements: [Options],

	options: {
		'id': 'bodyoverlay',
		'opacity': 0.8
	},

	initialize: function(options) {

		var windowscroll = window.getScrollSize();
		this.setOptions(options);

		if (!$(this.options.id)) {
			new Element('div', {
				'id': this.options.id,
				'styles': {
					'opacity': 0,
					'width': windowscroll.x+'px',
					'height': windowscroll.y+'px'
				}
			})
				.injectInside(document.body);
		}

		this.fx = new Fx.Tween($(this.options.id), {duration: 1000});
		//$(this.options.id).addEvent('click', this.hide.bindWithEvent(this));
	},

	show: function() {
		var windowscroll = window.getScrollSize();
		$(this.options.id).setStyles({
			'width': windowscroll.x+'px',
			'height': windowscroll.y+'px'
		});
		this.fx.start('opacity', this.options.opacity);
	},

	hide: function() {
		this.fx.start('opacity', 0);
	}
});

var imageZoom = new Class({

	Implements: [Options],

	options: {
		zoomdiv: 'zoomdiv',
		padding: [15, 10, 15, 10],
		textheight: [15, 15]
	},

	initialize: function(images, options) {
		this.elements = images;
		if (this.elements.length == 0 || !$(this.options.zoomdiv)) {
			return;
		}
		this.setOptions(options);

		this.elements.each(function(thumb, i) {
			var a = thumb.getParent('a');
			a.addEvent('click', this.showImage.bindWithEvent(this, i));
		}, this);

		var windowsize = window.getSize();
		var windowscroll = window.getScroll();

		this.overlay = new overlayBg();

		$(this.options.zoomdiv)
			.setStyles({
				'display': 'block',
				'top': windowscroll.y + (windowsize.y / 2),
				'left': windowscroll.x + (windowsize.x / 2)
			})
			.store('fx',  new Fx.Morph($(this.options.zoomdiv), {duration: 1000, wait: false}))
			.store('fx2', new Fx.Morph($(this.options.zoomdiv), {duration: 1000, wait: false}));

		var me = this;
		$(this.options.zoomdiv).getElement('.close').addEvent('click', function(e) {
			e.stop();
			$(me.options.zoomdiv).retrieve('fx2').start({
				'top': [$(me.options.zoomdiv).getTop(), windowscroll.y + (windowsize.y / 2)],
 				'height': [me.previmgsize.y+'px', 0]
			});
			$(me.options.zoomdiv).retrieve('fx').start.delay(600, $(me.options.zoomdiv).retrieve('fx'), {
				'width': [me.previmgsize.x+'px', 0],
		 		'padding': 0,
		 		'left': [$(me.options.zoomdiv).getLeft(), windowscroll.x + (windowsize.x / 2)]
			});
			me.previmgsize = {x: 0, y: 0};
			me.overlay.hide.delay(1200, me.overlay);
			$(me.options.zoomdiv+'_img').getElement('img').dispose.delay(1200, $(me.options.zoomdiv+'_img').getElement('img'));
			$(me.options.zoomdiv).getElement('.close')   .setStyle('visibility', 'hidden');
			$(me.options.zoomdiv).getElement('.next')    .setStyle('visibility', 'hidden');
			$(me.options.zoomdiv).getElement('.previous').setStyle('visibility', 'hidden');
		});
		$(this.options.zoomdiv).getElement('.next').addEvent('click', function(e) {
			e.stop();
			if (me.elements[me.curimg+1]) {
				me.showImage(e, me.curimg+1);
			}
		});
		$(this.options.zoomdiv).getElement('.previous').addEvent('click', function(e) {
			e.stop();
			if (me.elements[me.curimg-1]) {
				me.showImage(e, me.curimg-1);
			}
		});
	},

	showImage: function(e, idx) {
		if (e && e.target) e.stop();

		var windowsize = window.getSize();
		var windowscroll = window.getScroll();

		this.overlay.show();

		if (!this.previmgsize) {
			this.previmgsize = {x: 0, y: 0};
		}

		var removeimg = $(this.options.zoomdiv+'_img').getElement('img');
		if (removeimg) {
			removeimg.setStyle('z-index', 2);
		}

		this.curimg = idx;

		var me = this;
		var parent = this.elements[idx].getParent('a');
		var images = new Asset.images([parent.getProperty('href')], {onComplete: function() {
			var image = images[0];
			image.setStyles({
				'opacity': 0,
				'z-index': 3
			});
			image.injectInside($(me.options.zoomdiv+'_img'));
			new Fx.Tween(image, {onComplete: function(){if(removeimg) {removeimg.dispose()}}}).start('opacity', 1);
			var imgsize = image.getSize();
			imgsize = {x: imgsize.x, y: imgsize.y+me.options.textheight[0]+me.options.textheight[1]};

			var paddingtb = me.options.padding[0] + me.options.padding[2];
			var paddinglr = me.options.padding[1] + me.options.padding[3];

			$(me.options.zoomdiv).getElement('.close').setStyle('visibility',    'visible');
			$(me.options.zoomdiv).getElement('.next').setStyle('visibility',     me.elements[idx+1] && me.elements[idx+1].getParent('a').get('rel') == parent.get('rel')?'visible':'hidden');
			$(me.options.zoomdiv).getElement('.previous').setStyle('visibility', me.elements[idx-1] && me.elements[idx-1].getParent('a').get('rel') == parent.get('rel')?'visible':'hidden');
			$(me.options.zoomdiv).getElement('.info').set('html', me.elements[idx].get('alt'));

			var newtop  = windowscroll.y + (windowsize.y - imgsize.y - paddingtb - me.options.textheight[0] - me.options.textheight[1]) / 2;
			var newleft = windowscroll.x + (windowsize.x - imgsize.x - paddinglr) / 2;
			if (newtop  < 0) newtop  = 0;
			if (newleft < 0) newleft = 0;

			$(me.options.zoomdiv).retrieve('fx').start({
				'left': [$(me.options.zoomdiv).getLeft(), newleft],
				'width': [me.previmgsize.x+'px', imgsize.x+'px'],
				'padding-top': [$(me.options.zoomdiv).getStyle('padding-top').toInt(), me.options.padding[0]],
				'padding-right': [$(me.options.zoomdiv).getStyle('padding-right').toInt(), me.options.padding[1]],
				'padding-bottom': [$(me.options.zoomdiv).getStyle('padding-bottom').toInt(), me.options.padding[2]],
				'padding-left': [$(me.options.zoomdiv).getStyle('padding-left').toInt(), me.options.padding[3]]
			});
			$(me.options.zoomdiv).retrieve('fx2').start.delay(800, $(me.options.zoomdiv).retrieve('fx2'), {
				'top': [$(me.options.zoomdiv).getTop(), newtop],
				'height': [me.previmgsize.y+'px', imgsize.y+'px']
			});
			me.previmgsize = imgsize;
		}});
	}
});