// JavaScript Document
var $j = jQuery.noConflict();

$j(document).ready(function () {
	
	// Activate login form validation
	$j('#login-form').validate({
		rules: {
			"log": {
				required: true
			},
			"pwd": {
				required: true,
				minlength: 5
			}
		},
		messages: {
			"log": {
				required: "Dit veld is verplicht"
			},
			"pwd": {
				required: "Dit veld is verplicht",
				minlength: "Uw password moet uit minstens 5 karakters bestaan."
			}
	    }
	});
	
	// Activate register form validation
	$j('#register-form').validate({
		rules: {
			"user_login": {
				required: true,
				minlength: 6
			},
			"user_email": {
				required: true,
				email: true
			}
		},
		messages: {
			"user_login": {
				required: "Dit veld is verplicht",
				minlength: "Uw gebruikersnaam moet minstens 6 karakters lang zijn."
			},
			"user_email": {
				required: "Dit veld is verplicht",
				email: "Vul a.u.b. een juist emailadres in."
			}
	    }
	});
	
	// Activate upload form validation
	$j('#upload-form').validate({
		rules: {
			"photo": {
				accept: "jpg|jpeg"
			},
			"photo-name": {
				required: true
			}
		},
		messages: {
			"photo": {
				accept: "Alleen jpg formaat is toegestaan."
			},
			"photo-name": {
				required: "Dit veld is verplicht"
			}
	    }
	});
	
	// Activate the back-links
	$j('a.back').bind('click', function(){
		history.go(-1);
		return false;
	});
	
	// Activate the 'print this page' link
	$j('#print-page').bind('click', function(){
		window.print();
		return false;
	});
	
	// Activate the 'next step' button
	$j('#stap-1 .post-set  :submit').bind('click', function(){
		if (! $j('#step-value').val()) {
			$j.fn.colorbox({transition:"fade", opacity:"0.5", inline:true, href:"#error-1"});
			return false;
		}
	});
	$j('#stap-2 .post-set  :submit').bind('click', function(){
		if (! $j('#step-value').val()) {
			$j.fn.colorbox({transition:"fade", opacity:"0.5", inline:true, href:"#error-2"});
			return false;
		}
	});
	
	// Activate the links for 'form lay-over'
	$j(".login").colorbox({transition:"fade", opacity:"0.5", inline:true, href:"#login-form"});
	$j(".register").colorbox({transition:"fade", opacity:"0.5", inline:true, href:"#register-form"});
	$j(".upload").colorbox({transition:"fade", opacity:"0.5", inline:true, href:"#upload-form"});
		$j(".close").bind('click', function() { $j(this).colorbox.close(); return false; });
	
	// Activate the 'delete image' icon
	$j('.delete').bind('click', function () {
		$j(this).closest('li').hide("slow");
		
		// Call to MediaTool for actually deleting the image from the user profile. //
		
		return false;
	});
	
	// Activate the 'edit image' link
	$j('.edit').bind('click', function (event) {
		
		// Call to MediaTool and ColorTool to start editing the image. //
		
		return false;
	});
	
	/* Activate the archive dropdown for the archive page
	------------------------------------------------------------*/
	$j('#archive-select').bind('change', function(){
		document.location = $j(this).find('option:selected').val();
	});
	
	/* Make the standard value for input fields disappear
	------------------------------------------------------------*/
	$j('input[type="text"], textarea').bind('focus', function(){
		
		if (!this.originalValue) {
			this.originalValue = $j(this).attr('value');
		}
		
		if(this.originalValue == $j(this).val() && $j(this).hasClass('internal-label')) {
			$j(this).attr('value', '');
			if ($j(this).hasClass('faded')){ $j(this).removeClass('faded') }
		}
		$j(this).addClass('selected');
	});
	$j('input[type="text"], textarea').bind('blur', function(){
		
		if(($j(this).val() == '' || $j(this).val() == this.originalValue)  && $j(this).hasClass('internal-label')) {
			$j(this).attr('value', this.originalValue);
			$j(this).addClass('faded');
		}
		if ($j(this).hasClass('selected')){ $j(this).removeClass('selected') }
	});
	
	// Activate the scroll behaviour
	var scrollCont = new ScrollContainer('.scroll-container');
	
	// Activate outline selected item
	var scrollCont = new OutlineSelectedItem('.scroll-container');
});

/* Outline selected item
------------------------------------------------------------*/
function OutlineSelectedItem(el) {
	this.container = $j(el);
	
	if (this.container.length) {
		this.anchors = this.container.find('li');
		this.selectedItem = this.container.find('li.selected') ? this.container.find('li.selected') : '';
		
		// Select the clicked item
		if (this.anchors.length) {
			this.anchors.bind('click', function(that){
				return function(event) {
					
					// Add the selected image to the hidden value field
					$j('#step-value').attr('value', $j(this).find('a').attr('href'));
					
					if (that.selectedItem) {
						that.selectedItem.removeClass('selected');
					}
					that.selectedItem = $j(this).addClass('selected');
					
					event.preventDefault();
				}
			}(this));
		}
	}
}


/* Scroll container object
------------------------------------------------------------*/
function ScrollContainer(el) {
	this.containerWidth = 0;
	this.totalInnerWidth = 0;
	this.maxScroll = 0;
	this.minScroll = 0;
	
	this.container = $j(el);
	
	if (this.container.length) {
		this.itemUl = this.container.find('ul');
		this.containerItems = this.container.find('li');
	
		this.itemWidth = $j(el).find('li').outerWidth(true);
		this.getContainerWidth();
		this.getInnerWidthTotal();
		
		this.maxScroll = this.totalInnerWidth - this.containerWidth;
		
		this.activateScroll();
	}
}

ScrollContainer.prototype.getContainerWidth = function() {
	this.containerWidth = this.container.outerWidth();
}

ScrollContainer.prototype.getInnerWidthTotal = function() {
	this.containerItems.each(function(that) { 
		return function() {
			that.totalInnerWidth = that.totalInnerWidth + $j(this).outerWidth(true);
		}
	}(this));	
}

ScrollContainer.prototype.activateScroll = function() {
	$j('#right').bind('click', function(that) {
		return function() {
			var posLeft = parseInt(that.itemUl.css('left'));
			
			if (posLeft > (that.maxScroll * -1)) {
				that.itemUl.animate({"left": "-="+that.itemWidth+"px"}, "slow");
			}
			return false;
		};
	}(this));
	
	$j('#left').bind('click', function(that) {
		return function() {
			var posLeft = parseInt(that.itemUl.css('left'));
			
			if (posLeft < (that.minScroll * -1)) {
				that.itemUl.animate({"left": "+="+that.itemWidth+"px"}, "slow");
			}
			return false;
		};				  
	}(this));
}