if(Browser.Engine.trident)
	window.addEvent("load", domready);
else
	window.addEvent("domready", domready);

function domready(){
    $$(".script").setStyle("display", "block");
    $$(".loading").setStyle("display", "none");
    if($("settings")) new setup();	
}

String.implement({
    uniEscape: function(){
        var eStr = "";
        for (var i = 0; i < this.length; i++) 
            if (this.charCodeAt(i) > 127 || this.charAt(i) == "'" || this.charAt(i) == "\"" || this.charAt(i) == "\\") 
                eStr += escape(this.charAt(i));
            else 
                eStr += this.charAt(i);
        
        return eStr;
    },
	toSettings: function(){
        var settings;
		var code = this;
        try {
            var v2Start = code.indexOf('var skin="');
            var v2End = code.lastIndexOf("document.write");
            var v3Start = code.indexOf('new SCMMusicPlayer("');
            var v3End = code.lastIndexOf('");');
            if (v3Start > -1) {
                code = code.substring(v3Start + 20, v3End);
                settings = eval("(" + code + ")");
            }
            else {
                code = code.substring(v2Start, v2End);
                settings = function(){
                    eval(code);
                    if (skin == "default") 
                        skin = "tunes";
					else if(skin == "white")
						skin = "blue";
                    return {
                        skin: "skins/" + skin + "/skin.css",
                        placement: placement,
                        playback: {
                            autostart: (autoPlay == "yes").toString(),
                            shuffle: (shuffle == "yes").toString(),
                            repeat: "always",
                            volume: "50",
                            item: ""
                        },
                        playlist: function(){
                            var newList = [];
                            for (var i = 0; i < playList.length; i += 2) {
                                newList.push({
                                    title: playList[i],
                                    file: playList[i + 1]
                                });
                            }
                            return newList;
                        }()
                    }
                }();
            }
        } 
        catch (e) {
            return false;
        }
        return settings;
    }
});

var radioGroup = new Class({
	initialize:function($els){
		this.$els = $els;
	},
	setValue:function(value){
		var filter = this.$els.each(function(el){
			if(el.get("value") == value)
				el.set("checked", true);
		})
	},
	getValue:function(value){
	}
});
var setup = new Class({
    initialize: function(){
        oThis = this;
        this.$ = $("settings");
        this.$manualList = this.$.getElement(".manualList");
        this.$externalList = this.$.getElement(".externalList");
        this.$list = this.$manualList.getElement("ol");
        this.$listType = this.$.getElements("input[name='listType']");
        this.$fieldClonner = this.$list.getElement("li").clone();
        this.$dragFields = this.$list.getElements(".dragField");
        this.$addFieldBtn = this.$.getElement(".addFieldBtn");
        this.$importBtn = this.$.getElement(".importBtn");
        this.$doneBtn = this.$.getElement(".doneBtn");
        this.$customSkinField = this.$.getElement("input[name='customSkin']");
        this.$customSkinRadio = this.$.getElement("input[name='skinType'][value='custom']");
        this.$importField = document.getElement(".importField");
        this.$doneField = document.getElement(".doneField");
        
        this.doneFieldText = this.$doneField.get("value");
        this.$tabs = jq(this.$.getElement(".tabs")).tabs();
        this.$msg = new Element("div");
        this.$msgDialog = jq(this.$msg).dialog({
            title: 'Message',
            bgiframe: true,
            autoOpen: false,
            width: 260,
            modal: true,
            buttons: {
                "Ok": function(){
                    jq(this).dialog("close");
                }
            }
        });
        this.$importDialog = jq(".importDialog").dialog({
            autoOpen: false,
            bgiframe: true,
            width: 650,
            modal: true,
            buttons: {
                "Ok": function(){
                    if (oThis.importCode()) {
                        jq(this).dialog("close");
                    }
                    else {
                        oThis.msgDialog('Sorry, we cannot recognize your script. \n Please make sure you have pasted the appropriate SCM Music Player script to be imported.');
                    }
                },
                "Cancel": function(){
                    jq(this).dialog("close");
                }
                
            }
        });
        this.$doneDialog = jq(".doneDialog").dialog({
            autoOpen: false,
            bgiframe: true,
            width: 650,
            modal: true
        });
        
        jq(this.$list).sortable();
        
        this.$list.getElement("li").setStyle("display", "none");
        this.$addFieldBtn.addEvent("click", function(){
            oThis.addField(5);
			new Fx.Scroll(window).toBottom();
        });
        this.addField(7);
        
        this.updateListType();
        this.$listType.addEvent("click", function(){
            oThis.updateListType();
        });
        
        this.$customSkinField.addEvent("change", function(){
            oThis.$customSkinRadio.set("checked", true);
        });
        
		this.$doneField.addEvent("click",function(){
			this.focus();
			this.select();
		});
		
        this.$doneBtn.addEvent("click", function(){
            oThis.exportCode();
        });
        this.$importBtn.addEvent("click", function(){
            oThis.$importDialog.dialog("open");
        });
    },
    addField: function(arg){
        var name, url, n;
        if ($type(arg) == "number") 
            n = arg;
        else {
            n = 1;
            name = unescape(arg.name);
            url = unescape(arg.url);
        }
        for (var i = 0; i < n; i++) {
            var field = oThis.$fieldClonner.clone();
            if (name) 
                field.getElement(".name").set("value", name);
            if (url) 
                field.getElement(".url").set("value", url);
            field.getElements(".deleteField").addEvent("click", function(){
                this.getParent("li").dispose();
            });
            field.inject(oThis.$list);
            
        }
    },
    updateListType: function(){
        if (this.$.listType[0].checked) {
            this.$manualList.setStyle("display", "block");
            this.$externalList.setStyle("display", "none");
        }
        else {
            this.$manualList.setStyle("display", "none");
            this.$externalList.setStyle("display", "block");
        }
    },
    getManualList: function(){
        var playlist = [];
        this.$list.getElements("li").each(function(item){
            var name = item.getElement(".name").get("value").clean().uniEscape();
            var url = item.getElement(".url").get("value").clean().uniEscape();
            if (url != "") {
                playlist.push({
                    "title": name,
                    "file": url
                });
            }
        });
        return playlist;
    },
    getSettingsFromUI: function(){
        var query = this.$.toQueryString().parseQueryString();
        var skinType = query.skinType;
        var isCustomSkin = skinType == "custom";
        var customSkin = query.customSkin;
        var isManualList = query.listType == "manualList";
        var manualList = this.getManualList();
        var extFile = query.file;
        var placement = query.placement;
        
        var playback = {};
        this.$.getElements(".playback").each(function(item){
            playback[item.get("name")] = item.get("value");
        });
        
        var settings = {};
        if (isManualList) {
            if (manualList.length == 0) 
                return false;
            settings.playlist = manualList;
        }
        else {
            if (!extFile || extFile == "") 
                return false;
            settings.file = extFile;
        }
        
        if (isCustomSkin) 
            settings.skin = customSkin;
        else 
            settings.skin = skinType;
        settings.placement = placement;
        settings.playback = playback;
        
        return settings;
    },
    importCode: function(){
        var oThis = this;
        var settings = this.$importField.get("value").toSettings();
        if (settings == false) 
            return false;
        var skinEle = this.$.getElement("input[name='skinType'][value='" + settings.skin + "']");
        if (skinEle) 
            skinEle.set("checked", true);
        else {
            this.$customSkinRadio.set("checked", true);
            this.$customSkinField.set("value", settings.skin);
        }
        
        this.$.placement.value = settings.placement;
        this.$.autostart.value = settings.playback.autostart;
        this.$.volume.value = settings.playback.volume;
        this.$.shuffle.value = settings.playback.shuffle;
        this.$.repeat.value = settings.playback.repeat;
        this.$.item.value = settings.playback.item;
        if (settings.playlist) {
            this.$list.getElements("li").dispose();
            this.$.listType[0].checked = true;
            this.updateListType();
            $A(settings.playlist).each(function(ele){
                oThis.addField({
                    name: ele.title,
                    url: ele.file
                });
            })
        }
        else {
            this.$.listType[1].checked = true;
            this.updateListType();
            this.$.file.value = settings.file;
        }
        return true;
    },
    exportCode: function(){
        var settings = this.getSettingsFromUI();
        if (settings) {
            this.$doneField.set("value", this.doneFieldText.replace(/\=settings\=/, JSON.encode(settings).replace(/\"/g, "'")));
            this.$doneDialog.dialog("open");
        }
        else {
            this.msgDialog("You haven't added any songs yet. Please go and Edit Playlist first.");
            this.$tabs.tabs("select", 1);
        }
    },
    msgDialog: function(msg){
        this.$msg.set("text", msg);
        this.$msgDialog.dialog("open");
    }
});