var mtAPTemplate = new Class({
	Implements : [Options,GetterSetter,Events],
	options 	  : {
        	/*onSkinChange : $empty(), */
			"css-dir"       : "/css/",
			"js-dir"        : "/js/",
			"js-assets"     : ["Inject-nc.js","IdleTimer.js","AudioCheck-nc.js","mtAudioPlayer-nc.js","mtAudioPlayerUI-nc.js","mtAudioPlaylist-nc.js"],
			"class"	        : "mtAPTemplate",
        	"id"            : "mtAPTemplate",
        	skin            : null,
        	suffix          : null

	},
	assets      : { "css" : [], "js" :  [] },
	loading_cnt : 0,
	name		: "mtap-template",
	toElement	: function(){ return this.el; },
	initialize	: function(ops){
			this.setOptions(ops);
			this.el  = new Element('div', 
			                        {   id : this.options.id ? this.options.id : this.name+ Math.floor(Math.random()*1000000000).toString(16), 
			                            "class" : this.options["class"] 
			                        });

            this.assets.js = this.options["js-assets"];
            
			var l = this.options["css-dir"].length;
			if(l && l - 1 > this.options["css-dir"].lastIndexOf("/"))
			    this.options["css-dir"] += "/";
			
			this.initAssets();
	},
	changeSkin  : function(skin){
        this.loadSkin(skin, function(){ $(this.options.id+"-skin").dispose(); this.fireEvent("skinChange"); }.bind(this));
	    
	    return this;
	},
	loadSkin    : function(skin, func){
        skin_dir = skin ? skin + "/" : "";
        suffix   = this.options.suffix ? this.options.suffix + ".css" : ".css"

	    new Element("link",  {      href    : this.options["css-dir"] + this.options.id + "/" + skin_dir + this.options.id + suffix, 
                                    media   : "screen", type : "text/css", rel : "stylesheet", id : this.options.id + "-skin",
                                    events  : { load : func.attempt(this) } 
                                }).inject(document.head);
	    return this;
	},
	initAssets  : function(){
            skin_dir = this.options.skin ? this.options.skin + "/" : "";
	        suffix   = this.options.suffix ? this.options.suffix + ".css" : ".css"
	        this.assets["css"].push(new Element("link", 
	                                {   href : this.options["css-dir"] + this.options.id + "/" + skin_dir + this.options.id + suffix, 
	                                    media : "screen", type : "text/css", rel : "stylesheet", id : this.options.id + "-skin" }));

            var my = this;

            my.loading_cnt = this.assets["js"].length;
	        jsaElems = [];
	        this.assets["js"].each(function(c){
	            jsaElems.push(new Element("script", { src : my.options["js-dir"]+c, type : "text/javascript", 
	                                                  events : { load : function(){  
	                                                                  my.loading_cnt--; 
	                                                                  if(my.loading_cnt <= 0) {
	                                                                      my.fireEvent("ready")
	                                                                  } else {
	                                                                      my.loadNextJS();
	                                                                  }
	                                                                        
	                                                              } } 
	                                                 } ));
	        });    
	        this.assets["js"] = jsaElems;
	},
    loadAssets  : function(){
        this.assets["css"].each(function(c){
            c.inject(document.head);
        });
        this.loadingJS = this.assets["js"];
        this.loadNextJS();
        return this;
    },
    loadNextJS : function(){
        j = this.loadingJS.shift();
        if(!j) return;
        j.inject(document.head);
        return this;
    },
	load        : function(m,ops){
    	    var g = m.charAt(0).toUpperCase();
                m = "load" + g + m.substr(1);

            if(typeof this[m] == "function")
	            return this[m](ops);
	},
	
	unload      : function(){
        this.assets["css"].each(function(c){
            c.dispose();
        });
        this.assets["js"].each(function(c){
            c.dispose();
        });	    
        
        return this;
	},
	inject      : function(what){
	    this.get(what).inject();
	    return this;
	},
	loadPlaylist   : function(ops){
	    ops.parent  = this.options.id;
	    this.tracks = ops.tracks;
        this.playlist = new mtAudioPlaylist( ops );
	    return this;
	},
	loadPlayer          : function(ops){
	    ops.tracks = this.playlist;
	    this.player = new mtAudioPlayer(ops);
             this.playlist.setPlayer(this.player);
        return this;
	},
	loadUi              : function(ops){
	    dbug.log("mtAPTemplate::loadUI(%o)",ops);
        ops.parent      = this.options.id;
	    this.ui     =  new mtAudioPlayerUI( this.player, ops );
	    
	    return this;
	},
	injectPlayerUI   : function(ops){
	    
	},
	toElement       : function(){return this.el }
});



mtAPTemplate.mooTunes = new Class({
   Extends : mtAPTemplate,
   Implements : [Events],
   options  : {
       "class"      : "mooTunes",
       "id"         : "mooTunes",
       uiOps        : {
           onShrink     : function(){
               dbug.log("%o::onShrink()",this);
               $(this.playlist).retrieve("shrink").start("opacity",0);
               this.ui.readoutElems.artist.fade("hide");
               this.tinyToggleTimer = this.tinyToggle.periodical(2500, this.ui.readoutElems);           
           },
           onGrow       : function(){
                $(this.playlist).fade("in").setStyle("display", ""); 
                this.tinyToggleTimer = $clear(this.tinyToggleTimer); 
                this.ui.readoutElems.name.fade("show");
                this.ui.readoutElems.artist.fade("show");           
           }           
       }
   },
   tinyToggle           : function(){
       this.name.fade("toggle");
       this.artist.fade("toggle");       
   },
   loadUi               : function(ops){
        dbug.log("mtAPTemplate.mooTunes::loadUI(%o)",ops);
		$(this.playlist).store("shrink", new Fx.Tween( $(this.playlist), 
		                                                { onComplete: function(){ 
		                                                        dbug.log("complete"); 
		                                                        $(this.playlist).setStyle("display", "none"); 
		                                                    }.bind(this) 
		                                                } ));
	    ops.onShrink    = ops.onShrink ? ops.onShrink : this.options.uiOps.onShrink.bind(this);
	    ops.onGrow      = ops.onGrow ? ops.onGrow : this.options.uiOps.onGrow.bind(this);
	    ops.noShrinker  = $(this)
        return this.parent(ops);
   }

});