/* JQuery */
			$( function() {
				
				/*
				$.ajax({
					type: "PUT",
					url: "api/user/bookmarks/",
					data: { trackid: 12345, whatever:"lslsls" },
					dataType: "html", // for the response! 
					success: function(a,b,c){
						alert(a);
					},
					error : function(a,b,c){
						// console.log(a);
						// console.log(b);
						// console.log(c);
					}
				});
				*/
				
				// --------------------------------------------------------------------------------------------
				// append preview element
				$("body").append('<div id="preview"><img></div>');
				var preview = $("#preview");
				var previewimage = $("#preview img");
				var preload = new Image();
				
				preview
					.click(
						function () {
							var f1 = window.open( 
								$(this).attr("itunes"), 
								"_blank"
							);
						}
					)
					.hover(
						function ( event ) {
						},
						function ( event ) {
							$(this)
								.css({ 
									display: "none" 
								});
						}
					);
				
				// Hover effect on tr ---------------------------------------------------------
				$("table.tablesorter tr")
					.hover(
						function ( event ) {
							event.stopPropagation();
							$(this).addClass("mouseover");
							
							/* load preview */
							var 	that = $(this);				// keep this
							//	preload = new Image();		// image container for pre-loading
							
							preload.onload = function () { 	// re-define onload event first
								
								preview
									.css({ 
										top: that.offset().top+(that.height()/2) - 60, 	
										left: that.offset().left-20,
										cursor: 'pointer',
										display: "block" 
									})
									.attr({ 
											itunes: $(that).find("a.itunes").attr("href")
									});
								previewimage
									.attr({ 
										src : preload.src 
									});
								
							};
							// then load it
							preload.src = $(this).attr("artwork"); // load image 
							
							
						},
						function ( event ) {
							// event.stopPropagation();
							
							$(this).removeClass("mouseover");
							
						}
					)
				
				// Change dt according to hover effect and fetch click ----------- 
				$("table.tablesorter tr td.active")
					.css ({ "cursor":"pointer" })
					.click(
						function ( event ) {
							event.preventDefault();
							// fetch the link from track
							var f1 = window.open( 
								$(this).parent().find("a.itunes").attr("href"), 
								"_blank"
							);
						}
					)
				
				
				// API calls
				// set bookmarks -------------------------------------------------------------------------
				$("td img[addbookmark][url]")
					.css ({ "cursor":"pointer" })
					.one( "click",
						function (e){
							var that = this;
							$.ajax({
								type: "POST",
								url: "api/user/bookmarks/",
								data: { url: $(that).attr("url") },
								dataType: "html", // for the response! 
								success: function(a,b,c){
									$(that)
										.attr({ src: "css/img/inmyq_high.gif" })
										.one( "click",
											function (e){
												window.location = "my_qurelo.html";
											}
										);
								},
								error : function(a,b,c){
									/*
									console.log(a);
									console.log(b);
									console.log(c);
									*/
								}
							});
						}
					);
					
				// remove bookmarks	
				$("td img[removebookmark][bookmarkid]")
					.css ({ "cursor":"pointer" })
					.one( "click",
						function (e){
							var that = this;
							$.ajax({
								type: "DELETE",
								url: "api/user/bookmarks/"+$(that).attr("bookmarkid"),
								dataType: "html", // for the response! 
								success: function(){
									$(that).parent().parent().hide();
									// window.location = "my_qurelo.html";
								}
							});
						}
					);
				
				// only a bookmark
				$("td img[jumpbookmark][bookmarkid]")
					.css ({ "cursor":"pointer" })
					.one( "click",
						function (e){
							window.location = "my_qurelo.html";
						}
					);
				
				
				/*******************************************
					QUICKFIND
				
				**********************************************/
				
				// create a hovering select-area just below the input field
				$("body").append('<div id="quickfind">quickfind</div>');
				var quickfindbox = $("#quickfind");
				// console.log(quickfindbox.offset());
				quickfindbox.css({
					left: $("input#find").offset().left,
					top: $("input#find").offset().top + $("input#find").height()+5
				});
				quickfindbox.hide();
				
				var request_find = {   						// keep only ONE object for quickfind (keeping 1 ajax request object)
						input: "",								// store internal initial input value
						sentTime: 0,								// time at the last keyup event
						line: 0									// highlightet line number
				};
				
				
				// On Submit 
				$("form[name='find']").submit( function () { 
					if( request_find.line!=0 ){
						$("input#find").val(
							$( "div:eq(" + (request_find.line-1) + ")", quickfindbox ).text()
						);
					}
					
					// alert("!");
					// return false;
				});
				
				$("input#find")
					/*
					.bind( 'keypress', function (e) {
						console.log( e.which );	
						
					})
					*/
					
					.bind( 'keyup', function (e){
						
						var that = this;	// keep that input-element for further use inside
						
						//  console.log("event: keyup");
						
						// handle up & down key events
						if ( e.keyCode == 40 || e.keyCode == 38 ){ // DOWN
							
							var results = $( "div", quickfindbox );
							
							if ( e.keyCode == 40 && request_find.line < results.length ) request_find.line++;
							else if( e.keyCode == 38 && request_find.line > 1 ) request_find.line--;
							
							// highlight selection
							results.css({
									"background-color": "transparent",
									"color": "333333"
								});
							
							$( "div:eq(" + (request_find.line-1) + ")", quickfindbox )
								.css({
									"background-color": "#009ee0",
									"color": "ffffff"
								});
						};
						
						
						// only if the request has really changed, which does not happen on every keyup
						if ( $(that).val() != request_find.input ){
						
							request_find.line = 0;	// reset internal line pointer
							
							quickfindbox.hide();
							
							// abort the possible running request
							if( typeof request_find.ajax == "object") request_find.ajax.abort();	
							
							// cancel the possible previously timed request
							window.clearTimeout( request_find.timer );
							
							// console.log("sendrequest later");
							
							// Send the new Request "later" ---------------------------------------
							request_find.timer = window.setTimeout( function (){
								
								// console.log("sendrequest");
								
								request_find.sentTime = new Date();
								
								
								// store new value
								request_find.input = $(that).val();
								
								
								// send request to server
								request_find.ajax = $.ajax({
									type: "GET",
									url: "api/find/" + request_find.input,
									dataType: "html", // for the response! 
									success: function(a){
										// fetch result
										// console.log(a);
										var result = JSON.parse(a) 
										// console.log(result);
										var newhtml = "";
										
										// cancel the process if no results heve been returned
										if ( result.length == 0 ) {
											quickfindbox.hide();
											return;
										}
										
										// create and write new content
										for ( var i in result ){
											newhtml+="<div>" + result[i] + "</div>"
										}
										quickfindbox.html( newhtml );
										
										// show content
										quickfindbox.show();
										
										// activate new content divs
										$("#quickfind div")
											.hover(
												function (){
													$( "div", quickfindbox ).css({
															"background-color": "transparent",
															"color": "333333"
													});
													
													$(this).css({
															"background-color": "#009ee0",
															"color": "ffffff"
													});
												
												},
												function (){
													/*
													$(this).css({ 
														"background-color": "transparent",
														"color": "333333"
													});
													*/
												}
											)
											.one("click",
												function () {
													// stop timeout from bluring the input value (by clicking on a result)
													window.clearTimeout( request_find.timer )
													request_find.timer = undefined;
													
													// fetch value
													var value =  $(this).html();
													
													quickfindbox.hide();
											
													// set value to inputfield
													$("input#find").val( value );
	
													// submit form
													document.find.submit();
												}
												
											);
										
											
									},
									error : function(a,b,c){
										// console.log(a);
										// console.log(b);
										// console.log(c);
									}
								});
							}, 250 );
						};	
					})
					
					
					.blur( function (){
						request_find.timer = window.setTimeout( 
							function () {
								quickfindbox.hide();
							}
							,200 
						);
					});
				
					
					
					
				
				// a) init Tablesorter (jquery plugin)  ------------------------------------------ 
				 $.tablesorter.addParser({ 
					// set a unique id 
					id: 'price', 
					is: function(s) { 
						return false; 	// return false so this parser is not auto detected 
					}, 
					format: function(s) { 
						return parseFloat(s); 
					}, 
					// set type, either numeric or text 
					type: 'numeric' 
				}); 
				
				// b) config Tablesorter columns
				$(".tablesorter").tablesorter({
					headers: {
							4:{
								sorter: 'price' 	
							},
							6:{
								sorter: 'price' 	
							},
							7: {
								sorter: false		
							},
							8: {
								sorter: false		
							}
						} 
					
				});
				
				// focus cursor to input field on load
			 	document.find.find.focus();

				
			});