var snsiteid = 0; //default is no SN selected

    var _obj_html_inst = {'sid' : null, 'sidp' : null};
    function set_view_html_inst(sn_site_id, pd_type) {
        for (var x in _obj_html_inst) /* hide previously displayed divs */
            if (_obj_html_inst[x]) _obj_html_inst[x].style.display = 'none';
        var obj = null;
        var obj_pdt = null;
        for (var x in dctSNLInfo) {
            if (isNaN(x))
                continue
            if (pd_type && typeof(pd_type) == 'string') {
                obj_pdt = document.getElementById('div_html_instruct_' + x + '_' + pd_type.toLowerCase())
                if (obj_pdt)
                    obj_pdt.style.display = (String(sn_site_id) == String(x) ? 'block' : 'none');
                if (String(sn_site_id) == String(x))
                    _obj_html_inst.sidp = obj_pdt; /* save ref to displayed div */
                };

            obj = document.getElementById('div_html_instruct_' + x);
            if (obj)
                if (obj_pdt)
                    obj.style.display = 'none'
                else {
                    obj.style.display = (String(sn_site_id) == String(x) ? 'block' : 'none')
                    if (String(sn_site_id) == String(x))
                        _obj_html_inst.sid = obj; /* save ref to displayed div */
                    }
        };
        document.getElementById('html_instructions').style.display = 'block';
        var sn_name = dctSNLInfo[ sn_site_id ][ 'SN-NAME' ];
        document.getElementById("html_instructions_sn_name").innerHTML = sn_name;
    };

    var SelectField = {
        init: function() {
            var divs = document.getElementsByTagName('div');

            for (var i = 0; i < divs.length; i++) {
                if (divs[ i ].className == 'dropdown_select') {
                    var div = divs[ i ];

                    var select = div.getElementsByTagName('select')[ 0 ];
                    select.style.display = 'none';

                    var ul = document.createElement('ul');
                    var selectedDiv = document.createElement('div');

                    // Attach a click event to the selected div
                    SelectField.selectedDivEvent(selectedDiv, ul);

                    for (var j = 0; j < select.options.length; j++)
                    {
                        //var option = '<span class="myspace"></span>';
                        var option = select.options[ j ];

                        // Set the selected item from the list
                        if (option.selected) {
                            selectedDiv.innerHTML = option.innerHTML;
                            //alert("selected" + option.className);
                            //selectedDiv.className = "selected" + option.className + " dropdown_select";
                            selectedDiv.className = "selected" + option.className;
                            //alert("selectedDiv.className: " + selectedDiv.className);
                            snsiteid = option.value;  //set the snsiteid to be whatever option was selected
                            objSNName = document.getElementById("postcard_sn_name");
                            objSNName.innerHTML = option.text;
                        }

                        // Create the list item
                        var li = document.createElement('li');
                        li.innerHTML = option.innerHTML;
                        li.className = option.className;

                        li.onmouseover = function()
                        {
                            this.className = this.className + ' hover hover_' + this.className;
                            //alert('onmouseover this.className: ' + this.className);
                        };

                        li.onmouseout = function()
                        {
                            this.className = this.className.replace(' hover_dropdown_myspace', '');
                            this.className = this.className.replace(' hover_dropdown_friendster', '');
                            this.className = this.className.replace(' hover_dropdown_piczo', '');
                            this.className = this.className.replace(' hover_dropdown_multiply', '');
                            this.className = this.className.replace(' hover_dropdown_yahoo360', '');
                            this.className = this.className.replace(' hover_dropdown_orkut', '');
                            this.className = this.className.replace(' hover_dropdown_hi5', '');
                            this.className = this.className.replace(' hover_dropdown_windowslivespaces', '');
                            this.className = this.className.replace(' hover', '');
                            //alert('onmouseout this.className: ' + this.className);
                        }

                        SelectField.selectedOptionEvent(ul, li, selectedDiv, select, j);

                        ul.appendChild(li);
                    }

                    div.appendChild(selectedDiv);
                    div.appendChild(ul);
                }
            }
        },

        selectedDivEvent: function(div, ul)
        {
            // Toggle visibility
            div.onclick = function() {
                if (ul.style.display && ul.style.display == 'block') {
                    ul.style.display = 'none';
                } else {
                    ul.style.display = 'block';
                }
            };
        },

        selectedOptionEvent: function(ul, li, div, select, i)
        {
            li.onclick = function()
            {
                li.className = li.className.replace(' hover_dropdown_myspace', '');
                li.className = li.className.replace(' hover_dropdown_friendster', '');
                li.className = li.className.replace(' hover_dropdown_piczo', '');
                li.className = li.className.replace(' hover_dropdown_multiply', '');
                li.className = li.className.replace(' hover_dropdown_yahoo360', '');
                li.className = li.className.replace(' hover_dropdown_orkut', '');
                li.className = li.className.replace(' hover_dropdown_hi5', '');
                li.className = li.className.replace(' hover_dropdown_windowslivespaces', '');
                li.className = li.className.replace(' hover', '');
                div.innerHTML = this.innerHTML;
                //alert("li.className: " + li.className);
                div.className = "selected" + li.className + " dropdown_select";
                //alert("div.className: " + div.className);
                ul.style.display = 'none';

                select.selectedIndex = i;
                select.onchange();
            };
        }
    };