
function onLoaded() {
    var csInterface = new CSInterface();
	
    
    var appName = csInterface.hostEnvironment.appName;
    
    if(appName != "FLPR"){
    	loadJSX();
    }    
    
    var appNames = ["PHXS"];
    for (var i = 0; i < appNames.length; i++) {
        var name = appNames[i];
        if (appName.indexOf(name) >= 0) {
           var btn = document.getElementById("btn_" + name);
           if (btn)
                btn.disabled = false;
        }
    }
    

    updateThemeWithAppSkinInfo(csInterface.hostEnvironment.appSkinInfo);
    // Update the color of the panel when the theme color of the product changed.
    csInterface.addEventListener(CSInterface.THEME_COLOR_CHANGED_EVENT, onAppThemeColorChanged);
	
}



/**
 * Update the theme with the AppSkinInfo retrieved from the host product.
 */
function updateThemeWithAppSkinInfo(appSkinInfo) {
	
    //Update the background color of the panel
    var panelBackgroundColor = appSkinInfo.panelBackgroundColor.color;
    document.body.bgColor = toHex(panelBackgroundColor);
        
    var styleId = "ppstyle";
    var panelCol = panelBackgroundColor.red;
    // darkest
    if(panelCol <= 63){
    	addRule(styleId, "#ba", "background: url('img/darkest/ba.png');" );
    	addRule(styleId, "#br", "background: url('img/darkest/br.png');" );
    	addRule(styleId, "#cl", "background: url('img/darkest/cl.png');" );
    	addRule(styleId, "#db", "background: url('img/darkest/db.png');" );
    	addRule(styleId, "#ds", "background: url('img/darkest/ds.png');" );
    	addRule(styleId, "#dv", "background: url('img/darkest/dv.png');" );
    	addRule(styleId, "#ee", "background: url('img/darkest/ee.png');" );
    	addRule(styleId, "#fo", "background: url('img/darkest/fo.png');" );
    	addRule(styleId, "#fs", "background: url('img/darkest/fs.png');" );
    	addRule(styleId, "#he", "background: url('img/darkest/he.png');" );
    	addRule(styleId, "#la", "background: url('img/darkest/la.png');" );
    	addRule(styleId, "#li", "background: url('img/darkest/li.png');" );
    	addRule(styleId, "#logo", "background: url('img/darkest/logo.png');" );
    	addRule(styleId, "#ls", "background: url('img/darkest/ls.png');" );
    	addRule(styleId, "#lu", "background: url('img/darkest/lu.png');" );
    	addRule(styleId, "#ma", "background: url('img/darkest/ma.png');" );
    	addRule(styleId, "#pa", "background: url('img/darkest/pa.png');" );
    	addRule(styleId, "#pc", "background: url('img/darkest/pc.png');" );
    	addRule(styleId, "#re", "background: url('img/darkest/re.png');" );
    	addRule(styleId, "#rm", "background: url('img/darkest/rm.png');" );
    	addRule(styleId, "#sa", "background: url('img/darkest/sa.png');" );
    	addRule(styleId, "#se", "background: url('img/darkest/se.png');" );
    	addRule(styleId, "#sh", "background: url('img/darkest/sh.png');" );
    	addRule(styleId, "#sm", "background: url('img/darkest/sm.png');" );
    	addRule(styleId, "#sp", "background: url('img/darkest/sp.png');" );
    	addRule(styleId, "#ss", "background: url('img/darkest/ss.png');" );
    	addRule(styleId, "#st", "background: url('img/darkest/st.png');" );
    	addRule(styleId, "#tc", "background: url('img/darkest/tc.png');" );
    	addRule(styleId, "#un", "background: url('img/darkest/un.png');" );
    	addRule(styleId, "#vm", "background: url('img/darkest/vm.png');" );
    	addRule(styleId, "#wt", "background: url('img/darkest/wt.png');" );
    	
    	addRule(styleId, "#ba:hover", "background: url('img/darkest_hover/ba.png');" );
    	addRule(styleId, "#br:hover", "background: url('img/darkest_hover/br.png');" );
    	addRule(styleId, "#cl:hover", "background: url('img/darkest_hover/cl.png');" );
    	addRule(styleId, "#db:hover", "background: url('img/darkest_hover/db.png');" );
    	addRule(styleId, "#ds:hover", "background: url('img/darkest_hover/ds.png');" );
    	addRule(styleId, "#dv:hover", "background: url('img/darkest_hover/dv.png');" );
    	addRule(styleId, "#ee:hover", "background: url('img/darkest_hover/ee.png');" );
    	addRule(styleId, "#fo:hover", "background: url('img/darkest_hover/fo.png');" );
    	addRule(styleId, "#fs:hover", "background: url('img/darkest_hover/fs.png');" );
    	addRule(styleId, "#he:hover", "background: url('img/darkest_hover/he.png');" );
    	addRule(styleId, "#la:hover", "background: url('img/darkest_hover/la.png');" );
    	addRule(styleId, "#li:hover", "background: url('img/darkest_hover/li.png');" );
    	addRule(styleId, "#logo:hover", "background: url('img/darkest_hover/logo.png');" );
    	addRule(styleId, "#ls:hover", "background: url('img/darkest_hover/ls.png');" );
    	addRule(styleId, "#lu:hover", "background: url('img/darkest_hover/lu.png');" );
    	addRule(styleId, "#ma:hover", "background: url('img/darkest_hover/ma.png');" );
    	addRule(styleId, "#pa:hover", "background: url('img/darkest_hover/pa.png');" );
    	addRule(styleId, "#pc:hover", "background: url('img/darkest_hover/pc.png');" );
    	addRule(styleId, "#re:hover", "background: url('img/darkest_hover/re.png');" );
    	addRule(styleId, "#rm:hover", "background: url('img/darkest_hover/rm.png');" );
    	addRule(styleId, "#sa:hover", "background: url('img/darkest_hover/sa.png');" );
    	addRule(styleId, "#se:hover", "background: url('img/darkest_hover/se.png');" );
    	addRule(styleId, "#sh:hover", "background: url('img/darkest_hover/sh.png');" );
    	addRule(styleId, "#sm:hover", "background: url('img/darkest_hover/sm.png');" );
    	addRule(styleId, "#sp:hover", "background: url('img/darkest_hover/sp.png');" );
    	addRule(styleId, "#ss:hover", "background: url('img/darkest_hover/ss.png');" );
    	addRule(styleId, "#st:hover", "background: url('img/darkest_hover/st.png');" );
    	addRule(styleId, "#tc:hover", "background: url('img/darkest_hover/tc.png');" );
    	addRule(styleId, "#un:hover", "background: url('img/darkest_hover/un.png');" );
    	addRule(styleId, "#vm:hover", "background: url('img/darkest_hover/vm.png');" );
    	addRule(styleId, "#wt:hover", "background: url('img/darkest_hover/wt.png');" );
    	
    }
    // dark
    if(panelCol > 63 && panelCol <= 133){
    	addRule(styleId, "#ba", "background: url('img/dark/ba.png');" );
    	addRule(styleId, "#br", "background: url('img/dark/br.png');" );
    	addRule(styleId, "#cl", "background: url('img/dark/cl.png');" );
    	addRule(styleId, "#db", "background: url('img/dark/db.png');" );
    	addRule(styleId, "#ds", "background: url('img/dark/ds.png');" );
    	addRule(styleId, "#dv", "background: url('img/dark/dv.png');" );
    	addRule(styleId, "#ee", "background: url('img/dark/ee.png');" );
    	addRule(styleId, "#fo", "background: url('img/dark/fo.png');" );
    	addRule(styleId, "#fs", "background: url('img/dark/fs.png');" );
    	addRule(styleId, "#he", "background: url('img/dark/he.png');" );
    	addRule(styleId, "#la", "background: url('img/dark/la.png');" );
    	addRule(styleId, "#li", "background: url('img/dark/li.png');" );
    	addRule(styleId, "#logo", "background: url('img/dark/logo.png');" );
    	addRule(styleId, "#ls", "background: url('img/dark/ls.png');" );
    	addRule(styleId, "#lu", "background: url('img/dark/lu.png');" );
    	addRule(styleId, "#ma", "background: url('img/dark/ma.png');" );
    	addRule(styleId, "#pa", "background: url('img/dark/pa.png');" );
    	addRule(styleId, "#pc", "background: url('img/dark/pc.png');" );
    	addRule(styleId, "#re", "background: url('img/dark/re.png');" );
    	addRule(styleId, "#rm", "background: url('img/dark/rm.png');" );
    	addRule(styleId, "#sa", "background: url('img/dark/sa.png');" );
    	addRule(styleId, "#se", "background: url('img/dark/se.png');" );
    	addRule(styleId, "#sh", "background: url('img/dark/sh.png');" );
    	addRule(styleId, "#sm", "background: url('img/dark/sm.png');" );
    	addRule(styleId, "#sp", "background: url('img/dark/sp.png');" );
    	addRule(styleId, "#ss", "background: url('img/dark/ss.png');" );
    	addRule(styleId, "#st", "background: url('img/dark/st.png');" );
    	addRule(styleId, "#tc", "background: url('img/dark/tc.png');" );
    	addRule(styleId, "#un", "background: url('img/dark/un.png');" );
    	addRule(styleId, "#vm", "background: url('img/dark/vm.png');" );
    	addRule(styleId, "#wt", "background: url('img/dark/wt.png');" );
    	
    	addRule(styleId, "#ba:hover", "background: url('img/dark_hover/ba.png');" );
    	addRule(styleId, "#br:hover", "background: url('img/dark_hover/br.png');" );
    	addRule(styleId, "#cl:hover", "background: url('img/dark_hover/cl.png');" );
    	addRule(styleId, "#db:hover", "background: url('img/dark_hover/db.png');" );
    	addRule(styleId, "#ds:hover", "background: url('img/dark_hover/ds.png');" );
    	addRule(styleId, "#dv:hover", "background: url('img/dark_hover/dv.png');" );
    	addRule(styleId, "#ee:hover", "background: url('img/dark_hover/ee.png');" );
    	addRule(styleId, "#fo:hover", "background: url('img/dark_hover/fo.png');" );
    	addRule(styleId, "#fs:hover", "background: url('img/dark_hover/fs.png');" );
    	addRule(styleId, "#he:hover", "background: url('img/dark_hover/he.png');" );
    	addRule(styleId, "#la:hover", "background: url('img/dark_hover/la.png');" );
    	addRule(styleId, "#li:hover", "background: url('img/dark_hover/li.png');" );
    	addRule(styleId, "#logo:hover", "background: url('img/dark_hover/logo.png');" );
    	addRule(styleId, "#ls:hover", "background: url('img/dark_hover/ls.png');" );
    	addRule(styleId, "#lu:hover", "background: url('img/dark_hover/lu.png');" );
    	addRule(styleId, "#ma:hover", "background: url('img/dark_hover/ma.png');" );
    	addRule(styleId, "#pa:hover", "background: url('img/dark_hover/pa.png');" );
    	addRule(styleId, "#pc:hover", "background: url('img/dark_hover/pc.png');" );
    	addRule(styleId, "#re:hover", "background: url('img/dark_hover/re.png');" );
    	addRule(styleId, "#rm:hover", "background: url('img/dark_hover/rm.png');" );
    	addRule(styleId, "#sa:hover", "background: url('img/dark_hover/sa.png');" );
    	addRule(styleId, "#se:hover", "background: url('img/dark_hover/se.png');" );
    	addRule(styleId, "#sh:hover", "background: url('img/dark_hover/sh.png');" );
    	addRule(styleId, "#sm:hover", "background: url('img/dark_hover/sm.png');" );
    	addRule(styleId, "#sp:hover", "background: url('img/dark_hover/sp.png');" );
    	addRule(styleId, "#ss:hover", "background: url('img/dark_hover/ss.png');" );
    	addRule(styleId, "#st:hover", "background: url('img/dark_hover/st.png');" );
    	addRule(styleId, "#tc:hover", "background: url('img/dark_hover/tc.png');" );
    	addRule(styleId, "#un:hover", "background: url('img/dark_hover/un.png');" );
    	addRule(styleId, "#vm:hover", "background: url('img/dark_hover/vm.png');" );
    	addRule(styleId, "#wt:hover", "background: url('img/dark_hover/wt.png');" );
    }
    // light
    if(panelCol > 133 && panelCol <= 212){
    	addRule(styleId, "#ba", "background: url('img/light/ba.png');" );
    	addRule(styleId, "#br", "background: url('img/light/br.png');" );
    	addRule(styleId, "#cl", "background: url('img/light/cl.png');" );
    	addRule(styleId, "#db", "background: url('img/light/db.png');" );
    	addRule(styleId, "#ds", "background: url('img/light/ds.png');" );
    	addRule(styleId, "#dv", "background: url('img/light/dv.png');" );
    	addRule(styleId, "#ee", "background: url('img/light/ee.png');" );
    	addRule(styleId, "#fo", "background: url('img/light/fo.png');" );
    	addRule(styleId, "#fs", "background: url('img/light/fs.png');" );
    	addRule(styleId, "#he", "background: url('img/light/he.png');" );
    	addRule(styleId, "#la", "background: url('img/light/la.png');" );
    	addRule(styleId, "#li", "background: url('img/light/li.png');" );
    	addRule(styleId, "#logo", "background: url('img/light/logo.png');" );
    	addRule(styleId, "#ls", "background: url('img/light/ls.png');" );
    	addRule(styleId, "#lu", "background: url('img/light/lu.png');" );
    	addRule(styleId, "#ma", "background: url('img/light/ma.png');" );
    	addRule(styleId, "#pa", "background: url('img/light/pa.png');" );
    	addRule(styleId, "#pc", "background: url('img/light/pc.png');" );
    	addRule(styleId, "#re", "background: url('img/light/re.png');" );
    	addRule(styleId, "#rm", "background: url('img/light/rm.png');" );
    	addRule(styleId, "#sa", "background: url('img/light/sa.png');" );
    	addRule(styleId, "#se", "background: url('img/light/se.png');" );
    	addRule(styleId, "#sh", "background: url('img/light/sh.png');" );
    	addRule(styleId, "#sm", "background: url('img/light/sm.png');" );
    	addRule(styleId, "#sp", "background: url('img/light/sp.png');" );
    	addRule(styleId, "#ss", "background: url('img/light/ss.png');" );
    	addRule(styleId, "#st", "background: url('img/light/st.png');" );
    	addRule(styleId, "#tc", "background: url('img/light/tc.png');" );
    	addRule(styleId, "#un", "background: url('img/light/un.png');" );
    	addRule(styleId, "#vm", "background: url('img/light/vm.png');" );
    	addRule(styleId, "#wt", "background: url('img/light/wt.png');" );
    	
    	addRule(styleId, "#ba:hover", "background: url('img/light_hover/ba.png');" );
    	addRule(styleId, "#br:hover", "background: url('img/light_hover/br.png');" );
    	addRule(styleId, "#cl:hover", "background: url('img/light_hover/cl.png');" );
    	addRule(styleId, "#db:hover", "background: url('img/light_hover/db.png');" );
    	addRule(styleId, "#ds:hover", "background: url('img/light_hover/ds.png');" );
    	addRule(styleId, "#dv:hover", "background: url('img/light_hover/dv.png');" );
    	addRule(styleId, "#ee:hover", "background: url('img/light_hover/ee.png');" );
    	addRule(styleId, "#fo:hover", "background: url('img/light_hover/fo.png');" );
    	addRule(styleId, "#fs:hover", "background: url('img/light_hover/fs.png');" );
    	addRule(styleId, "#he:hover", "background: url('img/light_hover/he.png');" );
    	addRule(styleId, "#la:hover", "background: url('img/light_hover/la.png');" );
    	addRule(styleId, "#li:hover", "background: url('img/light_hover/li.png');" );
    	addRule(styleId, "#logo:hover", "background: url('img/light_hover/logo.png');" );
    	addRule(styleId, "#ls:hover", "background: url('img/light_hover/ls.png');" );
    	addRule(styleId, "#lu:hover", "background: url('img/light_hover/lu.png');" );
    	addRule(styleId, "#ma:hover", "background: url('img/light_hover/ma.png');" );
    	addRule(styleId, "#pa:hover", "background: url('img/light_hover/pa.png');" );
    	addRule(styleId, "#pc:hover", "background: url('img/light_hover/pc.png');" );
    	addRule(styleId, "#re:hover", "background: url('img/light_hover/re.png');" );
    	addRule(styleId, "#rm:hover", "background: url('img/light_hover/rm.png');" );
    	addRule(styleId, "#sa:hover", "background: url('img/light_hover/sa.png');" );
    	addRule(styleId, "#se:hover", "background: url('img/light_hover/se.png');" );
    	addRule(styleId, "#sh:hover", "background: url('img/light_hover/sh.png');" );
    	addRule(styleId, "#sm:hover", "background: url('img/light_hover/sm.png');" );
    	addRule(styleId, "#sp:hover", "background: url('img/light_hover/sp.png');" );
    	addRule(styleId, "#ss:hover", "background: url('img/light_hover/ss.png');" );
    	addRule(styleId, "#st:hover", "background: url('img/light_hover/st.png');" );
    	addRule(styleId, "#tc:hover", "background: url('img/light_hover/tc.png');" );
    	addRule(styleId, "#un:hover", "background: url('img/light_hover/un.png');" );
    	addRule(styleId, "#vm:hover", "background: url('img/light_hover/vm.png');" );
    	addRule(styleId, "#wt:hover", "background: url('img/light_hover/wt.png');" );
    }
    // lightest
    if(panelCol > 212){
    	addRule(styleId, "#ba", "background: url('img/lightest/ba.png');" );
    	addRule(styleId, "#br", "background: url('img/lightest/br.png');" );
    	addRule(styleId, "#cl", "background: url('img/lightest/cl.png');" );
    	addRule(styleId, "#db", "background: url('img/lightest/db.png');" );
    	addRule(styleId, "#ds", "background: url('img/lightest/ds.png');" );
    	addRule(styleId, "#dv", "background: url('img/lightest/dv.png');" );
    	addRule(styleId, "#ee", "background: url('img/lightest/ee.png');" );
    	addRule(styleId, "#fo", "background: url('img/lightest/fo.png');" );
    	addRule(styleId, "#fs", "background: url('img/lightest/fs.png');" );
    	addRule(styleId, "#he", "background: url('img/lightest/he.png');" );
    	addRule(styleId, "#la", "background: url('img/lightest/la.png');" );
    	addRule(styleId, "#li", "background: url('img/lightest/li.png');" );
    	addRule(styleId, "#logo", "background: url('img/lightest/logo.png');" );
    	addRule(styleId, "#ls", "background: url('img/lightest/ls.png');" );
    	addRule(styleId, "#lu", "background: url('img/lightest/lu.png');" );
    	addRule(styleId, "#ma", "background: url('img/lightest/ma.png');" );
    	addRule(styleId, "#pa", "background: url('img/lightest/pa.png');" );
    	addRule(styleId, "#pc", "background: url('img/lightest/pc.png');" );
    	addRule(styleId, "#re", "background: url('img/lightest/re.png');" );
    	addRule(styleId, "#rm", "background: url('img/lightest/rm.png');" );
    	addRule(styleId, "#sa", "background: url('img/lightest/sa.png');" );
    	addRule(styleId, "#se", "background: url('img/lightest/se.png');" );
    	addRule(styleId, "#sh", "background: url('img/lightest/sh.png');" );
    	addRule(styleId, "#sm", "background: url('img/lightest/sm.png');" );
    	addRule(styleId, "#sp", "background: url('img/lightest/sp.png');" );
    	addRule(styleId, "#ss", "background: url('img/lightest/ss.png');" );
    	addRule(styleId, "#st", "background: url('img/lightest/st.png');" );
    	addRule(styleId, "#tc", "background: url('img/lightest/tc.png');" );
    	addRule(styleId, "#un", "background: url('img/lightest/un.png');" );
    	addRule(styleId, "#vm", "background: url('img/lightest/vm.png');" );
    	addRule(styleId, "#wt", "background: url('img/lightest/wt.png');" );
    	
    	addRule(styleId, "#ba:hover", "background: url('img/lightest_hover/ba.png');" );
    	addRule(styleId, "#br:hover", "background: url('img/lightest_hover/br.png');" );
    	addRule(styleId, "#cl:hover", "background: url('img/lightest_hover/cl.png');" );
    	addRule(styleId, "#db:hover", "background: url('img/lightest_hover/db.png');" );
    	addRule(styleId, "#ds:hover", "background: url('img/lightest_hover/ds.png');" );
    	addRule(styleId, "#dv:hover", "background: url('img/lightest_hover/dv.png');" );
    	addRule(styleId, "#ee:hover", "background: url('img/lightest_hover/ee.png');" );
    	addRule(styleId, "#fo:hover", "background: url('img/lightest_hover/fo.png');" );
    	addRule(styleId, "#fs:hover", "background: url('img/lightest_hover/fs.png');" );
    	addRule(styleId, "#he:hover", "background: url('img/lightest_hover/he.png');" );
    	addRule(styleId, "#la:hover", "background: url('img/lightest_hover/la.png');" );
    	addRule(styleId, "#li:hover", "background: url('img/lightest_hover/li.png');" );
    	addRule(styleId, "#logo:hover", "background: url('img/lightest_hover/logo.png');" );
    	addRule(styleId, "#ls:hover", "background: url('img/lightest_hover/ls.png');" );
    	addRule(styleId, "#lu:hover", "background: url('img/lightest_hover/lu.png');" );
    	addRule(styleId, "#ma:hover", "background: url('img/lightest_hover/ma.png');" );
    	addRule(styleId, "#pa:hover", "background: url('img/lightest_hover/pa.png');" );
    	addRule(styleId, "#pc:hover", "background: url('img/lightest_hover/pc.png');" );
    	addRule(styleId, "#re:hover", "background: url('img/lightest_hover/re.png');" );
    	addRule(styleId, "#rm:hover", "background: url('img/lightest_hover/rm.png');" );
    	addRule(styleId, "#sa:hover", "background: url('img/lightest_hover/sa.png');" );
    	addRule(styleId, "#se:hover", "background: url('img/lightest_hover/se.png');" );
    	addRule(styleId, "#sh:hover", "background: url('img/lightest_hover/sh.png');" );
    	addRule(styleId, "#sm:hover", "background: url('img/lightest_hover/sm.png');" );
    	addRule(styleId, "#sp:hover", "background: url('img/lightest_hover/sp.png');" );
    	addRule(styleId, "#ss:hover", "background: url('img/lightest_hover/ss.png');" );
    	addRule(styleId, "#st:hover", "background: url('img/lightest_hover/st.png');" );
    	addRule(styleId, "#tc:hover", "background: url('img/lightest_hover/tc.png');" );
    	addRule(styleId, "#un:hover", "background: url('img/lightest_hover/un.png');" );
    	addRule(styleId, "#vm:hover", "background: url('img/lightest_hover/vm.png');" );
    	addRule(styleId, "#wt:hover", "background: url('img/lightest_hover/wt.png');" );
    }
    

 /*   
    var csInterface = new CSInterface();
	var appName = csInterface.hostEnvironment.appName;
    
    if(appName == "PHXS"){
	    addRule(styleId, "button, select, input[type=button], input[type=submit]", "border-radius:3px;");
	}
	if(appName == "PHXS" || appName == "PPRO" || appName == "PRLD") {
		////////////////////////////////////////////////////////////////////////////////////////////////
		// NOTE: Below theme related code are only suitable for Photoshop.                            //
		// If you want to achieve same effect on other products please make your own changes here.    //
		////////////////////////////////////////////////////////////////////////////////////////////////
		
	    
	    var gradientBg = "background-image: -webkit-linear-gradient(top, " + toHex(panelBackgroundColor, 40) + " , " + toHex(panelBackgroundColor, 10) + ");";
	    var gradientDisabledBg = "background-image: -webkit-linear-gradient(top, " + toHex(panelBackgroundColor, 15) + " , " + toHex(panelBackgroundColor, 5) + ");";
	    var boxShadow = "-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);";
	    var boxActiveShadow = "-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);";
	    
	    var isPanelThemeLight = panelBackgroundColor.red > 127;
	    var fontColor, disabledFontColor;
	    var borderColor;
	    var inputBackgroundColor;
	    var gradientHighlightBg;
	    if(isPanelThemeLight) {
	    	fontColor = "#000000;";
	    	disabledFontColor = "color:" + toHex(panelBackgroundColor, -70) + ";";
	    	borderColor = "border-color: " + toHex(panelBackgroundColor, -90) + ";";
	    	inputBackgroundColor = toHex(panelBackgroundColor, 54) + ";";
	    	gradientHighlightBg = "background-image: -webkit-linear-gradient(top, " + toHex(panelBackgroundColor, -40) + " , " + toHex(panelBackgroundColor,-50) + ");";
	    } else {
	    	fontColor = "#ffffff;";
	    	disabledFontColor = "color:" + toHex(panelBackgroundColor, 100) + ";";
	    	borderColor = "border-color: " + toHex(panelBackgroundColor, -45) + ";";
	    	inputBackgroundColor = toHex(panelBackgroundColor, -20) + ";";
	    	gradientHighlightBg = "background-image: -webkit-linear-gradient(top, " + toHex(panelBackgroundColor, -20) + " , " + toHex(panelBackgroundColor, -30) + ");";
	    }
	    
	
	    //Update the default text style with pp values
	    
	    addRule(styleId, ".default", "font-size:" + appSkinInfo.baseFontSize + "px" + "; color:" + fontColor + "; background-color:" + toHex(panelBackgroundColor) + ";");
	    addRule(styleId, "button, select, input[type=text], input[type=button], input[type=submit]", borderColor);    
	    addRule(styleId, "button, select, input[type=button], input[type=submit]", gradientBg);    
	    addRule(styleId, "button, select, input[type=button], input[type=submit]", boxShadow);
	    addRule(styleId, "button:enabled:active, input[type=button]:enabled:active, input[type=submit]:enabled:active", gradientHighlightBg);
	    addRule(styleId, "button:enabled:active, input[type=button]:enabled:active, input[type=submit]:enabled:active", boxActiveShadow);
	    addRule(styleId, "[disabled]", gradientDisabledBg);
	    addRule(styleId, "[disabled]", disabledFontColor);
	    addRule(styleId, "input[type=text]", "padding:1px 3px;");
	    addRule(styleId, "input[type=text]", "background-color: " + inputBackgroundColor) + ";";
	    addRule(styleId, "input[type=text]:focus", "background-color: #ffffff;");
	    addRule(styleId, "input[type=text]:focus", "color: #000000;");
	    
	} else {
		// For AI, ID and FL use old implementation	
		addRule(styleId, ".default", "font-size:" + appSkinInfo.baseFontSize + "px" + "; color:" + reverseColor(panelBackgroundColor) + "; background-color:" + toHex(panelBackgroundColor, 20));
	    addRule(styleId, "button", "border-color: " + toHex(panelBgColor, -50));
	}
	*/
}

function addRule(stylesheetId, selector, rule) {
    var stylesheet = document.getElementById(stylesheetId);
    
    if (stylesheet) {
        stylesheet = stylesheet.sheet;
           if( stylesheet.addRule ){
               stylesheet.addRule(selector, rule);
           } else if( stylesheet.insertRule ){
               stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
           }
    }
}


function reverseColor(color, delta) {
    return toHex({red:Math.abs(255-color.red), green:Math.abs(255-color.green), blue:Math.abs(255-color.blue)}, delta);
}

/**
 * Convert the Color object to string in hexadecimal format;
 */
function toHex(color, delta) {
    function computeValue(value, delta) {
        var computedValue = !isNaN(delta) ? value + delta : value;
        if (computedValue < 0) {
            computedValue = 0;
        } else if (computedValue > 255) {
            computedValue = 255;
        }

        computedValue = computedValue.toString(16);
        return computedValue.length == 1 ? "0" + computedValue : computedValue;
    }

    var hex = "";
    if (color) {
        with (color) {
             hex = computeValue(red, delta) + computeValue(green, delta) + computeValue(blue, delta);
        };
    }
    return "#" + hex;
}

function onAppThemeColorChanged(event) {
    // Should get a latest HostEnvironment object from application.
    var skinInfo = JSON.parse(window.__adobe_cep__.getHostEnvironment()).appSkinInfo;
    // Gets the style information such as color info from the skinInfo, 
    // and redraw all UI controls of your extension according to the style info.
    updateThemeWithAppSkinInfo(skinInfo);
} 



    
/**
 * Load JSX file into the scripting context of the product. All the jsx files in 
 * folder [ExtensionRoot]/jsx will be loaded. 
 */
function loadJSX() {
    var csInterface = new CSInterface();
    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/jsx/";
    csInterface.evalScript('$._ext.evalFiles("' + extensionRoot + '")');
}

function evalScript(script, callback) {
    new CSInterface().evalScript(script, callback);
}

function onClickButton(ppid) {
    if(ppid == "FLPR"){
    	var jsfl = 'fl.createDocument(); fl.getDocumentDOM().addNewText({left:100, top:100, right:300, bottom:300} , "Hello Flash!" ); ';
    	evalScript(jsfl);
    } else {
    	var extScript = "$._ext_" + ppid + ".run()";
		evalScript(extScript);
	}
}
