/*
Listing JS pour Moto85
Copyright(c) 2009, Skalpel.

Author : Thanh Tri
thanh-tri@skalpel.fr

Note : 
	-
ToDo :
	- 
*/
var SkListing;
window.addEvent('domready', function() {
	//if ($('annonces')) SkListing = new SKjs.Listing();
});

SKjs.Listing = new Class ({
	Implements: [Events, Options],
	options: {
		elContTable: 	'listing-table',
		elContDiv:		'listing-vignettes',
		elsPagesT:		'.ptop a.page-ajax',
		elsPagesB:		'.pbottom a.page-ajax',
		elsTrisL:		'th a.tri-ajax',
		elsTris:		'li a.tri-ajax',
		activeCls:		SKjs.activeCls,
		activeClsL:		'sortActive',
		classL:			'sort'
	},
	
	/*
	Property :
		Initialisation de la Class
	*/
	initialize: function(options) {
		this.setOptions(options);
		
		this.dom = {};
		this.type = {};
		this.currentEl   = null;
		
		this.initType();
		this.initDom();
		this.initEvents();
	},
	
	initType: function() {
		this.type.type = $('annonces').get('class');
		if (this.type.type == 'annoncemoto')
			this.type.colspan = 8;
		else if (this.type.type == 'annoncepiece')
			this.type.colspan = 6;
		else if (this.type.type == 'annonceemploi')
			this.type.colspan = 5;
	},
	
	initDom: function() {
		if ($(this.options.elContTable))
			this.dom.elContainer	= $(this.options.elContTable);
		else if ($(this.options.elContDiv))
			this.dom.elContainer	= $(this.options.elContDiv);
		
		this.dom.elsPagesT			= $$(this.options.elsPagesT);
		this.dom.elsPagesB			= $$(this.options.elsPagesB);
		this.dom.elsTris			= $$(this.options.elsTris);
		this.dom.elsTrisL			= $$(this.options.elsTrisL);
		
		this.listType				= this.dom.elsTrisL.length > 0 ? 'liste' : 'vignette'
	},
	
	initEvents: function() {
		this.dom.elsTris.each(function(el) {
			el.addEvent('click', this.getListEvent.bindWithEvent(this, [el]));
		}, this);
		this.dom.elsTrisL.each(function(el) {
			el.addEvent('click', this.getListEvent.bindWithEvent(this, [el]));
		}, this);
		this.dom.elsPagesT.each(function(el) {
			el.addEvent('click', this.getListEvent.bindWithEvent(this, [el]));
		}, this);
		this.dom.elsPagesB.each(function(el) {
			el.addEvent('click', this.getListEvent.bindWithEvent(this, [el]));
		}, this);
	},
	
	initLoader: function(container) {
		var loader = new Element('span', {
			'id': 'imgLoader',
			'class': 'loader'
		});
		if (this.listType == 'liste') {
			var loaderImg = new Element('tr');
			var td = new Element('td', {'colspan': this.type.colspan, 'style': 'background: none;'}).inject(loaderImg);
			loader.inject(td);
		} else {
			var loaderImg = loader;
		}
		loaderImg.inject(container);
	},
	
	getListEvent: function(e, el) {
		e.stop();
		
		var href = el.get('href').split('/');
		var param = href[href.length - 2];
		
		this.currentEl = el;
		this.getListRequest(param);
	},
	
	getListRequest: function(params) {
		var JSONRequest = new Request.JSON({
			url: SKjs.loaderJSON,
			encoding: SKjs.encoding,
			
			onRequest: function() {
				this.dom.elContainer.empty();
				this.initLoader(this.dom.elContainer);
			}.bind(this),
			onComplete: function(response) {
				this.dom.elContainer.empty();
				this.createHTML(response);
			}.bind(this)
		}, this).send(
			JSON.encode({
				'group':  'listing', 
				'action': 'listing', 
				'params': params,
				'type': this.type.type
			})
		);	
	},
	
	createHTML: function(response) {
		if (typeof(response.newpages) != 'undefined') {
			this.currentNo = response.currentpage;
			this.dom.elsPagesT.getParent('li').removeClass(this.options.activeCls);
			this.dom.elsPagesB.getParent('li').removeClass(this.options.activeCls);
			this.refreshPages(response.newpages);
		}
		
		if (typeof(response.neworder) != 'undefined') {
			if (this.listType == 'liste') {
				this.dom.elsTrisL.getParent('th').removeClass(this.options.activeClsL);
				this.dom.elsTrisL.getParent('th').addClass(this.options.classL);
				this.currentEl.getParent('th').addClass(this.options.activeClsL);
			} else {
				this.dom.elsTris.getParent('li').removeClass(this.options.activeCls);
				this.currentEl.getParent('li').addClass(this.options.activeCls);
			}
			this.currentEl.set('href', response.neworder);
		}
		
		if (response.type == 'liste') {
			if (this.type.type == 'annoncemoto')
				this.createListTableMoto(response.list);
			else if (this.type.type == 'annoncepiece')
				this.createListTablePiece(response.list);
			else if (this.type.type == 'annonceemploi')
				this.createListTableEmploi(response.list);
		} else if (response.type == 'vignette') {
			if (this.type.type == 'annoncemoto')
				this.createListVignetteMoto(response.list);
			else if (this.type.type == 'annoncepiece')
				this.createListVignettePiece(response.list);
			else if (this.type.type == 'annonceemploi')
				this.createListVignetteEmploi(response.list);
		}
	},
	
	refreshPages: function(list) {
		list.each(function (el, i) {
			this.dom.elsPagesT[i].set('href', el['url']);
			this.dom.elsPagesT[i].set('html', el['no']);
			this.dom.elsPagesB[i].set('href', el['url']);
			this.dom.elsPagesB[i].set('html', el['no']);
			
			if (this.currentNo == this.dom.elsPagesT[i].get('html')) {
				this.dom.elsPagesT[i].getParent('li').addClass(this.options.activeCls);
				this.dom.elsPagesB[i].getParent('li').addClass(this.options.activeCls);
			}
		}, this);
	},
	
	/**
	 * MOTO - VIGNETTE
	 */
	createListVignetteMoto: function(list) {
		list.each(function (el) {
			var divAnnonce = new Element('div', {'class': 'annonce'}).inject(this.dom.elContainer);
			if (el['asaisir'] == 1)
				divAnnonce.addClass('saisir');
			
			var pMoto = new Element('p', {'class': 'moto'}).inject(divAnnonce);
				new Element('span', {
					'title': el['titreAnnonce'] + ' ' + el['modele'],
					'html': el['titreAnnonce']
				}).inject(pMoto);
				
			var divImg = new Element('div', {'class': 'img'}).inject(divAnnonce);
				var aImg = new Element('a', {'href': el['urlAnnonce'], 'title': el['nomMarque']+' '+el['modele']}).inject(divImg);
					new Element('img', {
						'src': el['imgAnnonce'],
						'alt': el['altImg'],
						'width': '112',
						'height': '80'
					}).inject(aImg);
					
			var divMisc = new Element('div', {'class': 'misc'}).inject(divAnnonce);
				new Element('p', {'class': 'origine', 'html': el['idProfessionnel'] != '0' ? 'Pro' : 'Part'}).inject(divMisc);
				new Element('p', {'class': 'prix', 'html': el['prix'] + ' €'}).inject(divMisc);
				
			var divDescription = new Element('div', {'class': 'description'}).inject(divAnnonce);
				new Element('p', {'html': el['kilometrage'] + ' km'}).inject(divDescription);
				new Element('p', {'html': el['dateAnnonce']}).inject(divDescription);
				new Element('p', {'html': 'Dép. ' + el['deptAnnonce']}).inject(divDescription);

			var divOptions = new Element('div', {'class': 'options'}).inject(divAnnonce);
				var pGarage = new Element('p', {'class': 'garage'}).inject(divOptions);
					new Element('a', {'href': el['urlGarage'], 'title': 'Ajouter à votre garage'}).inject(pGarage);
				var pDetail = new Element('p', {'class': 'detail'}).inject(divOptions);
					new Element('a', {'href': el['urlAnnonce'], 'title': 'Détails de l\'annonce'}).inject(pDetail);

		}, this);
		var divClear = new Element('div', {'class': 'clear'}).inject(this.dom.elContainer);
	},

	/**
	 * MOTO - TABLE
	 */
	createListTableMoto: function(list) {
		list.each(function (el) {
			var tr = new Element('tr').inject(this.dom.elContainer);
			if (el['asaisir'] == 1)
				tr.addClass('saisir');
			
			var tdDate = new Element('td', {'class': 'date'}).inject(tr);
				var pDetail = new Element('p', {'class': 'detail'}).inject(tdDate);
					new Element('a', {'href': el['urlAnnonce'], 'title': 'Détails de l\'annonce'}).inject(pDetail);
				var pGarage = new Element('p', {'class': 'garage'}).inject(tdDate);
					new Element('a', {'href': el['urlGarage'], 'title': 'Ajouter à votre garage'}).inject(pGarage);

			var tdMoto = new Element('td', {'class': 'moto'}).inject(tr);
				var aImg = new Element('a', {
					'href': el['urlAnnonce'],
					'title': el['nomMarque']+' '+el['modele'],
					'html': el['titreAnnonce']
	            }).inject(tdMoto);
					new Element('img', {
						'src': el['imgAnnonce'],
						'alt': el['altImg'],
						'width': '69',
						'height': '40'
					}).inject(aImg, 'top');

			new Element('td', {
				'class': 'type',
				'html': el['idProfessionnel'] != '0' ? 'Pro' : 'Part'
            }).inject(tr);
			new Element('td', {
				'class': 'prix',
				'html': el['prix'] + ' €'
			}).inject(tr);
			new Element('td', {
				'class': 'cylindree',
				'html': el['cylindree'] + ' cm3'
			}).inject(tr);
			new Element('td', {
				'class': 'annee',
				'html': el['dateAnnonce']
			}).inject(tr);
			new Element('td', {
				'class': 'km',
				'html': el['kilometrage'] + ' km'
			}).inject(tr);
			new Element('td', {
				'class': 'departement',
				'html': el['deptAnnonce']
			}).inject(tr);
		}, this);
	},

	/**
	 * PIECE - VIGNETTE
	 */
	createListVignettePiece: function(list) {
		list.each(function (el) {
			var divAnnonce = new Element('div', {'class': 'annonce'}).inject(this.dom.elContainer);
			if (el['asaisir'] == 1)
				divAnnonce.addClass('saisir');
			
			new Element('p', {
				'class': 'moto',
				'title': el['titre'],
				'html': el['titreAnnonce']
			}).inject(divAnnonce);
			
			var divImg = new Element('div', {'class': 'img'}).inject(divAnnonce);
				var aImg = new Element('a', {'href': el['urlAnnonce']}).inject(divImg);
					new Element('img', {
						'src': el['imgAnnonce'],
						'alt': el['altImg'],
						'width': '112',
						'height': '80'
					}).inject(aImg);
			
			var divMisc = new Element('div', {'class': 'misc'}).inject(divAnnonce);
				new Element('p', {'class': 'prix', 'html': el['prix'] + ' €'}).inject(divMisc);
			
			var divDescription = new Element('div', {'class': 'description'}).inject(divAnnonce);
				new Element('p', {'html': el['nomMarque']}).inject(divDescription);
				new Element('p', {'html': el['typeAnnonce']}).inject(divDescription);
				new Element('p', {'html': el['deptAnnonce']}).inject(divDescription);
			
			var divOptions = new Element('div', {'class': 'options'}).inject(divAnnonce);
				var pDetail = new Element('p', {'class': 'detail'}).inject(divOptions);
					new Element('a', {'href': el['urlAnnonce'], 'title': 'Détails de l\'annonce'}).inject(pDetail);
			
		}, this);
		var divClear = new Element('div', {'class': 'clear'}).inject(this.dom.elContainer);
	},

	/**
	 * PIECE - TABLE
	 */
	createListTablePiece: function(list) {
		list.each(function (el) {
			var tr = new Element('tr').inject(this.dom.elContainer);
			if (el['asaisir'] == 1)
				tr.addClass('saisir');
			
			var tdDate = new Element('td', {'class': 'date'}).inject(tr);
				var pDetail = new Element('p', {'class': 'detail'}).inject(tdDate);
					new Element('a', {'href': el['urlAnnonce'], 'title': 'Détails de l\'annonce'}).inject(pDetail);
			
			var tdMoto = new Element('td', {'class': 'moto'}).inject(tr);
				var aImg = new Element('a', {
					'href': el['urlAnnonce'],
					'title': el['titre'],
					'html': el['titreAnnonce']
				}).inject(tdMoto);
					new Element('img', {
						'src': el['imgAnnonce'],
						'alt': el['altImg'],
						'width': '69',
						'height': '40'
					}).inject(aImg, 'top');
			
			new Element('td', {
				'class': 'marque',
				'html': el['nomMarque']
			}).inject(tr);
			new Element('td', {
				'class': 'prix',
				'html': el['prix'] + ' €'
			}).inject(tr);
			new Element('td', {
				'class': 'typeP',
				'html': el['typeAnnonce']
			}).inject(tr);
			new Element('td', {
				'class': 'departement',
				'html': el['deptAnnonce']
			}).inject(tr);
		}, this);
	},
	
	/**
	 * EMPLOI - VIGNETTE
	 */
	createListVignetteEmploi: function(list) {
		list.each(function (el) {
			var divAnnonce = new Element('div', {'class': 'annonce'}).inject(this.dom.elContainer);
			
			new Element('p', {
				'class': 'moto',
				'title': el['typeAnnonce'] + ' ' + el['nomPoste'],
				'html': el['typeAnnonce'] + ' ' + el['titreAnnonce']
			}).inject(divAnnonce);
			
			var divImg = new Element('div', {'class': 'img'}).inject(divAnnonce);
				var aImg = new Element('a', {'href': el['urlAnnonce']}).inject(divImg);
					new Element('img', {
						'src': el['imgAnnonce'],
						'alt': el['altImg'],
						'width': '112',
						'height': '80'
					}).inject(aImg);
						
			var divDescription = new Element('div', {'class': 'description'}).inject(divAnnonce);
				new Element('p', {'html': 'Type de contrat : ' + el['nomcontrat']}).inject(divDescription);
				new Element('p', {'html': 'Département : ' + el['deptAnnonce']}).inject(divDescription);
			
			var divOptions = new Element('div', {'class': 'options'}).inject(divAnnonce);
		}, this);
		
		var divClear = new Element('div', {'class': 'clear'}).inject(this.dom.elContainer);
	},
	
	/**
	 * EMPLOI - TABLE
	 */
	createListTableEmploi: function(list) {
		list.each(function (el) {
			var tr = new Element('tr').inject(this.dom.elContainer);
						
			var tdMoto = new Element('td', {'class': 'moto'}).inject(tr);
				var aImg = new Element('a', {
					'href': el['urlAnnonce'],
					'title': el['typeAnnonce'] + ' ' + el['nomPoste'],
					'html': el['typeAnnonce'] + ' ' + el['titreAnnonce']
				}).inject(tdMoto);
					new Element('img', {
						'src': el['imgAnnonce'],
						'alt': el['altImg'],
						'width': '69',
						'height': '40'
					}).inject(aImg, 'top');
			
			new Element('td', {
				'class': 'contrat',
				'html': el['nomContrat']
			}).inject(tr);
			new Element('td', {
				'class': 'poste',
				'html': el['nomPoste']
			}).inject(tr);
			new Element('td', {
				'class': 'departement',
				'html': el['deptAnnonce']
			}).inject(tr);
			new Element('td', {
				'class': 'dateE',
				'html': el['dateAnnonce']
			}).inject(tr);
		}, this);
	}
});