Show
Ignore:
Timestamp:
07/09/08 20:20:27 (17 months ago)
Author:
breese
Message:

bringing the version of StyleCatcher? in the mtplugins repos up to date with what (will) ships with Movable Type 4.2

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • trunk/StyleCatcher/plugins/StyleCatcher/tmpl/view.tmpl

    r68 r817  
    1 <TMPL_INCLUDE NAME="header.tmpl"> 
     1<mt:setvarblock name="page_title"><__trans phrase="Select a Style"></mt:setvarblock> 
     2<mt:setvarblock name="html_head" append="1"> 
     3<!-- stylecatcher --> 
     4<link rel="stylesheet" type="text/css" title="Default Layout" href="<mt:var name="plugin_static_uri">templates.css" /> 
     5 
     6<script type="text/javascript" src="<mt:var name="static_uri">js/tc/mixer.js"></script> 
     7<script type="text/javascript" src="<mt:var name="static_uri">js/tc/mixer/tagmatch.js"></script> 
     8<script type="text/javascript" src="<mt:var name="static_uri">js/tc/mixer/display.js"></script> 
     9<script type="text/javascript" src="<mt:var name="static_uri">js/tc/client.js"></script> 
    210 
    311<!-- javascripts for this page --> 
    412 
    5         <script type="text/javascript"> 
    6             var repoImg = "<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/mixed-media.gif"; 
    7             var selected; 
    8             var selected_blog_id; 
    9             var mixer;           
    10             var matchCategory = /^category-/; 
    11             var categories = []; 
    12             var firstCategoryId; 
    13             var repo_urls = {}; 
    14             var repos = []; 
    15  
    16             TC.attachLoadEvent( init ); 
    17  
    18             function init() { 
    19                 initMixer(); 
    20                 showDetails( false ); 
    21  
    22 <TMPL_IF NAME=THEMES_JSON> 
    23                 var data = <TMPL_VAR NAME=THEMES_JSON>; 
    24                 if (data.categories) { 
    25                     for (var i = 0; i < data.categories.length; i++) 
    26                         enableCategory(data.categories[i]); 
    27                 } 
    28 </TMPL_IF> 
    29  
    30                 initCategories(); 
    31                 chooseCategory( firstCategoryId ); 
    32  
    33                 if (data.themes) 
    34                     loadThemes(data.themes, 'local'); 
    35  
    36                 <TMPL_IF NAME=AUTO_FETCH> 
    37                 getStyles(); 
    38                 </TMPL_IF> 
    39             } 
    40  
    41             function enableCategory(cat) { 
    42                 mixer.addTagIndexDisplay('display-'+cat, 1000, 'collection:'+cat); 
    43                 var el = document.getElementById('category-' + cat); 
    44                 if (el) 
    45                     el.style.display = 'block'; 
    46             } 
    47  
    48             function initMixer() 
    49             { 
    50                 mixer = new TC.Mixer(); 
    51                 // initialize mixer object 
    52                 mixer.addSelectedDisplay( "display-details" ); 
    53             } 
    54  
    55             function initCategories() 
    56             { 
    57                 var element = document.getElementById( "categories" ); 
    58                 if( !element ) 
    59                     return; 
    60                  
    61                 categories.length = 0; 
    62                 var elements = element.childNodes; 
    63                 for( var i = 0; i < elements.length; i++ ) 
    64                 { 
    65                     element = elements[ i ]; 
    66                     var categoryId = element.id; 
    67                     if( !categoryId ) 
    68                         continue; 
    69                      
    70                     if( !firstCategoryId ) { 
    71                         if (element.style.display != 'none') { 
    72                             firstCategoryId = categoryId; 
     13<script type="text/javascript"> 
     14/* <![CDATA[ */ 
     15    var repoImg = "<mt:var name="plugin_static_uri">images/mixed-media.gif"; 
     16    var selected; 
     17    var blog_id = '<mt:var name="blog_id" escape="js">'; 
     18    var dynamic_blog = <mt:if name="dynamic_blog">true<mt:else>false</mt:if>; 
     19    var mixer;           
     20    var matchCategory = /^category-/; 
     21    var categories = []; 
     22    var firstCategoryId; 
     23    var repo_urls = {}; 
     24    var repos = []; 
     25    var libraries = <mt:var name="style_library" to_json="1">; 
     26    var current_theme = '<mt:var name="current_theme">'; 
     27    var current_layout = '<mt:var name="current_layout">'; 
     28    var layout_names = { 
     29        "layout-wtt": "<__trans phrase="3-Columns, Wide, Thin, Thin" escape="js">", 
     30        "layout-twt": "<__trans phrase="3-Columns, Thin, Wide, Thin" escape="js">", 
     31        "layout-tw": "<__trans phrase="2-Columns, Thin, Wide" escape="js">", 
     32        "layout-wt": "<__trans phrase="2-Columns, Wide, Thin" escape="js">", 
     33        "layout-wm": "<__trans phrase="2-Columns, Wide, Medium" escape="js">", 
     34        "layout-mw": "<__trans phrase="2-Columns, Medium, Wide" escape="js">" 
     35    }; 
     36 
     37    TC.attachLoadEvent( init ); 
     38 
     39    function init() { 
     40        initMixer(); 
     41 
     42<mt:if name="themes_json"> 
     43        var data = <mt:var name="themes_json">; 
     44        if (data.categories) { 
     45            for (var i = 0; i < data.categories.length; i++) 
     46                enableCategory(data.categories[i]); 
     47        } 
     48</mt:if> 
     49 
     50        initCategories(); 
     51        chooseCategory( firstCategoryId ); 
     52 
     53        if (data.themes) { 
     54            loadThemes(data.themes); 
     55            if (current_theme) { 
     56                mixer.name = current_theme; 
     57                selectDesign(); 
     58            } else { 
     59                showDetails(); 
     60            } 
     61        } 
     62 
     63        <mt:if name="auto_fetch"> 
     64        getStyles(); 
     65        </mt:if> 
     66    } 
     67 
     68    function enableCategory(cat) { 
     69        mixer.addTagIndexDisplay('display-'+cat, 1000, 'collection:'+cat); 
     70        var el = getByID('category-' + cat); 
     71        if (el) 
     72            el.style.display = 'block'; 
     73    } 
     74 
     75    function initMixer() { 
     76        mixer = new TC.Mixer(); 
     77        // initialize mixer object 
     78        mixer.addSelectedDisplay( "display-details-content" ); 
     79        mixer.onselect = selectDesign; 
     80    } 
     81 
     82    function initCategories() { 
     83        var element = getByID( "categories" ); 
     84        if( !element ) 
     85            return; 
     86         
     87        categories.length = 0; 
     88        var elements = element.childNodes; 
     89        for( var i = 0; i < elements.length; i++ ) 
     90        { 
     91            element = elements[ i ]; 
     92            var categoryId = element.id; 
     93            if( !categoryId ) 
     94                continue; 
     95             
     96            if( !firstCategoryId ) { 
     97                if (element.style.display != 'none') { 
     98                    firstCategoryId = categoryId; 
     99                } 
     100            } 
     101             
     102            var displayId = categoryId.replace( matchCategory, "display-" ); 
     103            var display = getByID( displayId ); 
     104 
     105            element.onclick = chooseCategoryClosure( categoryId ); 
     106            TC.removeClassName( element, "category-selected" ); 
     107 
     108            categories[ categoryId ] = { 
     109                "element" : element, 
     110                "display" : display 
     111            }; 
     112        } 
     113    } 
     114 
     115    function chooseCategoryClosure( categoryId ) { 
     116        var func = function() { return chooseCategory( categoryId ); }; 
     117        return func; 
     118    } 
     119 
     120    function chooseCategory( categoryId ) { 
     121        var titleElement = getByID( "selected-category-title" ); 
     122 
     123        for( var id in categories ) { 
     124            var element = categories[ id ].element; 
     125            if (!element) continue; 
     126            var display = categories[ id ].display; 
     127 
     128            if( id == categoryId ) { 
     129                var repo_match = element.id.match(/^category-repo-(.+)$/); 
     130                if (repo_match) { 
     131                    var repo_id = repo_match[1]; 
     132                    var repo; 
     133                    for (var i = 0; i < libraries.length; i++) { 
     134                        if (libraries[i].key == repo_id) { 
     135                            repo = libraries[i]; 
     136                            break; 
    73137                        } 
    74138                    } 
    75                      
    76                     var displayId = categoryId.replace( matchCategory, "display-" ); 
    77                     var display = document.getElementById( displayId ); 
    78                      
    79                     element.onclick = chooseCategoryClosure( categoryId ); 
    80                     TC.removeClassName( element, "category-selected" ); 
    81                      
    82                     categories[ categoryId ] = 
    83                     { 
    84                         "element" : element, 
    85                         "display" : display 
    86                     }; 
    87                 } 
    88             } 
    89  
    90             function chooseCategoryClosure( categoryId ) 
    91             { 
    92                 var func = function() { return chooseCategory( categoryId ); }; 
    93                 return func; 
    94             } 
    95  
    96             function chooseCategory( categoryId ) 
    97             { 
    98                 var titleElement = document.getElementById( "selected-category-title" ); 
     139                    if (repo.url && !repo.loaded) { 
     140                        getStyles(repo_id, repo.url); 
     141                    } 
     142                } 
     143                TC.addClassName( element, "category-selected" ); 
     144                display.style.display = "block"; 
    99145                 
    100                 for( var id in categories ) 
    101                 { 
    102                     var element = categories[ id ].element; 
    103                     var display = categories[ id ].display; 
    104  
    105                     if( id == categoryId ) 
    106                     { 
    107                         TC.addClassName( element, "category-selected" ); 
    108                         display.style.display = "block"; 
    109                          
    110                         if( titleElement ) 
    111                             titleElement.innerHTML = trans(element.firstChild.nextSibling.innerHTML); 
    112                         if (element.title.match(/^https?:/)) { 
    113                             var url_element = getByID("repo-url"); 
    114                             url_element.value = element.title; 
     146                if( titleElement ) 
     147                    titleElement.innerHTML = trans(element.firstChild.nextSibling.innerHTML); 
     148            } 
     149            else { 
     150                TC.removeClassName( element, "category-selected" ); 
     151                if (display) display.style.display = "none"; 
     152            } 
     153        } 
     154 
     155        // select first theme in category 
     156        mixer.name = ''; 
     157        var select_design = getByID("select-design-controls"); 
     158        TC.addClassName(select_design, "hidden"); 
     159        mixer.display(); 
     160        mixer.remix(); 
     161    } 
     162 
     163    function showDetails() { 
     164        mixer.remix(); 
     165    } 
     166 
     167    function selectDesign() { 
     168        var apply_button = getByID("apply-button"); 
     169        var layout_select = getByID("layout-list"); 
     170 
     171        var layouts; 
     172        if (mixer.name && mixer.entries[mixer.name]) 
     173            layouts = mixer.entries[mixer.name].layouts; 
     174        var layout_list; 
     175        if (layouts) layout_list = layouts.split(/\s*,\s*/); 
     176        if (layouts && layout_list && layout_list.length) { 
     177            layout_select.options.length = 0; 
     178            var selected_layout = 0; 
     179            for (var i = 0; i < layout_list.length; i++) { 
     180                var opt = new Option(layout_names[layout_list[i]] ? layout_names[layout_list[i]] : layout_list[i], layout_list[i]); 
     181                layout_select.options[layout_select.options.length] = opt; 
     182                if (layout_list[i] == current_layout) { 
     183                    selected_layout = i; 
     184                } 
     185            } 
     186            layout_select.selectedIndex = selected_layout; 
     187            layout_select.disabled = false; 
     188        } else { 
     189            layout_select.options.length = 0; 
     190            layout_select.options[0] = new Option("<__trans phrase="None available" escape="js">", ""); 
     191            layout_select.disabled = true; 
     192        } 
     193        showDetails(); 
     194        var select_design = getByID("select-design-controls"); 
     195        TC.removeClassName(select_design, "hidden"); 
     196        updateApplyButton(); 
     197    } 
     198 
     199    function updateApplyButton() { 
     200        var apply_button = getByID("apply-button"); 
     201        var layout_select = getByID("layout-list"); 
     202        var new_layout; 
     203        if (layout_select && layout_select.selectedIndex != -1) { 
     204            new_layout = layout_select.options[layout_select.selectedIndex].value; 
     205        } 
     206        var current_entry = mixer.entries[mixer.name]; 
     207        if ((mixer.name == current_theme) && ((!new_layout || !current_layout) || ((new_layout && current_layout) && (new_layout == current_layout)))) { 
     208            // same theme, same layout. don't allow apply design to be enabled 
     209            apply_button.disabled = true; 
     210            TC.addClassName(apply_button, "disabled-button"); 
     211        } else { 
     212            apply_button.disabled = false; 
     213            TC.removeClassName(apply_button, "disabled-button"); 
     214        } 
     215    } 
     216 
     217    function applyDesign() { 
     218        // disable apply button; change text to "Applying..." 
     219        var btn = getByID("apply-button"); 
     220        var layout = getByID("layout-list"); 
     221        if (layout && layout.selectedIndex != -1) { 
     222            layout = layout.options[layout.selectedIndex].value; 
     223        } 
     224 
     225        selected = mixer.name; 
     226        var url = mixer.entries[mixer.name].url; 
     227 
     228        TC.addClassName(btn, "disabled-button"); 
     229        btn.disabled = true; 
     230        btn.value = "<__trans phrase="Applying..." escape="js">"; 
     231 
     232        var args = { 
     233            '__mode': 'stylecatcher_apply', 
     234            'url': url, 
     235            'magic_token': '<mt:var name="magic_token">', 
     236            'blog_id': blog_id, 
     237            'name': mixer.name 
     238        }; 
     239        if (layout) 
     240            args['layout'] = layout; 
     241        var client = TC.Client.call({ 
     242            'load': designApplied, 
     243            'uri': '<mt:var name="script_url">', 
     244            'method': 'POST', 
     245            'arguments': args 
     246        }); 
     247    } 
     248 
     249    function designApplied(client, result) { 
     250        var btn = getByID("apply-button"); 
     251        btn.value = "<__trans phrase="Apply Design" escape="js">"; 
     252 
     253        var res; 
     254        try { 
     255            res = eval('(' + result + ')'); 
     256        } catch (e) { 
     257        } 
     258        if (res && res.error) { 
     259            showMsg("<__trans phrase="Error applying theme: " escape="js">" + res.error, "theme-applied", "error"); 
     260            TC.removeClassName(btn, "disabled-button"); 
     261            btn.disabled = false; 
     262            return; 
     263        } 
     264 
     265        var layout = getByID("layout-list"); 
     266        var new_layout; 
     267        if (layout && layout.selectedIndex != -1) { 
     268            new_layout = layout.options[layout.selectedIndex].value; 
     269        } 
     270        var entry = mixer.entries[selected]; 
     271        if (entry) { 
     272            // make this the new 'current' theme 
     273            var found = false; 
     274            for (var i = 0; i < entry.tags.length; i++) { 
     275                if (entry.tags[i] == 'collection:current') 
     276                    found = true; 
     277            } 
     278            if (!found) 
     279                entry.tags[entry.tags.length] = 'collection:current'; 
     280            /* we need to add the blog id of the blog that was 
     281               applied to for this entry */ 
     282 
     283            found = false; 
     284            if (entry.blogs && entry.blogs.length) { 
     285                for (var i = 0; i < entry.blogs.length; i++) { 
     286                    if (entry.blogs[i] == blog_id) 
     287                        found = true; 
     288                } 
     289            } 
     290            if (!found) 
     291                entry.blogs[entry.blogs.length] = blog_id; 
     292 
     293            /* loop through all the 'current' themes and strip 
     294               this blog id from any that don't match the 
     295               selected theme */ 
     296            for (var i in mixer.entries) { 
     297                if (i == selected) 
     298                    continue; 
     299                for (var j = 0; j < mixer.entries[i].blogs.length; j++) { 
     300                    if (mixer.entries[i].blogs[j] == blog_id) { 
     301                        mixer.entries[i].blogs.splice(j,1); 
     302                        break; 
     303                    } 
     304                } 
     305                if (mixer.entries[i].blogs.length == 0) { 
     306                    // no longer 'current' 
     307                    for (var j = 0; j < mixer.entries[i].tags.length; j++) { 
     308                        if (mixer.entries[i].tags[j] == 'collection:current') { 
     309                            mixer.entries[i].tags.splice(j,1); 
     310                            break; 
    115311                        } 
    116312                    } 
    117                     else 
    118                     { 
    119                         TC.removeClassName( element, "category-selected" ); 
    120                         display.style.display = "none"; 
    121                     } 
    122                 } 
    123                  
    124                 mixer.display(); 
    125             } 
    126  
    127             function showDetails( show ) 
    128             { 
    129                 var showElement = document.getElementById( "show-details" ); 
    130                 var hideElement = document.getElementById( "hide-details" ); 
    131                 var detailsElement = document.getElementById( "details-wrapper" ); 
    132                 var templatesElement = document.getElementById( "templates-wrapper" ); 
    133                  
    134                 if( show ) 
    135                 { 
    136                     showElement.style.display = "none"; 
    137                     hideElement.style.display = "block"; 
    138                     detailsElement.style.display = "block"; 
    139                     TC.removeClassName( templatesElement, "templates-wrapper-wide" ); 
    140                     TC.addClassName( templatesElement, "templates-wrapper-narrow" ); 
    141                 } 
    142                 else 
    143                 { 
    144                     showElement.style.display = "block"; 
    145                     hideElement.style.display = "none"; 
    146                     detailsElement.style.display = "none"; 
    147                     TC.addClassName( templatesElement, "templates-wrapper-wide" ); 
    148                     TC.removeClassName( templatesElement, "templates-wrapper-narrow" ); 
    149                 } 
    150                  
    151                 return false; 
    152             } 
    153  
    154             function applyDesign() { 
    155                 // disable apply button; change text to "Applying..." 
    156 <TMPL_IF NAME=SINGLE_BLOG> 
    157                 var blog_id = '<TMPL_VAR NAME=SINGLE_BLOG>'; 
    158 <TMPL_ELSE> 
    159                 var sel = getByID("select-blog"); 
    160                 var blog_id = sel.options[sel.selectedIndex].value; 
    161                 if (!blog_id) { 
    162                     alert("<MT_TRANS phrase="Please select a weblog to apply this theme.">"); 
    163                     return; 
    164                 } 
    165 </TMPL_IF> 
    166                 var btn = getByID("apply-button"); 
    167                 if (!btn) return; 
    168  
    169                 selected = mixer.name; 
    170                 if (!selected) { 
    171                     alert("<MT_TRANS phrase="Please click on a theme before attempting to apply a new design to your blog.">"); 
    172                     return; 
    173                 } 
    174                 var url = mixer.entries[mixer.name].url; 
    175  
    176                 btn.disabled = true; 
    177                 btn.value = "<MT_TRANS phrase="Applying...">"; 
    178                 selected_blog_id = blog_id; 
    179                 var client = TC.Client.call({ 
    180                     'load': designApplied, 
    181                     'uri': '<TMPL_VAR NAME=SCRIPT_URL>', 
    182                     'method': 'POST', 
    183                     'arguments': { 
    184                         '__mode': 'apply', 
    185                         'url': url, 
    186                         'magic_token': '<TMPL_VAR NAME=MAGIC_TOKEN>', 
    187                         'blog_id': blog_id 
    188                     } 
    189                 }); 
    190             } 
    191  
    192             function designApplied(client, result) { 
    193                 var btn = getByID("apply-button"); 
    194                 var entry = mixer.entries[selected]; 
    195                 if (entry) { 
    196                     // make this the new 'current' theme 
    197                     var found = false; 
    198                     for (var i = 0; i < entry.tags.length; i++) { 
    199                         if (entry.tags[i] == 'collection:current') 
    200                             found = true; 
    201                     } 
    202                     if (!found) 
    203                         entry.tags[entry.tags.length] = 'collection:current'; 
    204                     /* we need to add the blog id of the blog that was 
    205                        applied to for this entry */ 
    206  
    207                     found = false; 
    208                     if (entry.blogs && entry.blogs.length) { 
    209                         for (var i = 0; i < entry.blogs.length; i++) { 
    210                             if (entry.blogs[i] == selected_blog_id) 
    211                                 found = true; 
     313                } 
     314            } 
     315            mixer.createTagIndexes(); 
     316        } 
     317 
     318        chooseCategory('category-current'); 
     319        current_theme = selected; 
     320        mixer.name = selected; 
     321        var layout_changed = (current_layout && new_layout) && (current_layout != new_layout); 
     322        current_layout = new_layout; 
     323        selectDesign(); 
     324 
     325        if (layout_changed && (!dynamic_blog)) { 
     326            showMsg("<__trans phrase="The selected theme has been applied, but as you have changed the layout, you will need to republish your blog to apply the new layout." escape="js">", 'theme-applied', "info", "all", blog_id); 
     327        } else { 
     328            showMsg("<__trans phrase="The selected theme has been applied!" escape="js">", 'theme-applied', "info"); 
     329        } 
     330    } 
     331 
     332    function stylesLoaded(client, styles, repo_id) { 
     333        var btn = getByID("find-button"); 
     334        TC.addClassName(TC.elementOrId("loading-styles"), "hidden"); 
     335        TC.removeClassName(btn, "hidden"); 
     336 
     337        var repo_num; 
     338        var cat; 
     339 
     340        var data; 
     341        try { 
     342            data = eval('('+styles+')'); 
     343        } catch (e) { 
     344            showMsg("<__trans phrase="Error loading themes! -- [_1]" params="ERROR" escape="js">".replace(/ERROR/, styles), "error", "error"); 
     345            return; 
     346        } 
     347        if (data.error) { 
     348            showMsg("<__trans phrase="Error loading themes! -- [_1]" params="ERROR" escape="js">".replace(/ERROR/, data.error), "error", "error"); 
     349            return; 
     350        } 
     351        log(data.result); 
     352        if (!repo_id) { 
     353            if (data.result.repo) { 
     354                url = data.result.repo['url']; 
     355                if (repo_urls[url] != undefined) { 
     356                    repo_num = repo_urls[url]; 
     357                    cat = 'repo_' + repo_num; 
     358                } else { 
     359                    repo_num = repos.length; 
     360                    repo_urls[url] = repo_num; 
     361 
     362                    // new repo -- create new 
     363                    // category for it 
     364                    cat = 'repo_' + repo_num; 
     365                    createCategory(cat, data.result.repo['display_name'], url); 
     366                } 
     367                repos[repo_num] = url; 
     368            } 
     369            if (data.result.auto) { 
     370                cat = 'more'; 
     371                enableCategory(cat); 
     372            } 
     373            chooseCategory('category-' + cat); 
     374        } else { 
     375            var repo; 
     376            for (var i = 0; i < libraries.length; i++) { 
     377                if (libraries[i].key == repo_id) { 
     378                    repo = libraries[i]; 
     379                    break; 
     380                } 
     381            } 
     382            if (repo) { 
     383                repo.loaded = true; 
     384                cat = 'repo-' + repo_id; 
     385                enableCategory(cat); 
     386                chooseCategory('category-' + cat); 
     387            } 
     388        } 
     389        if (data.result.themes) 
     390            loadThemes(data.result.themes, cat); 
     391    } 
     392 
     393    function createCategory(cat_name, cat_title, url) { 
     394        // things to create... 
     395        //   #1: new scrollbox under id 'categories' 
     396        /* 
     397                <div class="category" id="category-repo" title="Remote Styles" style="display: none"> 
     398                    <img src="<mt:var name="plugin_static_uri">images/mixed-media.gif" alt="" /><span id="repo-name">Remote Styles</span> 
     399                </div> 
     400        */ 
     401        var cats = getByID("categories"); 
     402 
     403        element = document.createElement( "div" ); 
     404        element.title = url; 
     405        element.className = "category"; 
     406        element.id = "category-" + cat_name; 
     407 
     408        var img = document.createElement( "img" ); 
     409        img.src = repoImg; 
     410        img.alt = ""; 
     411        element.appendChild( img ); 
     412 
     413        var spn = document.createElement( "span" ); 
     414        spn.appendChild( document.createTextNode( cat_title ) ); 
     415        element.appendChild( spn ); 
     416 
     417        cats.appendChild( element ); 
     418 
     419        //   #2: new div under id templates-wrapper 
     420        /* 
     421            <div class="scrollbox" id="display-repo" style="display: none;"></div> 
     422        */ 
     423 
     424        var wrapper = getByID("templates-wrapper"); 
     425 
     426        var div = document.createElement( "div" ); 
     427        div.className = "scrollbox"; 
     428        div.id = "display-" + cat_name; 
     429        wrapper.appendChild(div); 
     430        element.onclick = chooseCategoryClosure( element.id ); 
     431 
     432        categories[ element.id ] = 
     433        { 
     434            "element" : element, 
     435            "display" : div 
     436        }; 
     437 
     438        enableCategory(cat_name); 
     439    } 
     440 
     441    function loadThemes(themes, pfx) { 
     442        var names = {}; 
     443        for (var i = 0; i < themes.length; i++) { 
     444            var prefix = themes[i]['prefix']; 
     445            if (!prefix) prefix = pfx; 
     446            var name = prefix + ':' + themes[i]['name']; 
     447            if (names[themes[i]['name']]) { 
     448                names[themes[i]['name']]++; 
     449                name += "_" + names[themes[i]['name']]; 
     450            } else { 
     451                names[name] = 1; 
     452            } 
     453            themes[i]['name'] = name; 
     454            themes[i].tags[themes[i].tags.length] = "collection:"+prefix; 
     455            if (mixer.entries[name]) { 
     456                // merge in tags 
     457                var existing_tags = mixer.entries[name].tags; 
     458                if (existing_tags && existing_tags.length) { 
     459                    var new_tag_names = {}; 
     460                    for (var j in themes[i].tags) 
     461                        new_tag_names[j] = true; 
     462                    for (var j = 0; j < existing_tags.length; j++) { 
     463                        if (!new_tag_names[existing_tags[j]]) { 
     464                            themes[i].tags[themes[i].tags.length] = existing_tags[j]; 
    212465                        } 
    213466                    } 
    214                     if (!found) 
    215                         entry.blogs[entry.blogs.length] = selected_blog_id; 
    216  
    217                     /* loop through all the 'current' themes and strip 
    218                        this blog id from any that don't match the 
    219                        selected theme */ 
    220                     for (var i in mixer.entries) { 
    221                         if (i == selected) 
    222                             continue; 
    223                         for (var j = 0; j < mixer.entries[i].blogs.length; j++) { 
    224                             if (mixer.entries[i].blogs[j] == selected_blog_id) { 
    225                                 mixer.entries[i].blogs.splice(j,1); 
    226                                 break; 
    227                             } 
    228                         } 
    229                         if (mixer.entries[i].blogs.length == 0) { 
    230                             // no longer 'current' 
    231                             for (var j = 0; j < mixer.entries[i].tags.length; j++) { 
    232                                 if (mixer.entries[i].tags[j] == 'collection:current') { 
    233                                     mixer.entries[i].tags.splice(j,1); 
    234                                     break; 
    235                                 } 
    236                             } 
    237                         } 
    238                     } 
    239                     mixer.createTagIndexes(); 
    240                     mixer.remix(); 
    241                 } 
    242                 chooseCategory('category-current'); 
    243                 if (!btn) return; 
    244                 btn.value = "<MT_TRANS phrase="Choose this Design">"; 
    245                 btn.disabled = false; 
    246                 alert(result); 
    247             } 
    248  
    249             function stylesLoaded(client, styles) { 
    250                 var btn = getByID("find-button"); 
    251                 if (!btn) return; 
    252                 var repo_num; 
    253                 var cat; 
    254  
    255                 var data; 
    256                 try { 
    257                     data = eval('('+styles+')'); 
    258                 } catch (e) { 
    259                     alert(trans("Error loading themes! -- [_1]", styles)); 
    260                     btn.value = "<MT_TRANS phrase="Find Style">"; 
    261                     btn.disabled = false; 
    262                     return; 
    263                 } 
    264                 if (data.repo) { 
    265                     url = data.repo['url']; 
    266                     if (repo_urls[url] != undefined) { 
    267                         repo_num = repo_urls[url]; 
    268                         cat = 'repo_' + repo_num; 
    269                     } else { 
    270                         repo_num = repos.length; 
    271                         repo_urls[url] = repo_num; 
    272  
    273                         // new repo -- create new 
    274                         // category for it 
    275                         cat = 'repo_' + repo_num; 
    276                         createCategory(cat, data.repo['display_name'], url); 
    277                     } 
    278                     repos[repo_num] = url; 
    279                 } 
    280                 if (data.auto) { 
    281                     cat = 'more'; 
    282                     enableCategory(cat); 
    283                 } 
    284                 chooseCategory('category-' + cat); 
    285                 if (data.themes) 
    286                     loadThemes(data.themes, cat); 
    287  
    288                 btn.value = "<MT_TRANS phrase="Find Style">"; 
    289                 btn.disabled = false; 
    290             } 
    291  
    292             function createCategory(cat_name, cat_title, url) { 
    293                 // things to create... 
    294                 //   #1: new scrollbox under id 'categories' 
    295                 /* 
    296                         <div class="category" id="category-repo" title="Remote Themes" style="display: none"> 
    297                             <img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/mixed-media.gif" alt="" /><span id="repo-name">Remote Themes</span> 
    298                         </div> 
    299                 */ 
    300                 var cats = getByID("categories"); 
    301  
    302                 element = document.createElement( "div" ); 
    303                 element.title = url; 
    304                 element.className = "category"; 
    305                 element.id = "category-" + cat_name; 
    306  
    307                 var img = document.createElement( "img" ); 
    308                 img.src = repoImg; 
    309                 img.alt = ""; 
    310                 element.appendChild( img ); 
    311  
    312                 var spn = document.createElement( "span" ); 
    313                 spn.appendChild( document.createTextNode( cat_title ) ); 
    314                 element.appendChild( spn ); 
    315  
    316                 cats.appendChild( element ); 
    317  
    318                 //   #2: new div under id templates-wrapper 
    319                 /* 
    320                     <div class="scrollbox" id="display-repo" style="display: none;"></div> 
    321                 */ 
    322  
    323                 var wrapper = getByID("templates-wrapper"); 
    324  
    325                 var div = document.createElement( "div" ); 
    326                 div.className = "scrollbox"; 
    327                 div.id = "display-" + cat_name; 
    328                 wrapper.appendChild(div); 
    329                 element.onclick = chooseCategoryClosure( element.id ); 
    330  
    331                 categories[ element.id ] = 
    332                 { 
    333                     "element" : element, 
    334                     "display" : div 
    335                 }; 
    336  
    337                 enableCategory(cat_name); 
    338             } 
    339  
    340             function loadThemes(themes, prefix) { 
    341                 var names = {}; 
    342                 for (var i = 0; i < themes.length; i++) { 
    343                     var name = prefix + '-' + themes[i]['name']; 
    344                     if (names[themes[i]['name']]) { 
    345                         names[themes[i]['name']]++; 
    346                         name += "_" + names[themes[i]['name']]; 
    347                     } else { 
    348                         names[name] = 1; 
    349                     } 
    350                     themes[i]['name'] = name; 
    351                     themes[i].tags[themes[i].tags.length] = "collection:"+prefix; 
    352                     if (mixer.entries[name]) { 
    353                         // merge in tags 
    354                         var existing_tags = mixer.entries[name].tags; 
    355                         if (existing_tags && existing_tags.length) { 
    356                             var new_tag_names = {}; 
    357                             for (var j in themes[i].tags) 
    358                                 new_tag_names[j] = true; 
    359                             for (var j = 0; j < existing_tags.length; j++) { 
    360                                 if (!new_tag_names[existing_tags[j]]) { 
    361                                     themes[i].tags[themes[i].tags.length] = existing_tags[j]; 
    362                                 } 
    363                             } 
    364                         } 
    365                     } else { 
    366                         mixer.addEntries(themes[i]); 
    367                     } 
    368                 } 
    369                 mixer.display(); 
    370             } 
    371             function getStyles() { 
    372                 var btn = getByID("find-button"); 
    373                 if (!btn) return; 
    374                 btn.disabled = true; 
    375                 btn.value = "<MT_TRANS phrase="Loading...">"; 
    376  
    377                 var el = getByID('repo-url'); 
    378                 if (!el) return; 
    379                 var url = el.value; 
    380                 var client = TC.Client.call({ 
    381                     'load': stylesLoaded, 
    382                     'uri': '<TMPL_VAR NAME=SCRIPT_URL>', 
    383                     'method': 'POST', 
    384                     'arguments': { 
    385                         '__mode': 'js', 
    386                         'url': url 
    387                     } 
    388                 }); 
    389             } 
    390         </script> 
    391  
    392 <!-- end script section --> 
    393  
    394         <div id="wrapper"> 
    395  
    396 <TMPL_IF NAME=BLOG_LOOP> 
    397  
    398          <p><MT_TRANS phrase="StyleCatcher lets you easily browse through styles and then apply them to your blog in just a few clicks. To find out more about Movable Type styles, or for new sources for styles, visit the <a href='http://www.sixapart.com/movabletype/styles'>Movable Type styles</a> page."> 
    399          <TMPL_IF NAME=CONFIG_LINK><MT_TRANS phrase=" To change the location of your local theme repository, <a href='<TMPL_VAR NAME=CONFIG_LINK>'> click here."></a></TMPL_IF></p> 
    400  
    401            <script type="text/javascript"> 
    402            if(navigator.userAgent.indexOf("Firefox")!=-1){ 
    403            var versionindex=navigator.userAgent.indexOf("Firefox")+8 
    404               document.writeln("<p><MT_TRANS phrase="Install <a href='http://greasemonkey.mozdev.org/'>GreaseMonkey</a>"> <a href='<TMPL_VAR NAME=SCRIPT_URL>?__mode=gm<TMPL_IF NAME=BLOG_ID>&amp;blog_id=<TMPL_VAR NAME=BLOG_ID></TMPL_IF>;file=stylecatcher.user.js'><MT_TRANS phrase="StyleCatcher user script."></a></p>"); 
    405            } 
    406            </script> 
    407  
    408            <form method="get" action="<TMPL_VAR NAME=SCRIPT_URL>"> 
    409               <strong><MT_TRANS phrase="Theme or Repository URL:"></strong> 
    410               <input class="repo-url" style="width:350px;" name="url" id="repo-url" value="<TMPL_VAR NAME=LAST_THEME_URL>" /> 
    411               <input type="button" id="find-button" value="<MT_TRANS phrase="Find Styles">" onclick="getStyles()" /> 
    412            </form> 
    413             <p><strong><MT_TRANS phrase="NOTE:"></strong> <MT_TRANS phrase="It will take a moment for themes to populate once you click 'Find Style'."></p>  
    414             <p id="status-message" class="message" style="display: none"></p> 
    415              
    416             <div id="template-picker"> 
    417                 <div id="categories-wrapper"> 
    418                     <h2><MT_TRANS phrase="Categories"></h2> 
    419                     <div class="scrollbox" id="categories"> 
    420 <TMPL_IF NAME=SINGLE_BLOG> 
    421                         <div class="category" id="category-current" title="<MT_TRANS phrase="Current theme for your weblog">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/top-rated.gif" alt="Your Current Theme" /><span><MT_TRANS phrase="Current Theme"></span> 
    422 <TMPL_ELSE> 
    423                         <div class="category" id="category-current" title="<MT_TRANS phrase="Current themes for your weblogs">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/top-rated.gif" alt="Your Current Themes" /><span><MT_TRANS phrase="Current Themes"></span> 
    424 </TMPL_IF> 
    425                         </div> 
    426                         <div class="category" id="category-my-designs" title="<MT_TRANS phrase="Locally saved themes">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/my-designs.gif" alt="my-designs" /><span><MT_TRANS phrase="Saved Themes"></span> 
    427                         </div> 
    428                         <div class="category" id="category-more" title="<MT_TRANS phrase="Single themes from the web">" style="display: none"><img src="<TMPL_VAR NAME=PLUGIN_STATIC_URI>images/featured.gif" alt="my-designs" /><span><MT_TRANS phrase="More Themes"></span> 
    429                         </div> 
    430                     </div> 
    431                 </div> 
    432  
    433                 <div id="templates-wrapper"> 
    434                     <h2 id="selected-category-title"><MT_TRANS phrase="Templates"></h2> 
    435                     <div class="scrollbox" id="display-current" style="display: none;"></div> 
    436                     <div class="scrollbox" id="display-my-designs" style="display: none;"></div> 
    437                     <div class="scrollbox" id="display-more" style="display: none;"></div> 
    438                 </div> 
    439  
    440                 <div id="details-wrapper" style="display: none"> 
    441                     <h2><MT_TRANS phrase="Details"></h2> 
    442                     <div id="display-details"> 
    443                         <div class="tc-mixer-entry"></div> 
    444                     </div> 
    445                 </div> 
    446  
    447                 <a id="show-details" href="javascript:void(0);" onclick="return showDetails( true );" style="display: none"><MT_TRANS phrase="Show Details"></a> 
    448                 <a id="hide-details" href="javascript:void(0);" onclick="return showDetails( false );" style="display: none"><MT_TRANS phrase="Hide Details"></a> 
     467                } 
     468            } else { 
     469                mixer.addEntries(themes[i]); 
     470            } 
     471        } 
     472        mixer.display(); 
     473    } 
     474 
     475    function downloadStyles() { 
     476        var url; 
     477        if (url = prompt("<__trans phrase="Stylesheet or Repository URL" escape="js">")) { 
     478            getStyles(null, url); 
     479        } 
     480    } 
     481 
     482    function getStyles(repo_id, url) { 
     483        var btn = getByID("find-button"); 
     484        TC.addClassName(btn, "hidden"); 
     485        TC.removeClassName(TC.elementOrId("loading-styles"), "hidden"); 
     486 
     487        var client = TC.Client.call({ 
     488            'load': function(c,s) { stylesLoaded(c,s,repo_id) }, 
     489            'uri': '<mt:var name="script_url">', 
     490            'method': 'POST', 
     491            'arguments': { 
     492                '__mode': 'stylecatcher_js', 
     493                'url': url 
     494            } 
     495        }); 
     496    } 
     497/* ]]> */ 
     498</script> 
     499<!-- end stylecatcher script section --> 
     500</mt:setvarblock> 
     501<mt:include name="include/header.tmpl"> 
     502 
     503<div id="msg-block"> 
     504</div> 
     505 
     506<div id="wrapper"> 
     507 
     508<!-- 
     509<form method="get" action="<mt:var name="script_url">"> 
     510    <strong><__trans phrase="Stylesheet or Repository URL:"></strong> 
     511    <input class="repo-url" style="width:350px;" name="url" id="repo-url" value="<mt:var name="last_theme_url">" /> 
     512    <input type="button" id="find-button" value="<__trans phrase="Download Styles">" onclick="getStyles()" /> 
     513    <span class="hidden" id="loading-styles"> 
     514        <img src="<mt:var name="static_uri">images/indicator.white.gif" height="16" width="16" alt="" /> 
     515        <__trans phrase="Loading..."> 
     516    </span> 
     517</form> 
     518--> 
     519 
     520<p id="status-message" class="message" style="display: none"></p> 
     521 
     522<div id="template-picker"> 
     523    <div id="categories-wrapper"> 
     524 
     525        <h2> 
     526            <span style="float:right"> 
     527                <a href="javascript:void(0)" id="find-button" onclick="return downloadStyles()" class="icon-right icon-create" title="Download new styles">&nbsp;</a> 
     528 
     529            <span class="hidden" id="loading-styles"> 
     530                <img src="<mt:var name="static_uri">images/indicator.white.gif" height="16" width="16" alt="" /> 
     531            </span> 
     532 
     533            </span> 
     534 
     535            <__trans phrase="Categories"> 
     536        </h2> 
     537 
     538        <div class="scrollbox" id="categories"> 
     539            <div class="category" id="category-current" title="<__trans phrase="Current theme for your weblog">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/top-rated.gif" alt="Your Current Style" /><span><__trans phrase="Current Style"></span> 
    449540            </div> 
    450              
    451             <br class="clr" /> 
    452  
    453             <div id="select-design-controls"> 
    454 <TMPL_UNLESS NAME=SINGLE_BLOG> 
    455             <select name="blog_id" id="select-blog"> 
    456             <option value=""><MT_TRANS phrase="Select a Weblog..."></option> 
    457             <TMPL_LOOP NAME=BLOG_LOOP> 
    458             <option value="<TMPL_VAR NAME=BLOG_ID>"><TMPL_VAR NAME=BLOG_NAME></option> 
    459             </TMPL_LOOP> 
    460             </select> 
    461 </TMPL_UNLESS> 
    462  
    463             <input type="button" name="choose" id="apply-button" onclick="applyDesign()" value="<MT_TRANS phrase="Apply Selected Design">" /> 
     541            <div class="category" id="category-my-designs" title="<__trans phrase="Locally saved themes">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/my-designs.gif" alt="my-designs" /><span><__trans phrase="Saved Styles"></span> 
    464542            </div> 
    465             <br class="clr" /> 
     543            <div class="category" id="category-mt-designs" title="<__trans phrase="Default Styles">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/gear.gif" alt="mt-designs" /><span><__trans phrase="Default Styles"></span> 
     544            </div> 
     545            <div class="category" id="category-more" title="<__trans phrase="Single themes from the web">" style="display: none"><img src="<mt:var name="plugin_static_uri">images/featured.gif" alt="my-designs" /><span><__trans phrase="More Styles"></span> 
     546            </div> 
     547            <mt:loop name="style_library"> 
     548            <div class="category" id="category-repo-<mt:var name="key">" title="<mt:var name="description_label" escape="html">"><img src="<mt:var name="plugin_static_uri">images/featured.gif" alt="more-designs" /><span><mt:var name="label"></span> 
     549            </div> 
     550            </mt:loop> 
    466551        </div> 
    467  
    468 <TMPL_ELSE> 
    469  
    470 <p class="message"> 
    471 <MT_TRANS phrase="You don't appear to have any weblogs with a 'styles-site.css' template that you have rights to edit. Please check your weblog(s) for this template."> 
    472 </p> 
    473  
    474 </TMPL_IF> 
    475  
    476 <TMPL_INCLUDE NAME="footer.tmpl"> 
     552    </div> 
     553 
     554    <div id="templates-wrapper"> 
     555        <h2 id="selected-category-title"><__trans phrase="Templates"></h2> 
     556        <div class="scrollbox" id="display-current" style="display: none;"></div> 
     557        <div class="scrollbox" id="display-my-designs" style="display: none;"></div> 
     558        <div class="scrollbox" id="display-mt-designs" style="display: none;"></div> 
     559        <div class="scrollbox" id="display-more" style="display: none;"></div> 
     560        <mt:loop name="style_library"> 
     561        <div class="scrollbox" id="display-repo-<mt:var name="key">" style="display: none;"></div> 
     562        </mt:loop> 
     563    </div> 
     564 
     565    <div id="details-wrapper"> 
     566        <h2><__trans phrase="Selected Design"></h2> 
     567        <div id="display-details"> 
     568        <div id="select-design-controls" class="actions-bar"> 
     569            <form method="get" action=""> 
     570                <p> 
     571                    <label for="layout-list"><__trans phrase="Layout">:</label> 
     572                    <select id="layout-list" onchange="updateApplyButton()"> 
     573                    </select> 
     574                </p> 
     575 
     576                <span class="button-actions actions"> 
     577                <button 
     578                    type="button" 
     579                    accesskey="s" 
     580                    id="apply-button" 
     581                    title="<__trans phrase="Apply Design"> (s)" 
     582                    onclick="applyDesign()" 
     583                    class="primary-button"><__trans phrase="Apply Design"></button> 
     584                </span> 
     585            </form> 
     586        </div> 
     587 
     588        <div id="display-details-content"></div> 
     589 
     590 
     591    </div> 
     592 
     593</div> 
     594 
     595<br class="clr" /> 
     596 
     597</div> 
     598 
     599<mt:include name="include/footer.tmpl">