$.amy = {};
$.amy.globalMedia = [];

var offset = 0;
var tags = "";

$(document).ready(function() {

	function resetPage() {
		$('#result > .media_item').remove();
		$('#result').removeData('masonry');
		$('#result').masonry( { columnWidth: 250 } );
	}

	function returnMedia() {
    	//$('#result').empty();
    	$('#result').removeData('masonry');
    	$('#result').append($($.amy.globalMedia)).masonry( { columnWidth: 250 }, function() { });
    	//$('.tag').corner("3px");
    	$.amy.globalMedia = [];
    }
	
	$('a.meerladen').click(function(e){
		e.preventDefault();
		var terms = split( $("#search_input").val() );
		offset = offset + 50;
		terms.pop();
		terms.push( e.target.title );
		terms.push( "" );
 		dataString = terms.join( ", " );
		$.ajax({
  			url: encodeURI('http://portal.academieminerva.nl/api/search/keywords/'+ offset +'/50/image/' + dataString + tags),
  			dataType: 'json',
  			error: function(XMLHttpRequest, textStatus, data) { },
  			success: function(data, textStatus, XMLHttpRequest) {
  				$('div#search').html("");
  				$(data.keys).each(function() { loadTags(this); });
  				$(data.media).each(function() { loadMedia(this.media_id); });
  				$('#result').append( $($.amy.globalMedia) ).masonry( { appendedContent: $($.amy.globalMedia) } , function() { });
  				//$('.tag').corner("3px");
  				$.amy.globalMedia = [];
  				//returnMedia();
  			}	
		});
	});
	
	
	$('.tag').live('click', function(e) {
 		e.preventDefault();			
 		$.manageAjax.clear('someAjaxProfileName', {shouldAbort: true});
 		//$('#result').empty();
    	//$('#result').removeData('masonry');
 		
 		resetPage();
 		
 		offset = 0;
 		if(!$(this).hasClass("tag_active")) {
 		var terms = split( $("#search_input").val() );
		terms.pop();
		terms.push( e.target.title );
		terms.push( "" );
 		dataString = terms.join( ", " );
 		$("#search_input").val(dataString);
 			$.ajax({
  				url: encodeURI('http://portal.academieminerva.nl/api/search/keywords/0/50/image/' + dataString + tags),
  				dataType: 'json',
  				error: function(XMLHttpRequest, textStatus, data) { },
  				success: function(data, textStatus, XMLHttpRequest) {
  					$('div#search').html("");
  					
  					$(data.keys).each(function() { loadTags(this); });
  					$(data.media).each(function() { 
  						if(this.media_type == "image") { loadMedia(this.media_id); }
  						if(this.media_type == "text") { loadText(this.media_id); }
  						if(this.media_type == "video") { loadVideo(this.media_id); }	
  					});
  				}	
			});
 		} else {
 			var terms = split( $("#search_input").val() );
 			terms = removeByElement( terms, e.target.title );
 			dataString = terms.join( ", " );
 			$("#search_input").val(dataString);
 			$.ajax({
  				url: encodeURI('http://portal.academieminerva.nl/api/search/keywords/0/50/image/' + dataString + tags),
  				dataType: 'json',
  				error: function(XMLHttpRequest, textStatus, data) { },
  				success: function(data, textStatus, XMLHttpRequest) {
  					$('div#search').html("");
  					
  					$(data.keys).each(function() { loadTags(this); });
  					$(data.media).each(function() { 
  						if(this.media_type == "image") { loadMedia(this.media_id); }
  						if(this.media_type == "text") { loadText(this.media_id); }
  						if(this.media_type == "video") { loadVideo(this.media_id); }	
  					});
  				}	
			});
 		}
 		return false;
	});

	function removeByElement(arrayName,arrayElement) {
    	for(var i=0; i<arrayName.length;i++ ) { 
        	if(arrayName[i]==arrayElement)
            arrayName.splice(i,1); 
      	} 
      	return arrayName;
	}


	$("#search_input").watermark("Zoeken");
	
    $('#search_input').bind('keydown', function(e) {
    	var dataString = $(this).val();
       	if(e.keyCode==32) {
       			$.ajax({
  					url: encodeURI('http://portal.academieminerva.nl/api/search/keywords/0/50/image/' + dataString + tags),
  					dataType: 'json',
  					error: function(XMLHttpRequest, textStatus, data) { },
  					success: function(data, textStatus, XMLHttpRequest) {
  						$('div#search').html("");
  						resetPage();
  						$(data.keys).each(function() { loadTags(this); });
  						$(data.media).each(function() { 
  							if(this.media_type == "image") { loadMedia(this.media_id); }
  							if(this.media_type == "text") { loadText(this.media_id); }
  							if(this.media_type == "video") { loadVideo(this.media_id); }	
  						});
  						//returnMedia();
  					}	
				});
       	}
       	
    });
    
    //create an ajaxmanager named someAjaxProfileName
	var someManagedAjax = $.manageAjax.create('someAjaxProfileName', {
		queue: true, 
		cacheResponse: true,
		abortOld: true
	});
    
    
    function loadText(media_id) {    	
    	$.manageAjax.add('someAjaxProfileName', {
  			url: encodeURI('http://portal.academieminerva.nl/api/media/show/' + media_id),
  			dataType: 'json',
  			async: true,
  			error: function(XMLHttpRequest, textStatus, data) {
  			},
  			complete: function(XMLHttpRequest, textStatus) { 
  				$('#result').append( $($.amy.globalMedia) ).masonry( { columnWidth: 250, appendedContent: $($.amy.globalMedia) } , function() { });
  				//$('.tag').corner("3px");
  				$.amy.globalMedia = [];
  			},
  			success: function(data, textStatus, XMLHttpRequest) {
  				var tags = "";
  				var activetags = Array();
  				activetags.pop();
  				//Get active tags
  				$("div#search > .tag").each(function(index) {
  					activetags.push($(this).text());
  				});
  				$.each(data.combine, function(key, val) {
  					if(jQuery.inArray(val,activetags) > -1) {
						tags = tags + '<a class="tag tag'+key+' tag_active" title="' + val + '" href="">' + val + '</a>';
					} else {
    					tags = tags + '<a class="tag tag'+key+' tag_grey" title="' + val + '" href="">' + val + '</a>';
    				}
  				});
  				var media_box = $('<div class="media_item media_item_text owner_'+data.media_userid+'" id="media_'+media_id+'">loading...</div>');
  				media_box.css("width",440);
  				var media = media_box.html('<div class="media_content"><h4>'+ data.media_title +'</h4><span class="text">'+ data.media_desc +'</span><span class="tags">'+ tags +'</span></div>');
  				$.amy.globalMedia.push(media.get(0));
  			}
		});
    	
    }
    
    function loadVideo(media_id) {
    	$.manageAjax.add('someAjaxProfileName', {
  			url: encodeURI('http://portal.academieminerva.nl/api/media/show/' + media_id),
  			dataType: 'json',
  			async: true,
  			error: function(XMLHttpRequest, textStatus, data) {
  			},
  			complete: function(XMLHttpRequest, textStatus) { 
  				$('#result').append( $($.amy.globalMedia) ).masonry( { columnWidth: 250, appendedContent: $($.amy.globalMedia) } , function() { });
  				//$('.tag').corner("3px");
  				$.amy.globalMedia = [];
  			},
  			success: function(data, textStatus, XMLHttpRequest) {
  				var tags = "";
  				var activetags = Array();
  				activetags.pop();
  				//Get active tags
  				$("div#search > .tag").each(function(index) {
  					activetags.push($(this).text());
  				});
  				$.each(data.combine, function(key, val) {
  					if(jQuery.inArray(val,activetags) > -1) {
						tags = tags + '<a class="tag tag'+key+' tag_active" title="' + val + '" href="">' + val + '</a>';
					} else {
    					tags = tags + '<a class="tag tag'+key+' tag_grey" title="' + val + '" href="">' + val + '</a>';
    				}
  				});
  				var media_box = $('<div class="media_item media_item_video owner_'+data.media_userid+'" id="media_'+media_id+'">loading...</div>');
  				media_box.css("width",210);
  				var media = media_box.html('<div class="media_content">'+ data.media_html +'<h4>'+ data.media_title +'</h4><span class="text">'+ data.media_desc +'</span><span class="tags">'+ tags +'</span></div>');
  				$.amy.globalMedia.push(media.get(0));
  			}
		});
    }
    
    function loadMedia(media_id) {
    	$.manageAjax.add('someAjaxProfileName', {
  			url: encodeURI('http://portal.academieminerva.nl/api/media/show/' + media_id),
  			dataType: 'json',
  			async: true,
  			error: function(XMLHttpRequest, textStatus, data) {
  			},
  			complete: function(XMLHttpRequest, textStatus) { 
  				$('#result').append( $($.amy.globalMedia) ).masonry( { appendedContent: $($.amy.globalMedia) } , function() { });
  				//$('.tag').corner("3px");
  				$.amy.globalMedia = [];
  			},
  			success: function(data, textStatus, XMLHttpRequest) {
  				var tags = "";
  				var activetags = Array();
  				activetags.pop();
  				//Get active tags
  				$("div#search > .tag").each(function(index) {
  					activetags.push($(this).text());
  				});
  				$.each(data.combine, function(key, val) {
  					if(jQuery.inArray(val,activetags) > -1) {
						tags = tags + '<a class="tag tag'+key+' tag_active" title="' + val + '" href="">' + val + '</a>';
					} else {
    					tags = tags + '<a class="tag tag'+key+' tag_grey" title="' + val + '" href="">' + val + '</a>';
    				}
  				});
  				var media_box = $('<div class="media_item media_item_image owner_'+data.media_userid+'" id="media_'+media_id+'">loading...</div>');
  				media_box.css("width",210);
  				var media = media_box.html('<div class="media_content"><img width="'+ data.media_attr.thumb_width +'" height="'+ data.media_attr.thumb_height +'" alt="'+ data.media_title +'" title="'+ data.media_title +'" src="http://data.academieminerva.nl/'+ data.media_file_bw +'" /><h4>'+ data.media_title +'</h4><span class="text">'+ data.media_desc +'</span><span class="tags">'+ tags +'</span></div>');
  				//$('#result').append(media);
  				$.amy.globalMedia.push(media.get(0));
  			}
		});
    }
        
    function loadTags(tag) {
    	$('div#search').append('<a class="tag tag'+ tag.key_id +' tag_active" title="' + tag.key_name + '" href="#">' + tag.key_name + '</a>');
  		//$('.tag').corner("3px");
    }
    
    function split( val ) {
		return val.split( /,\s*/ );
	}
	function extractLast( term ) {
		return split( term ).pop();
	}

		$( "#search_input" )
		
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
						$( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
				
			})
			.autocomplete({
				source: function( request, response ) {
					var search = extractLast(request.term);
					$.getJSON( "http://portal.academieminerva.nl/api/search/suggest/"+search, response );
				},
				search: function() {
					// custom minLength
					var term = extractLast( this.value );
					if ( term.length < 1 ) {
						return false;
					}
				},
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.label );
					// add placeholder to get the comma-and-space at the end
					terms.push( "" );
					dataString = terms.join( " " );
					$.ajax({
  						url: encodeURI('http://portal.academieminerva.nl/api/search/keywords/0/50/image/' + dataString + tags),
  						dataType: 'json',
  						error: function(XMLHttpRequest, textStatus, data) { },
  						success: function(data, textStatus, XMLHttpRequest) {
  							resetPage();
  							$('div#search').html("");
  							$(data.keys).each(function() { loadTags(this); });
  							$(data.media).each(function() { 
  								if(this.media_type == "image") { loadMedia(this.media_id); }
  								if(this.media_type == "text") { loadText(this.media_id); }
  								if(this.media_type == "video") { loadVideo(this.media_id); }	
  							});
  							//returnMedia();
  						}	
				});
					this.value = terms.join( ", " );
					return false;
					
				}
			});
			
    $.fn.iniTags = function(requesttags) {
    	tags = requesttags;
		$.ajax({
  			url: encodeURI('http://portal.academieminerva.nl/api/search/keywords/0/50/image/' + tags),
  			dataType: 'json',
  			error: function(XMLHttpRequest, textStatus, data) { },
  			success: function(data, textStatus, XMLHttpRequest) {
  				$('div#search').html("");
  				$(data.keys).each(function() { loadTags(this); });
  				$(data.media).each(function() { 
  					if(this.media_type == "image") { loadMedia(this.media_id); }
  					if(this.media_type == "text") { loadText(this.media_id); }
  					if(this.media_type == "video") { loadVideo(this.media_id); }	
  				});
  			}
		});
		return true;
	}


    $.fn.loadStaticInfo = function() {
		$( "#static_info div.media_item" ).each(function() {
			$('#result').append( $(this) );
			//$('#result').append( $(this) ).masonry( { appendedContent: $(this) } , function() { });
		});
 	}
	
	

});
	
	//run masonry when window is resized
	$(window).resize(function() {
		//$('#result').removeData('masonry');
		//$('#result').masonry( { columnWidth: 250 } );
	});