var page7 = Class.create(abstractOrderPage, {
		
		initialize: function($super, container, controller){
			$super(container, controller);
			this.instID = 'page7.' + parseInt(Math.random()*1000000);
			this.somethingsPlaying = false;
		},
		
		start:function(){
			var wpsRPC = new wps.rpc;
			wpsRPC.debug=true;
			wpsRPC.createCall('order', this.drawMusic.bind(this));
			wpsRPC.call('getHoesjes', 'orderID='+this.controller.orderID);
		},
		
		drawMusic: function(req){
			var covers = req.responseJSON;
			if (!this.coverSelection){
				this.coverSelection = new Element('div', {className:'coverSelection', id:this.instID+"_covers"});
				$('coverSelect').insert(this.coverSelection);
				$A(covers).each(
					(function(obj){
						var div = new Element('div', {className:"coverRow"});
						div.cover = obj;
						div.coverSelected = false;
						$('coverSelect').insert(div);
						
						var check = new Element('div', {className:'coverRowCheck'});
						check.cover = obj;
						div.insert(check);
						
						var img = new Element('img', {src:'/upload/covers/'+obj.file, className:'coverPreview'});
						img.cover = obj;
						div.insert(img);
						
						check.observe('click', this.selectCover.bind(this));
						img.observe('click', this.selectCover.bind(this));
						if (obj.selected == "true"){
							this._selectCover(img);
						}
						
					}).bind(this)
				)
				this.errorDiv = new Element('div', {className:'error'});
				this.coverSelection.insert(this.errorDiv);
			}
		},
		
		selectCover : function(e){
			var elem = e.element();
			this._selectCover(elem);
		},
		
		_selectCover : function(elem){
			var cover = elem.cover;
			
			$$('.coverRowCheck').each(
				function(node){node.update('')}
			)
			$$('.coverRow').each(
				function(node){
					node = $(node);
					node.setStyle('background-color:#eee;color:#762137;');
					node.coverSelected = false;
				}
			)
			
			var parent = $(elem.parentNode);
			parent.setStyle('background-color:#8C7A89;color:white;');
			parent.coverSelected = true;
			parent.select('.coverRowCheck')[0].update('<img src="/images/check.png" class="check"/>');
			this.coverID = cover.id;
		},

		validate : function(){
			if (!this.coverID){
				this.errorDiv.update("Je hebt nog geen hoesje gekozen, selecteer a.u.b. een hoesje-muziekje");
				return false;
			}
			this.errorDiv.update("");
			return true;
		},
		
		save : function(callBack){
			var wpsRPC = new wps.rpc;
			wpsRPC.debug=true;
			wpsRPC.createCall('order', function(){});
			wpsRPC.call('updateOrder', 'orderID='+this.controller.orderID, 'ORDER_page_index='+ (this.controller.pageIdx), 'ORDER_cover_id='+ this.coverID);			
			callBack();
		}
	
	})