$(document).ready(function(){
	items = [];
	/*items = [
				{
					image: "images/1.png",
					song: "Jayanta Bhai ki Luv Saaa",
					singer: "Atif Aslam",
					positive_rating:3
				},

				{
					image: "images/2.png",
					song: "Twelve Ft Amrinder Gaaaa",
					singer: "Bilal Saeed (DjPunjab.Caaaaa",
					positive_rating:3
				},

				{
					image: "images/3.png",
					song: "The Lion of Punjab",
					singer: "Dilijit",
					positive_rating:3
				},

				{
					image: "images/4.png",
					song: "Khiladi 786",
					singer: "Himesh Remshammiya",
					positive_rating:3
				},

				{
					image: "images/5.png",
					song: "PTI Songs-PTITigersaaaa",
					singer: "PTITigers.com",
					positive_rating:3
				},

				{
					image: "images/2.png",
					song: "Stars Dance [TEH-SOaaaaa",
					singer: "Selena Gomez",
					positive_rating:3
				},

				{
					image: "images/6.png",
					song: "Bewafaa (2005)",
					singer: "Udit Narayan",
					positive_rating:3
				},

				{
					image: "images/7.png",
					song: "One Pound Fish (Remaaaa",
					singer: "$1 Fish Man",
					positive_rating:3
				},

				{
					image: "images/2.png",
					song: "Unknown Album",
					singer: "Unknown Artist",
					positive_rating:3
				}

		];
*/
	ratingImages = {rating:"images/star.png",
				no_rating:"images/star2.png"};
	
	// get data from database through ajax
	$.ajax({
        type:'GET',
        url: '/Assignments/get.php',
        success: function (data){
        items = JSON.parse(data);
		//console.log(items);        
        DisplayItems(items);
        }
	});

 	var DisplayItems = function (items){
 	var item = "";
	var SubItem = "";
	var i = 0;
	var j = 0;
	for (i = 0; i<items.length; i++){
		item += "<div class='item'>" + "<div class='dropdown'>" + "<img src=" + items[i].image + " alt='Song image'>" + "<div class='dropdown-content'><a href='#' class = 'UpdateItems' value = '" + items[i].id + "' data-toggle='modal'   data-target= '#ItemModel'>" + "Update" + "</a><a href='#' class = 'DeleteItem' value = '" + items[i].id + "'>" + "Delete" + "</a></div></div>" +
				"<p class='song' id = 'song_name'>" + items[i].song + "</p>"+
				"<p class='singer'>" + items[i].singer + "</p>";
				
				for(j = 0; j<items[i].positive_rating; j++ ){
					SubItem += "<a href='#'><img src=" + ratingImages.rating + " alt='star rated' class = 'rating'></a>";
				}

				for(j; j < 5; j++){
					SubItem += "<a href='#'><img src=" + ratingImages.no_rating + " alt='star un rated' class = 'rating'></a>";
				}
		item += SubItem;
		SubItem = "";
		item += "</div>";
	}
	$("#mainRightDiv").html(item);	
 }
 
 //DisplayItems();

 	// Sort By Singer Name
 	$("#ArtistClick").click(function(){
		items.sort(function(a,b) {return (a.singer > b.singer) ? 1 : ((b.singer > a.singer) ? -1 : 0);} );
		$("#mainRightDiv").empty();
		DisplayItems(items);
	});

 	// Sort By Ratings
	$("#RatingClick").click(function(){
		items.sort(function(a,b) {return b.positive_rating - a.positive_rating;});
		$("#mainRightDiv").empty();
		DisplayItems(items);
	});

	// Sort By Albums
	// Ascending
 	$('body').on('click', '.AssItem',function () {
	
		$(this).click(function(){
			items.sort(function(a,b) {return (a.song > b.song) ? 1 : ((b.song > a.song) ? -1 : 0);} );
			$("#mainRightDiv").empty();
			DisplayItems(items);
		});

	});

	// Descending
 	$('body').on('click', '.DessItem',function () {
	
		$(this).click(function(){
			items.sort(function(a,b) {return (a.song > b.song) ? -1 : ((b.song > a.song) ? 1 : 0);} );
			$("#mainRightDiv").empty();
			DisplayItems(items);
		});

	});

	// Search By Singer Name
	$("#SearchByArtistName").keyup(function(){
		SearchValue = $(this).val();
		
		var item = "";
		var SubItem = "";
		ArtistNameArray = [];
		n = 0;
		items_length = items.length;
		for(n = 0; n<items_length; n++){
			if(items[n].singer.toLowerCase().search(SearchValue.toLowerCase())>=0){
				ArtistNameArray.push(items[n])
			}
		}

		if(ArtistNameArray.length===0){		
			tag = "<div> <p> " + "No Result Found" + " </p></div>";
			$("#mainRightDiv").html(tag);
		}
		else{
				item = "";
				for(n = 0; n<ArtistNameArray.length; n++){
					
					item += "<div class='item'>" + "<img src=" + ArtistNameArray[n].image + " alt='Song image'>" +
					"<p class='song'>" + ArtistNameArray[n].song + "</p>"+
					"<p class='singer'>" + ArtistNameArray[n].singer + "</p>";
					
					for(j = 0; j<ArtistNameArray[n].positive_rating; j++ ){
						SubItem += "<a href='#'><img src=" + ratingImages.rating + " alt='star rated' class = 'rating'></a>";
					}

					for(j; j < 5; j++){
						SubItem += "<a href='#'><img src=" + ratingImages.no_rating + " alt='star un rated' class = 'rating'></a>";
					}
					item += SubItem;
					SubItem = "";
					item += "</div>";	
				}

				//console.log(item);
				$('#mainRightDiv').html(item);

			}
	});
	

// data inserted
$('#item_form').on('submit', function (e) {
		console.log('here');
          e.preventDefault();
          data = new FormData(document.getElementById('item_form'));
          $.ajax({
	            type: 'POST',
	            url: '/Assignments/database.php',
	            data: data,
	            cache: false,
	            processData: false,
    			contentType: false,
	            success: function (info) {
	            	document.getElementById("item_form").reset();
	            	$.ajax({
				        type:'GET',
				        url: '/Assignments/get.php',
				        success: function (data){
				        items = JSON.parse(data);
						console.log('Second ajax');        
				        DisplayItems(items);
				        }
					});
	            	alert(info);
	            	
	            }
	        });
          

        });
// update items

	$('body').on('click', '.UpdateItems',function () {
		id = $(this).attr('value');
		$.ajax({
	        type:'POST',
        	url: '/Assignments/get.php',
	        data:{'id':id},
	        datatype: 'JSON',
	        success: function (data){
	        	item = JSON.parse(data);
	        	$('#song_id_item').val(item['id']);
				$('#song_name_item').val(item['song']);        
				$('#singer_name_item').val(item['singer']);
				$('#song_image_item').html(item['image']);        
				$('#ratings').val(item['positive_rating']);        
	        }
		});

	});

	// Delete item
	$('body').on('click', '.DeleteItem',function () {
		id = $(this).attr('value');
		action = "Delete";
		if(confirm('Are you sure you want to delete this?')){
			$.ajax({
		        type:'POST',
	        	url: '/Assignments/database.php',
		        data:{'id':id, 'action':action},
		        success: function (info){
		        	$.ajax({
				        type:'GET',
				        url: '/Assignments/get.php',
				        success: function (data){
				        items = JSON.parse(data);
						console.log('second ajax');        
				        DisplayItems(items);
				        }
					});
		        	alert(info);
		        }
			});	
			
		}
		

	});



});