// JavaScript Document

// Artist list ajax loading
function ListSwitcher(arg){ 
	var baseURL = arg;
	var holder = $('listHolder');
	
	
	
	var setColumns = function(){
		var lists = $('column1').getChildren('li.list');
		
		total_items = 0;
		
		lists.each(function (el, i) {
			total_items += el.getChildren('ul.subListArtists').getChildren('li')[0].length;
			
//			console.log (el.getChildren('ul.subListArtists').getChildren('li')[0].length);
		});
		
//		console.log ('total items :: '+total_items);
		
		
		lists.each(function (el, i) {
			el.weight = Math.round((el.getChildren('ul.subListArtists').getChildren('li')[0].length / total_items) *100);
			//console.log (el.weight);
		});
			
		var total_lists = lists.length;
		
		var step = Math.ceil(total_lists/3);
		var columns = [$('column1'), $('column2'), $('column3')];
		var count = 0;
		var weight_count = 0;
		var current = 0;
		var weight_step = 34;
		
		//console.log (totalLists);
		
		for (var i = 0; i<total_lists; i++) {
			
			if (weight_count < weight_step) {
				//console.log (weight_count);
				weight_count += lists[i].weight;
				columns[current].grab(lists[i]);
			}else {
				weight_count = 0;
				current +=1;
				weight_count += lists[i].weight;
				columns[current].grab(lists[i]);
			}
		}
		
	/*
		for (var i = 0; i<5; i++) {
			columns[0].grab(lists[i]);
		}
		
		for (var i = 5; i<8; i++) {
			columns[1].grab(lists[i]);
		}
		
		for (var i = 8; i<11; i++) {
			columns[2].grab(lists[i]);
		}
	*/	
	
	}
	
	//make the ajax call to get the artist listing
	var request = new Request({
		url: arg,
		method: 'post',
		onRequest: function() {
			holder.set('html', '');
			var spinner = new Element('span', {'class': 'spinner', 'style' : {'opacity': 0}}).injectInside (holder);
			spinner.morph({'opacity': 1});
		},
		onComplete: function(response) {
			holder.set('html', '');
			holder.setStyle('opacity', '0');
			holder.set('html', response);
			holder.morph({'opacity': 1});
			Cufon.replace('h5');
			setColumns ();
		},
		onSuccess: function() {
			
		},
		onFailure: function() {
		}
	});
	
	$('viewByAlphabet').addEvent('click', function(event) {
		//stop regular form submission
		event.preventDefault();
		href = baseURL+'ajx_list_by_alphabet';
		request.send({url: href});
		
		$('viewByStyle').removeClass('active');
		event.target.addClass('active');
	});
	
	$('viewByStyle').addEvent('click', function(event) {
		//stop regular form submission
		event.preventDefault();
		href = baseURL+'ajx_list_by_style';
		request.send({url: href});
		
		$('viewByAlphabet').removeClass('active');
		event.target.addClass('active');
	});
	
	href = baseURL+'ajx_list_by_style';
	request.send({url: href});
	
	$('viewByAlphabet').removeClass('active');
	$('viewByStyle').addClass('active');
	
}

// Zebra striping
function Zebra(id){
	var items = $(id).getChildren('li');
	//console.log (items);
	
	items.each(function (el, i) {
		if ((i % 2) !== 0) {
			el.addClass('even');
		}else {
			el.addClass('uneven');
		}
	});
};


/*
// Footer position
Layout = {};
Layout.setSize = function () {
	var main = $('main');
	var contentSize = $('main').getSize().y + $('header').getSize().y + $('megabannerAd').getSize().y + $('footerWrap').getSize().y;
	if (window.getScrollSize().y > contentSize) {
		var curr = main.getSize().y + window.getScrollSize().y - contentSize;
		main.setStyle('height', curr);
	}
}
*/


var Login = {};
Login.set = function(logged) {
	var overlay = new Overlay(document.body,{
		id: 'overlay',
		color: '#000',
		duration: 300,
		opacity: 0.9
	});
	
	var fch = $$('div#loginContent');
	var loginHtml = fch.get('html');
	fch.set('html', '');
	
	var showModal = function() {
		if ($$('div.modal').length === 0) {
			var e = new Element('div', {'class': 'modal', 'html': loginHtml}).injectInside (document.body);
			new Element ('a', {'id': 'btnClose', 'href': '#', 'html' : 'Fermer'}).addEvent('click', function(){overlay.close()}).injectInside(e);
			e.setStyles({
				'top': ((window.getSize().y - e.getSize().y) / 2) - (e.getSize().y / 2),
				'left': ((window.getSize().x - e.getSize().x) / 2)
			})
		}else {
			var e = $$('div.modal');
		}
		$('submit-login').set('morph', {duration: 'short', link:'chain'});
		
		$('submit-login').addEvent('click', function(event){
			//console.log ('logging in ');
			
			event.preventDefault();
			
			var login_request = new Request({
				url: $('loginForm').get('action'),
				method: 'post',
				data : {
					'email' : $('email').value,
					'pwd' : $('pwd').value
				},
				onRequest: function() {
					$('loginForm').morph({'opacity': 0.35});
					$('submit-login').morph({'opacity': 0.1});
				},
				onComplete: function(response) {
					if (response !== 'false') {
						location.reload(true);
					}else {
						alert ('veuillez vérifier votre identifiant et / ou mot de passe');
						$('submit-login').morph({'opacity': 1});
						$('loginForm').morph({'opacity': 1});
					}
				},
				onSuccess: function() {
				},
				onFailure: function() {
				}
			}).send();
			
		});
		
		return e;
	};
	
	var closeModal = function() {
		overlay.close();
		showModal().destroy();
	};
	
	overlay.addEvent ('onShow', showModal);
	overlay.addEvent ('onClick', closeModal);
	overlay.addEvent ('onHide', closeModal);
	
	
	if (logged === 'FALSE') {
		//console.log ('hamid');
		$('nav-account').addEvent('click',function(e){
			e.stop();
			overlay.open();
		})
		
		/*
		$('footer-login').addEvent('click',function(e){
			e.stop();
			overlay.open();
		})
		*/
	}
};

function setLogin (logged) {
	
	var overlay = new Overlay(document.body,{
		id: 'overlay',
		color: '#000',
		duration: 300,
		opacity: 0.9
	});
	
	var fch = $$('div#loginContent');
	var loginHtml = fch.get('html');
	fch.set('html', '');
	
	var showModal = function() {
		if ($$('div.modal').length === 0) {
			var e = new Element('div', {'class': 'modal', 'html': loginHtml}).injectInside (document.body);
			new Element ('a', {'id': 'btnClose', 'href': '#', 'html' : 'Fermer'}).addEvent('click', function(){overlay.close()}).injectInside(e);
			e.setStyles({
				'top': ((window.getSize().y - e.getSize().y) / 2) - (e.getSize().y / 2),
				'left': ((window.getSize().x - e.getSize().x) / 2)
			})
		}else {
			var e = $$('div.modal');
		}
		$('submit-login').set('morph', {duration: 'short', link:'chain'});
		
		$('submit-login').addEvent('click', function(event){
			//console.log ('logging in ');
			
			event.preventDefault();
			
			var login_request = new Request({
				url: $('loginForm').get('action'),
				method: 'post',
				data : {
					'email' : $('email').value,
					'pwd' : $('pwd').value
				},
				onRequest: function() {
					$('loginForm').morph({'opacity': 0.35});
					$('submit-login').morph({'opacity': 0.1});
				},
				onComplete: function(response) {
					if (response !== 'false') {
						location.reload(true);
					}else {
						alert ('veuillez vérifier votre identifiant et / ou mot de passe');
						$('submit-login').morph({'opacity': 1});
						$('loginForm').morph({'opacity': 1});
					}
				},
				onSuccess: function() {
				},
				onFailure: function() {
				}
			}).send();
			
		});
		
		return e;
	};
	
	var closeModal = function() {
		overlay.close();
		showModal().destroy();
	};
	
	overlay.addEvent ('onShow', showModal);
	overlay.addEvent ('onClick', closeModal);
	overlay.addEvent ('onHide', closeModal);
	
	
	if (logged === 'FALSE') {
		//console.log ('hamid');
		$('nav-account').addEvent('click',function(e){
			e.stop();
			overlay.open();
		});
	}
};



var Search = {};
Search.set = function (base_url, artists_url, search_url) {
	var holder = new Element ('div', {'id': 'searchSuggestions'});
			
	var spinner = new Element('img', {'src' : base_url+'imgs/spinner-small.gif'});
	spinner.setStyles({
		'position': 'absolute',
		'z-index': 1002,
		'top': 8,
		'left': 4
	});
	
	var viewSuggestions = function(results) {
		holder.setStyle('opacity', 0);
		holder.set('html', '');
		holder.injectInside(document.body);
		holder.setStyle('top', $('inputSearch').getPosition().y + $('inputSearch').getSize().y);
		holder.setStyle('left', $('inputSearch').getPosition().x);
		holder.morph({'opacity': 1});
		spinner.dispose();
		results.each(function(res) {
			html = '<img alt="img" src="'+base_url+'uploads/thumbs/'+res.id+'_thumb.jpg"/><span>'+res.name+'</span><hr class="clear" />';
			var nameSeo = (res.name).replace(/\s/, '-');
			var anchor = new Element ('a', {'class': 'suggestion', 'href': 'http://www.maroczik.com/'+nameSeo+'__'+res.id+'.html','html': html}).injectInside(holder);
		});
				
		holder.addEvent('blur', function(event) {
			holder.dispose();
		})
	};
	
	$('inputSearch').addEvent('keyup', function(event) {
		if (event.key != 'up' && event.key != 'down' && event.key != 'left' && event.key != 'right') {
			if (this.value.length >= 1) {
				var request = new Request.JSON({
					url: search_url,
					onRequest: function() {
						spinner.injectInside($('searchForm'));
					},
					onComplete: function(jsonObj) {
						viewSuggestions(jsonObj.results);
					}
				}).send({
					data :{
						'inputSearch' : $('inputSearch').value
					}
				})
			}else {
				holder.dispose();
			}
		}
	});
	
	$$('#inputSearchArtist').each(function(champ, i){	
		var holder2 = new Element ('div', {'id': 'searchSuggestions2'});
				
		var spinner2 = new Element('img', {'src' : base_url+'imgs/spinner-small.gif'});
		spinner2.setStyles({
			'position': 'absolute',
			'z-index': 1005,
			'top': 8,
			'left': 4
		});
		
		var viewSuggestions2 = function(results) {
			holder2.setStyle('opacity', 0);
			holder2.set('html', '');
			holder2.injectInside(document.body);
			holder2.setStyle('top', champ.getPosition().y + champ.getSize().y);
			holder2.setStyle('left', champ.getPosition().x);
			holder2.morph({'opacity': 1});
			spinner2.dispose();
			results.each(function(res) {
				html = '<img alt="img" src="'+base_url+'uploads/thumbs/'+res.id+'_thumb.jpg"/><span>'+res.name+'</span><hr class="clear" />';
				var nameSeo = (res.name).replace(/\s/, '-');
				var anchor = new Element ('a', {'class': 'suggestion', 'href': 'http://www.maroczik.com/'+nameSeo+'__'+res.id+'.html','html': html}).injectInside(holder2);
			});
					
			holder2.addEvent('blur', function(event) {
				holder2.dispose();
			})
		};
	
	
		champ.addEvent('keyup', function(event) {
			if (event.key != 'up' && event.key != 'down' && event.key != 'left' && event.key != 'right') {
				if (this.value.length >= 1) {
					var request = new Request.JSON({
						url: search_url,
						onRequest: function() {
							spinner2.injectInside(champ);
						},
						onComplete: function(jsonObj) {
							viewSuggestions2(jsonObj.results);
						}
					}).send({
						data :{
							'inputSearch' : champ.value
						}
					})
				}else {
					holder2.dispose();
				}
			}
		});
	});
}

function searchTip() {
	var stvc = Cookie.read('stipviewcount');

	if (!stvc || stvc != '2') {
		
		if (stvc == '1') {
			Cookie.write('stipviewcount', '2', {duration: 1});
		}
		if (!stvc) {
			Cookie.write('stipviewcount', '1', {duration: 1});
		}
	
		var msg = new Element ('div', {
			'id'	: 'sTip',
			'html' 	: 'Bienvenue sur MarocZik.com V2, veullez utiliser ce champ de recherche pour trouver vos artistes pr&eacute;fer&eacute;s',
			'styles': {
				'top' : $('inputSearch').getPosition().y + $('inputSearch').getSize().y,
				'left' : $('inputSearch').getPosition().x - 120,
				'opacity': 0
				},
			'events': {
				'click' : function(evt){
				//	evt.preventDefault();
				//	msg.nix(true);
				}
				
			}
		});
		
		msg.injectInside(document.body);
		msg.set('morph', {link: 'chain'});
		msg.morph({'opacity': 1}).morph({'opacity': 0.25}).morph({'opacity': 1}).morph({'opacity': 0.25}).morph({'opacity': 1}).morph({'opacity': 0.25}).morph({'opacity': 1});
	
	}
}

window.addEvent('domready', function() {
	var searchfield = $('inputSearch');
	searchfield.set('value', "Tapez le nom d'un chanteur")
	searchfield.addEvents({
		'focus': function(evt) {
			if ($('sTip')){
				$('sTip').nix(true);
			}
			
			if (evt.target.value == "Tapez le nom d'un chanteur"){
				evt.target.set('value', '');
			}			
		},
		'blur': function(event) {
			
			if (event.target.value == ""){
				event.target.set('value', "Tapez le nom d'un chanteur");
			}			
		}
	});
});