FRJukebox = new Class({
	
	Implements: [Options, Events],

	options: {
		name:'',
		tabContentMap:{	0:2, 1:0, 2:6, 3:4, 4:3, 5:5 },
		startStyle:0,
		layout:0,
		nbResults:10,
		showHeader:1,
		showStylePicker:false,
		order:1
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.page   = 1
		this.order  = this.options.order
		this.clickSort("navhead-nav-tab_" + this.order)
		this.style  = this.options.startStyle
		this.query  = ''
		
		this.tabs = new MGFX.Tabs('#tabs li a', '#tabs-panel .feature');
		this.tabs.addEvent('onShowSlide', function(slideIndex) { 
			this.displayPanel(slideIndex) 
		}.bind(this) )
		this.slideIndex = this.tabs.options.startIndex
		
		this.slideIndex = 0
		this.showStylePicker = this.options.showStylePicker
		this.loadStyles()
		this.initHeader()
		this.displayPanel(this.slideIndex)
	},

	setStyle: function(style) {
		$("musicstyle_" + this.style).toggleClass('selected2')
		$("musicstyle_" + style).toggleClass('selected2')
		this.style=style
	},
	
	resetStyle: function() {
		this.setStyle(this.options.startStyle)
	},
	
	clickStyle: function(style) {
		this.fireEvent('onClickStyle', style);
		this.setStyle(style)
		this.gotoPage(1)
	},
	
	clickSort: function(id) {
		if (this.activeSortId != undefined )
			$(this.activeSortId).toggleClass('selected2')
		$(id).toggleClass('selected2')
		this.activeSortId = id
	},
	
	initHeader: function() {
		if ( !this.options.showHeader )
			return
		this.header = new Fx.Elements($$(".jukebox_header .jheader"), {duration: 1000, link: 'cancel'});
	},
	
	displayPanel : function(slideIndex_a) {
		this.content = this.options.tabContentMap[slideIndex_a]
		this.zone    = 'slide_' + slideIndex_a
		this.displayHeader(slideIndex_a)
		this.gotoPage(1)
	},

	displayHeader : function(slideIndex_a) {
		if ( ! this.options.showHeader )
			return
		var action = {};
		action[this.slideIndex] = {opacity:0}
		action[slideIndex_a] = {opacity:1}
		this.header.start(action)
		this.slideIndex = slideIndex_a
	},

	hideStyles: function() {
		$("navhead-nav-tab_2").set('text','Styles +')
		var action = {};
		action[0] = {height:0,
					opacity:0}
		this.tagCloud.start(action)
		//this.style = this.options.startStyle
	},
	
	showStyles: function() {
		$("navhead-nav-tab_2").set('text','Styles x')
		var action = {};
		action[0] = {height:110,
					opacity:1}
		this.tagCloud.start(action)
	},
	
	loadStyles: function() {
		
		dContent = this.content
		dZone    = this.zone;
		dOrder   = this.order;
		
		this.content=7
		this.order=0
		this.zone="stylePickerCanvas"
	
		var callback = this.options.name + ".initStyles()"
		this.displayContent(callback)
	
		this.order=dOrder
		this.zone=dZone
		this.content=dContent
	},

	initStyles: function() {

		$("musicstyle_" + this.options.startStyle).toggleClass("selected2")
		$$(".musicstyle").each( function(item) {
			r=new RegExp("([0-9]+$)","g")
			m=r.exec(item.id)
			var thisStyleID=m[0]

			item.addEvent("click", function() { 
				this.clickStyle(thisStyleID); 
				return false; 
			}.bind(this))
		}, this)
		
		this.tagCloud = new Fx.Elements($$(".tagCloud"), {duration: 300, link: 'cancel'});
		this.hideStyles()
	},
		
	initPagin: function() {
		$$("#slide_" + this.slideIndex + " .pagin").each( function(item) {
			item.addEvent("click", function() { 
				this.gotoPage(item.get('title')) 
				return false
			}.bind(this))
		}, this)
	},
	
	search: function(query) {
		this.query = query
		this.page  = 1
		this.displayContent()
	},
	
	closeStyles: function() {
		if ( this.showStylePicker ) {
			this.showStylePicker=false
			this.hideStyles()
		}
	},

	browse: function() {
		if ( this.showStylePicker ) {
			this.showStylePicker=false
			this.hideStyles()
			this.resetStyle()
			this.displayContent()
		} else {
			this.showStylePicker=true
			this.showStyles()
		}
	},

	recent: function(id) {
		this.clickSort(id)
		this.order = 2
		this.page  = 1
		this.displayContent()
	},

	popular: function(id) {
		this.clickSort(id)
		this.order = 1
		this.page  = 1
		this.displayContent()
	},
	
	gotoPage : function(page_a) {
		this.page=page_a
		this.displayContent()
	},
	
	displayContent: function(callback) {
		callback = (callback==undefined)?this.options.name + '.initPagin()':callback;
		target   = this.zone
		content  = 10 * this.content + this.order
		layoutID = this.options.layout
		styleID  = this.style
		pageNb   = this.page
		query    = this.query 
		nbResults= this.options.nbResults

		//console.log('recherche=' + query + '&tID='+content+'&sID=' + styleID + "&lID=" + layoutID + "&p=" + pageNb + "&nb=" + nbResults + " [target="+target+"]")
		ajaxCall('/rechercher.html','recherche=' + query + '&tID='+content+'&sID=' + styleID + "&lID=" + layoutID + "&p=" + pageNb + "&nb=" + nbResults, target, callback)
	}


});