document.addEventListener("DOMContentLoaded", function(event) { 

try{
	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"};

//var items_div = document.getElementsByClassName("main_right_div");
function DisplayItems(){

	items_length = items.length;

	for(i = 0; i<items_length; i++){
		item = document.createElement("div");
		item.classList.add("item");

		song_img = document.createElement("img");
		song_img.setAttribute('src', items[i].image);
		song_img.setAttribute('alt', 'song image');

		song = document.createElement("p");
		song.classList.add("song");

		singer = document.createElement("p");
		singer.classList.add("singer");

		song_name = document.createTextNode(items[i].song);
		singer_name = document.createTextNode(items[i].singer);
		song.appendChild(song_name);
		singer.appendChild(singer_name);

		element = document.getElementById("mainRightDiv");
		item.appendChild(song_img);
		item.appendChild(song);
		item.appendChild(singer);
		
		j = 0;
		for(j; j<items[i].positive_rating; j++){
			
			Rating_img = document.createElement("img");
			Rating_img.setAttribute('src', ratingImages.rating);
			Rating_img.setAttribute('alt', 'Rating image');
			anchor = document.createElement('a');
			anchor.setAttribute('class', 'rating');
			anchor.setAttribute('href', '#');

			anchor.appendChild(Rating_img);
			item.appendChild(anchor);
		}
		for(j; j<5; j++){
			Rating_img = document.createElement("img");
			Rating_img.setAttribute('src', ratingImages.no_rating);
			Rating_img.setAttribute('alt', 'No Rating image');
			
			anchor = document.createElement('a');
			anchor.setAttribute('class', 'rating');
			anchor.setAttribute('href', '#');

			anchor.appendChild(Rating_img);
			item.appendChild(anchor);
		}	
		oldItems = document.getElementsByClassName("item");
		if(oldItems[i]!=undefined){
			
			element.replaceChild(item, oldItems[i]);

		}
		else{
			element.appendChild(item);	
		}
		
	} 

}
// onload event Listner
window.addEventListener("load", DisplayItems);

// function to sort array on the basis of Artist Name

var ArtistSort = document.getElementById("ArtistClick");
if (ArtistSort.addEventListener) {
    ArtistSort.addEventListener("click", SortByArtist);
} else if (ArtistSort.attachEvent) {
    ArtistSort.attachEvent("onclick", SortByArtist);
}


function SortByArtist(){
	items.sort(function(a,b) {return (a.singer > b.singer) ? 1 : ((b.singer > a.singer) ? -1 : 0);} );
	DisplayItems();
}

// Sort by Ratings

var RatingSort = document.getElementById("RatingClick");
if (RatingSort.addEventListener) {
    RatingSort.addEventListener("click", SortByRatings);
} else if (RatingSort.attachEvent) {
    RatingSort.attachEvent("onclick", SortByRatings);
}

function SortByRatings(){
	items.sort(function(a,b) {return a.positive_rating - b.positive_rating;});
	DisplayItems();

}

// Seach By Artist Name 
Search = document.getElementById("SearchByArtistName");

Search.addEventListener('keyup',SearchByName);

function SearchByName(){
	
	ArtistNameArray = [];
	ParentDiv = document.createElement("div");
	//PresentItems = document.getElementsByClassName("item");
	
	n = 0;
	items_length = items.length;
	for(n = 0; n<items_length; n++){
		if(items[n].singer.toLowerCase().search(Search.value.toLowerCase())>=0){
			ArtistNameArray.push(items[n])
		}
	}

	if(ArtistNameArray.length===0){		
		tag = document.createElement("p");
		msg = document.createTextNode("No Result Found");
		tag.appendChild(msg);
		ParentDiv.appendChild(tag)
		document.getElementById("mainRightDiv").innerHTML = ParentDiv.innerHTML;
		console.log("NO RESULT");

	}
	else{

			for(n = 0; n<ArtistNameArray.length; n++){
				item = document.createElement("div");
				item.classList.add("item");

				song_img = document.createElement("img");
				song_img.setAttribute('src', ArtistNameArray[n].image);
				song_img.setAttribute('alt', 'song image');

				song = document.createElement("p");
				song.classList.add("song");

				singer = document.createElement("p");
				singer.classList.add("singer");

				song_name = document.createTextNode(ArtistNameArray[n].song);
				singer_name = document.createTextNode(ArtistNameArray[n].singer);
				song.appendChild(song_name);
				singer.appendChild(singer_name);

				element = document.getElementById("mainRightDiv");
				item.appendChild(song_img);
				item.appendChild(song);
				item.appendChild(singer);
				
				j = 0;
				for(j; j<ArtistNameArray[n].positive_rating; j++){
					
					Rating_img = document.createElement("img");
					Rating_img.setAttribute('src', ratingImages.rating);
					Rating_img.setAttribute('alt', 'Rating image');
					anchor = document.createElement('a');
					anchor.setAttribute('class', 'rating');
					anchor.setAttribute('href', '#');

					anchor.appendChild(Rating_img);
					item.appendChild(anchor);
				}
				for(j; j<5; j++){
					Rating_img = document.createElement("img");
					Rating_img.setAttribute('src', ratingImages.no_rating);
					Rating_img.setAttribute('alt', 'No Rating image');
					
					anchor = document.createElement('a');
					anchor.setAttribute('class', 'rating');
					anchor.setAttribute('href', '#');

					anchor.appendChild(Rating_img);
					item.appendChild(anchor);
				}

				ParentDiv.appendChild(item);	
			}
			console.log(ParentDiv);
			document.getElementById("mainRightDiv").innerHTML = ParentDiv.innerHTML;	

		}
	}

}
catch(err){
    alert(err);
}


});