var bbyo = {
    fix_z_index : function() {
        if ((jQuery.userAgent.browserVersionX == 'explorer6') || (jQuery.userAgent.browserVersionX == 'explorer7')) {
            var zIndexNumber = 10000;
            jQuery('div.innerform').each(function() {
                jQuery(this).css('zIndex', zIndexNumber);
                zIndexNumber -= 10;
            });
        }
    },
    fix_ie7_drag_drop: function() {
        //
    },
    reposition_rounded_corner_divs : function() {
        if (jQuery.userAgent.browserVersionX == 'explorer6') {
            jQuery('#form .innerform').each(function() {
                jQuery(this).css('position', 'static');
                jQuery(this).css('position', 'relative');
            });
            jQuery('#form').each(function() {
                jQuery(this).css('position', 'static');
                jQuery(this).css('position', 'relative');
            });
        }
    },
    show_login : function(args) {
        var url = '/mini/login/index.pl?';
        for(var a in args) {
            url = url + escape(a) + '=' + escape(args[a]) + '&'; 
        }
        tb_show('', url + 'TB_iframe=true','');
    },
    show_register : function(args) {
        var url = '/mini/register/index.pl?';
        for(var a in args) {
            url = url + escape(a) + '=' + escape(args[a]) + '&'; 
        }
        tb_show('', url + 'TB_iframe=true','');
    },
    show_forgot_pw : function(args) {
        var url = '/mini/forgot_password/index.pl?';
        for(var a in args) {
            url = url + escape(a) + '=' + escape(args[a]) + '&'; 
        }
        tb_show('', url + 'TB_iframe=true','');
    },
    update_login_box : function(login) {
        if (vanilla.is_logged_in() || login) {
            jQuery('#login_box').hide();
            var email = login ? login : vanilla.cookie.auth_params().email;
            jQuery('#logout_username').html(email);
            jQuery('#logout_box').show();
        } else {
            jQuery('#logout_box').hide();
            jQuery('#login_box').show();
            jQuery('#login_back').val(window.location);
        }
    },
    subscribe_to_this_person : function (args) {
        // clear the cache to check if the cookie has been set since this was last called
        if (args === null ) args = {};
        vanilla.cookie._auth_params = null;
        if( vanilla.is_logged_in() ) {
            var $target = jQuery('div.profile_subscribe');
            jQuery($target).removeClass('ir');
            $target.html('<img src="/images/waiting_circle.gif" height="46">');
            var person_id = args.person_id;
            jQuery.ajax({
                url: '/create',
                data: 'rm=sub&id=' + person_id,
                success: function(msg) {
                    var $target = jQuery('div.profile_subscribe');
                    $target.html('<img src="/images/btn_subscribed.gif">');
                }
            });
        } else {
            // console.log('NOT logged in');
            bbyo.show_login();
        }
    },
    favorite_this_service : function (args) {
        // clear the cache to check if the cookie has been set since this was last called
        if(args === null ) args = {};
        vanilla.cookie._auth_params = null;
        if( vanilla.is_logged_in() ) {
            var $target = jQuery('li.favorite');
            jQuery($target).addClass('processing');
            var service_id = args.service_id;
            jQuery.ajax({
                url: '/create',
                data: 'rm=fav&id=' + service_id,
                success: function(msg) {
                    $target.removeClass('processing').addClass('checked');
                }
            });
        } else {
            // console.log('NOT logged in');
            bbyo.show_login();
        }
    },
    select_media : function(e, path, title, media_type_id) {
        var $control = jQuery('.active_control');
        var $new_media_div = jQuery($control).parents('div.new_media');
        $new_media_div.children('.new_media_fields').remove();
        jQuery($new_media_div).append(bbyo.Additions.add_media({media_type_id: media_type_id, path: path, title: title}));

        var $li = jQuery($new_media_div).parent();
        bbyo.renumber_additions(jQuery($li).closest('div.prayer_content'));
        bbyo.reposition_rounded_corner_divs();
    },
    renumber_personal_content : function (insertion_point) {
        bbyo.fix_z_index();
        jQuery('ul.sf-menu').superfish();

        var $counter = 0;
        var $parent_id = jQuery(insertion_point).attr('id');
        //TODO make this id start with something other than a number, then parse it in the js.
        jQuery(insertion_point).children('div.personal_content').each(function(){

            var $input_name = 'prayer_id_' + $parent_id + '-' + $counter;
            jQuery(this).attr('id', $parent_id + '-' + $counter); // system prayers have an id, these need one too.
            // console.log('id is now ' + $parent_id + '-' + $counter);
            jQuery(this)
                .children('.prayer_content').children('ul.sortable').children('li').children('div.prayer_texts')
                .children('input.new_prayer_title').attr('name', $input_name + '_title')
            ;
            jQuery(this)
                .children('.prayer_content').children('ul.sortable').children('li').children('div.prayer_texts')
                .children('textarea.new_prayer_text').attr('name', $input_name + '_text')
            ;
            jQuery(this)
                .children('.prayer_content').children('ul.sortable').children('li').children('div.prayer_texts')
                .children('input.new_prayer_existing').attr('name', $input_name + '_existing')
            ;
            jQuery(this)
                .children('.prayer_content').children('ul.sortable').children('li').children('div.prayer_texts')
                .children('input.new_prayer_parent').attr('name', $input_name + '_parent').val($parent_id);

            $counter++;
        });
        return $counter;
    },
    renumber_additions : function (prayer_content_div) {
        var $counter = 0;
        var $parent_id = jQuery(prayer_content_div).parent().attr('id');
        // new_notation
        // new_media
        // prayer_texts
        jQuery(prayer_content_div).children('ul.sortable').children('li').children('div.new_media, div.prayer_texts').each( function(){
            if ( jQuery(this).hasClass('prayer_texts') ) {
                var $input_name = 'prayer_id_' + $parent_id;
                jQuery(this).children('input.extras_sort_value').attr('name', $input_name + '_extras_sort_value').val($counter);
            } else {
                var $input_name = 'prayer_id_' + $parent_id + '-' + $counter;
                // debug hack jQuery(this).children('input.media_search_target').val($input_name + '_media');
                var $new_media_fields = jQuery(this).children('div.new_media_fields');
                /* with formrow (to catch search-for-media structure) */
                jQuery($new_media_fields).children('div.formrow').children('input.media_search_target').attr('name', $input_name + '_media');//.css('background','gold');
                jQuery($new_media_fields).children('div.formrow').children('input.upload_image').attr('name', $input_name + '_upload');//.css('background','orange');
                jQuery($new_media_fields).children('div.formrow').children('input.youtube_link').attr('name', $input_name + '_youtube_link');//.css('background','pink');
                jQuery($new_media_fields).children('div.formrow').children('input.upload_title').attr('name', $input_name + '_media_filename');//.css('background','red');
                jQuery($new_media_fields).children('div.formrow').children('input.extras_sort_value').attr('name', $input_name + '_extras_sort_value').val($counter);
                jQuery($new_media_fields).children('div.formrow').children('textarea.notation').attr('name', $input_name + '_notation');
                /* without formrow (to catch thumbnail structure) */
                jQuery($new_media_fields).children('input.media_search_target').attr('name', $input_name + '_media');//.css('background','gold');
                jQuery($new_media_fields).children('input.upload_image').attr('name', $input_name + '_upload');//.css('background','orange');
                jQuery($new_media_fields).children('input.upload_title').attr('name', $input_name + '_media_filename');//.css('background','red');
                jQuery($new_media_fields).children('input.extras_sort_value').attr('name', $input_name + '_extras_sort_value').val($counter);
                jQuery($new_media_fields).children('textarea.notation').attr('name', $input_name + '_notation');
            }
            $counter++;
        });
        jQuery('ul.sf-menu').superfish();

        return $counter;
    },
    finish_later : function () {
        // clear the cache to check if the cookie has been set since this was last called
        vanilla.cookie._auth_params = null;
        if( vanilla.is_logged_in() ) {
            // console.log('logged in');
            bbyo.Form.submit('prayer_service_form', {rm: 'fl'});
        } else {
            // kind of hacky, but use the "back" param to pass this data through to the thank you page
            bbyo.show_login({ back: 'finish_later' });
        }
    },
    save_service : function () {
        // clear the cache to check if the cookie has been set since this was last called
        vanilla.cookie._auth_params = null;
        if( vanilla.is_logged_in() ) {
            // console.log('logged in');
            bbyo.Form.submit('prayer_service_form');
        } else {
            // console.log('NOT logged in');
            bbyo.show_login();
        }
    },
    make_collapse_link : function () {
        return '<a class="collapse_link"></a>';
    },
    make_remove_additions_link : function () {
        var removeLink = document.createElement("a");
        //jQuery(removeLink).addClass('icon ir remove_additions_link').attr('title', 'Remove').append('Remove');
        jQuery(removeLink).addClass('icon ir remove_additions_link').attr('title', 'Remove').append('Remove');
        /* note: if you modify this behavior, also update the script block near the end of buildaprayer_step3.tmpl */
        jQuery(removeLink).click(function() {
            // save a reference to the prayer_content so we can renumber its children
            var $pc = jQuery(this).parents('div.prayer_content');
            jQuery(this).parents('li').remove();
            bbyo.renumber_additions($pc);
            bbyo.reposition_rounded_corner_divs();
        });
        return removeLink;
    },
    make_remove_prayer_link : function () {
        var removeLink = document.createElement("a");
        jQuery(removeLink).addClass('icon ir remove_prayer_link').attr('title', 'Remove').append('Remove');
        jQuery(removeLink).click(function() {
            // save a reference to the dropzone so we can renumber its children
            var $dz = jQuery(this).parents('div.dropzone');
            jQuery(this).closest('div.prayerbox').remove();
            bbyo.renumber_personal_content($dz);
            bbyo.reposition_rounded_corner_divs();
        });
        return removeLink;
    },
    make_drag_drop_icon : function () {
        return '<span class="icon" title="Move"><img src="/images/dragdrop32_fffcd7.gif" alt="reorder" width="32" height="32" style="float: right; cursor: move;" /></span>';
    },
    add_new_notation : function (e) {
        var div = document.createElement("div");
        jQuery(div).addClass('new_media');

        var toolsDiv = jQuery('<div />').addClass('tools clearfix').prepend( bbyo.make_remove_additions_link() ).prepend( bbyo.make_drag_drop_icon() );
        var headerDiv = jQuery('<div />').addClass('new_media_header clearfix').append(toolsDiv).append('<h3>Choreography or Notation</h3>');
        jQuery(div).append(headerDiv);

        var formDiv = jQuery('<div />').addClass('new_media_fields').append( '<input type="hidden" class="extras_sort_value" />' ).append( '<div class="formrow"><textarea class="edit notation" rows="4" cols="20"></textarea></div>');
        jQuery(div).append(formDiv);

        var list_item = document.createElement("li");
        var handle_span = '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>';
        jQuery(list_item)
            .append(handle_span)
            .append(div)
            .addClass('ui-state-default')
        ;
        jQuery(e).parents('div.prayer_content').children('ul.sortable').append(list_item);
        jQuery(e).parent().parent().hide(); // rollup the dropdown menu
        bbyo.renumber_additions( jQuery(e).parents('div.prayer_content') );
        bbyo.reposition_rounded_corner_divs();
    },
    add_new_audio : function (e) { return bbyo.add_new_media(e, { header : 'Audio' }); },
    add_new_video : function (e) { return bbyo.add_new_media(e, { header : 'Video' }); },
    add_new_image : function (e) { return bbyo.add_new_media(e, { header : 'Image' }); },
    add_new_media : function (e, args) {
        var div = jQuery('<div />').addClass("new_media");

        var toolsDiv = jQuery('<div />').addClass('tools clearfix').prepend(bbyo.make_remove_additions_link()).prepend(bbyo.make_drag_drop_icon());
        var headerDiv = jQuery('<div />').addClass('new_media_header clearfix').append(toolsDiv).append('<h3>' + args.header + '</h3>');
        jQuery(div).append(headerDiv);

        var formDiv = jQuery('<div />').addClass('new_media_fields');

        jQuery(formDiv).append('<input type="hidden" class="extras_sort_value" />');

        if (args.header === 'Image') {
            jQuery(formDiv).append('<div class="image_size_note">For the best results, please use an image that is no more than 670 pixels wide.</div>');
            jQuery(formDiv).append('<div class="formrow"><input class="edit upload_title" type="text"><span class="upload_title_label"> Give a title to be displayed in the Content Finder.</span></div>');
            jQuery(formDiv).append('<div class="formrow"><input class="edit upload_image" type="file" /></div>');
        }
        if (args.header === 'Audio') {
            jQuery(formDiv).append('<div class="audio_format_note">You may upload your MP3 file or select one of ours.  Uploaded files will be listed in the Content Finder.</div>');
            jQuery(formDiv).append('<div class="formrow"><input class="edit upload_title" type="text"><span class="upload_title_label"> Give a title to be displayed in the Content Finder.</span></div>');
            jQuery(formDiv).append('<div class="formrow"><input class="edit upload_image" type="file" /></div>');
        }
        if (args.header === 'Video') {
            jQuery(formDiv).append('<div class="video_note">You may paste a YouTube URL or search our video library for one of our videos.</div>');
            jQuery(formDiv).append('<div class="formrow"><input class="edit youtube_link" type="text" /></div>');
        }

        var searchField = jQuery('<div class="formrow" />');
        searchField.append('<input class="edit media_search_target" />');
        if (args.header === 'Video') {
            searchField.append( bbyo.make_search_video_link() );
        } else if (args.header === 'Audio') {
            searchField.append( bbyo.make_search_audio_link() );
        } else if (args.header === 'Image') {
            searchField.append( bbyo.make_search_images_link() );
        }
        jQuery(formDiv).append(searchField);
        jQuery(formDiv).append('<div class="search_results" />');

        jQuery(div).append(formDiv);

        var list_item = document.createElement("li");
        var handle_span = jQuery('<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>');
        jQuery(list_item)
            .append(handle_span)
            .append(div)
            .addClass('ui-state-default')
        ;
        jQuery(e)
            .closest('div.prayer_content')
            .children('ul.sortable')
            .append(list_item)
        ;
        jQuery(e).parent().parent().hide(); // rollup the dropdown menu
        bbyo.scaledown_images();
        bbyo.renumber_additions( jQuery(e).parents('div.prayer_content') );
        bbyo.reposition_rounded_corner_divs();
    },
    make_search_images_link : function () {
        return bbyo.make_search_media_link( {type: 'images'});
    },
    make_search_video_link : function () {
        return bbyo.make_search_media_link( {type: 'video'});
    },
    make_search_audio_link : function () {
        return bbyo.make_search_media_link( {type: 'audio'});
    },
    make_search_media_link : function (args) {
        if (args) {
            var type = args.type;
            var searchButton = document.createElement('input');
            searchButton.type = 'button';
            searchButton.value = 'Search';
            jQuery(searchButton).addClass('search-'+type+'-button');
            return searchButton;
        }
    },
    contentfinder_submit : function (args) {
        // jQuery('div.contentfinder_results').html(''); // clear any open search results
        var $content = jQuery('div.contentfinder_results');
        $content.html('<img src="/images/blue_waiting_circle.gif">');
        var $keyword_input = jQuery('input#id_by_keyword');
        var $username_input = jQuery('input#id_by_username');
        // jQuery($keyword_input).css('color','yellow').css('background','black');
        // jQuery($username_input).css('color','green').css('background','black');
        var $search_string = ';keywords=' + escape(jQuery($keyword_input).val());

        var $checkboxes = '';
        var media_type_ids = new Array;
        jQuery('input:checkbox:checked').each(
            function() { media_type_ids.push(jQuery(this).val()); }
        );
        if (media_type_ids.length) {
            $checkboxes = ';media_type_id=(' + escape(media_type_ids.join(' or ')) + ')';
        }
        // http://buildaprayer.org/create/search/contentfinder/?rm=perform_search;keywords=;media_type_id=(1+or+7)
        // console.log('/create/search/contentfinder/?rm=perform_search;'+$search_string+$checkboxes);
        $content.load('/create/search/contentfinder/?rm=perform_search;'+$search_string+$checkboxes);
    },
    contentfinder_makedraggable : function (args) {
        // drag-n-drop
    },
    confirm_quit : function() {
        var answer = confirm('Are you sure you want to quit?  Your unsaved changes will be lost.');
        if (answer) {
            window.location = "/";
        }
    },
    scaledown_images : function() {
        jQuery("img.scaledown").each(function() {
            if (this.width > 75) {
                var height = this.height * 75 / this.width;
                jQuery(this).attr('width', '75').attr('height', height);
                //this.height = this.height * 75 / this.width;
                //this.width = 75;
            }
            /*if (this.height > 75) {
                this.width = this.width * 75 / this.height;
                this.height = 75;
            }*/
        });
    }
};

bbyo.query = function(s) {
    // http://stilbuero.de/demo/jquery/query.html?foo=bar with some fix for ; where & is
    var r = {};
    if (s) {
        var q = s.substring(s.indexOf('?') + 1); // remove everything up to the ?
        q = q.replace(/[\&;]$/, ''); // remove the trailing &
        jQuery.each(q.split(/[\&;]/), function() {
            var splitted = this.split('=');
            var key = splitted[0];
            var val = splitted[1];
            // convert numbers
            if (/^[0-9.]+$/.test(val)) val = parseFloat(val);
            // convert booleans
            if (val == 'true') val = true;
            if (val == 'false') val = false;
            // ignore empty values
            if (typeof val == 'number' || typeof val == 'boolean' || val.length > 0) r[key] = val;
        });
    }
    return r;
};

bbyo.Form = {
    submit : function(form, inputs, options) {
        form = typeof form == 'object' ? form : document.forms[form];
        // console.log( 'form '+ form.action  );
        if(options === undefined ) options = {};
        if(inputs === undefined ) inputs = {};

        var old_rm = jQuery("#rm").val();
        if ( inputs.rm ) {
                jQuery("#rm").val( inputs.rm );
        }

        /*
        var old_back = jQuery("login_back").val();
        if ( inputs.back ) {
                // console.log( 'value : ' + jQuery("login_back").val() );
                // console.log( 'inputs.back : ' + inputs.back);
                jQuery("login_back").val( inputs.back );
                // console.log( 'value : ' + jQuery("login_back").val() );
        }
        // jQuery("login_back").val( old_back );
        */

        var old_target = form.target;
        if ( options.new_window ) {
            form.target = window.name + '_b';
        }

        form.submit();

        jQuery("#rm").val( old_rm );
        form.target = old_target;
    }
};

bbyo.dropOptionsInsertionPoints = {
    accept: ".cf_result",
    scope: 'insertion_points',
    drop: function(ev, ui) {
        var div = document.createElement("div");
        jQuery(div).addClass("boxc").append(roundStr);
        jQuery(div).addClass('innerform personal_content prayerbox');

        // jQuery(ui.draggable).css('color','orange').css('background','yellow');
        // jQuery(ui.draggable).parent().css('color','green').css('background','white');

        if (jQuery(ui.draggable).hasClass("add_text")) {
            var $details = jQuery(ui.draggable).children('div.details');
            // jQuery($details).css('background','salmon');
            var $prayer_title = jQuery($details).children("input[name='title']").val();
            var $prayer_english = jQuery($details).children("input[name='notes']").val();
            var $prayer_path = jQuery($details).children("input[name='path']").val();

            var toolsDiv = jQuery('<div />').addClass('tools clearfix').prepend(bbyo.make_remove_additions_link());
            var headerDiv = jQuery('<div />').addClass('new_media_header clearfix prayer_title toggler-opened')
                .append( bbyo.make_collapse_link() )
                .append(toolsDiv)
                .append('<h3>' + $prayer_title + '</h3>');
            jQuery(div).append(headerDiv);

            var query_vars = bbyo.query($prayer_path);
            var prayer_id = query_vars.id;

            jQuery(div).append(
                  '<div class="prayer_content new_prayer_existing">'
                + '<ul class="sortable">'
                    + '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>'
                    + '<div class="prayer_texts">'
                        + '<input type="hidden" class="extras_sort_value" />'
                        + '<p class="English">' + $prayer_english + '</p>'
                        + '<input type="hidden" class="new_prayer_existing" value="' + prayer_id + '"/>'
                        + '<input type="hidden" class="new_prayer_parent" />'
                    + '</div>'
                    + '</li>'
                + '</ul>'
                    + '<div class="extras_menu clearfix">'
                    + bbyo.extras_menu
                    + '</div>'
                + '</div>'
            );

        }

        jQuery('ul.sf-menu').superfish(); // make this drop down menu fancy too.
        jQuery(div).children(".prayer_content").droppable(bbyo.dropOptionsPrayers); //.css('background','blue');
        jQuery(this).append(div);
        // jQuery(this).before(div);
        bbyo.renumber_personal_content( jQuery(this).closest('div.insertion_point') );
        jQuery("ul.sortable").sortable({
            update: function(event, ui) {
                bbyo.renumber_additions(jQuery(this).closest('div.prayer_content'));
            }
        });
    }
};

bbyo.dropOptionsPrayers = {
    accept: ".cf_result",
    scope: 'prayers',
    drop: function(ev, ui) {
        var div = document.createElement("div");

        // jQuery(ui.draggable).css('color','blue').css('background','yellow');
        // jQuery(ui.draggable).parent().css('color','green').css('background','pink');

        if (jQuery(ui.draggable).hasClass("notation")) {
            /*
            var $title_div = jQuery('<div>').html('<h3>Choreography or Notation</h3>');
            $title_div.addClass('prayer_title').addClass('toggler-opened');
            $title_div.prepend(bbyo.make_collapse_link());
            jQuery(div).append($title_div);

            var $input_name = 'new_notation_' + jQuery('div.new_notation').size();
            jQuery(div).append(
                  '<div class="prayer_content new_notation">'
                + '<textarea class="edit" rows="4" cols="20" name="'+ $input_name +'"></textarea>'
                +'</div>'
            );
            */
        } else {
            var $details = jQuery(ui.draggable).children('div.details');
            var path = jQuery($details).children("input[name='path']").val();
            var title = jQuery($details).children("input[name='title']").val();
            var media_type_id;
            var header;

            if (jQuery(ui.draggable).hasClass("add_video")) {
                media_type_id = 7;
                header = 'Video';
            } else if (jQuery(ui.draggable).hasClass("add_audio")) {
                media_type_id = 8;
                header = 'Audio';
            } else if (jQuery(ui.draggable).hasClass("add_image")) {
                media_type_id = 1;
                header = 'Image';
            }

            div = bbyo.Additions.makeMediaDiv({ media_type_id: media_type_id, header: header, path: path, title: title });
        }

        var list_item = document.createElement("li");
        var handle_span = '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>';
        jQuery(list_item)
            .append(handle_span)
            .append(div)
            .addClass("ui-state-default")
        ;
        // console.log('-DROP- ' + list_item);
        jQuery(this)
            .closest('div.prayer_content')
            .children('ul.sortable') // .css('background','green')
            .append(list_item)
        ;
        bbyo.renumber_additions(jQuery(this).closest('div.prayer_content'));
        
    }
};
bbyo.Additions = {
    makeMediaDiv : function(options) {
        if(options === null ) options = {};
        var $media_path = options.path;
        var $media_title = options.title;
        if ($media_title === null) $media_title = 'Untitled';

        var $new_media_div = jQuery('<div />').addClass("new_media");

        var toolsDiv = jQuery('<div />').addClass('tools clearfix').prepend(bbyo.make_remove_additions_link()).prepend(bbyo.make_drag_drop_icon());
        var headerDiv = jQuery('<div />').addClass('new_media_header clearfix').append(toolsDiv).append('<h3>' + options.header + '</h3>');
        jQuery($new_media_div).append(headerDiv);

        jQuery($new_media_div).append(bbyo.Additions.add_media(options));
        return $new_media_div;
    },
    add_media : function(options) {
        if(options === null ) options = {};
        var $media_path = options.path;
        var $media_title = options.title;
        if ($media_title === null) $media_title = 'Untitled';

        var $new_media_div = jQuery('<div />').addClass("new_media_fields");

        jQuery($new_media_div).append('<input type="hidden" class="media_search_target" value="' + $media_path + '" />');
        jQuery($new_media_div).append('<input type="hidden" class="media_title" value="' + $media_title + '" />');
        jQuery($new_media_div).append('<input type="hidden" class="extras_sort_value" value="" />');

        // TODO move details_div up here if can.

        var result_div = document.createElement("div");
        jQuery(result_div).addClass("media_thumbnail").addClass("clearfix");

        var details_div = document.createElement("div");
        jQuery(details_div).addClass("details");

        //create the anchor node
        var titleAnchor=document.createElement("a");
        titleAnchor.setAttribute("href",$media_path);
        titleAnchor.setAttribute("title",$media_title);
        jQuery(titleAnchor).html($media_title+'<br/>');
        titleAnchor.setAttribute("onClick", "tb_show('', '" + $media_path + "',''); return false;");

        jQuery(details_div).append(titleAnchor);

        if ( options.media_type_id == 1 ) {
            // images
            jQuery(result_div).addClass("add_image");

            var img_div = document.createElement("div");
            jQuery(img_div).addClass("img");

            //create the anchor node
            var imgAnchor=document.createElement("a");
            imgAnchor.setAttribute("href",$media_path);
            //create the image node
            myImg=document.createElement("IMG");
            myImg.setAttribute("src",$media_path);
            myImg.setAttribute("class","scaledown");
            myImg.setAttribute("width","75");
            myImg.setAttribute("alt",$media_title);
            // Appends the image node to the anchor
            imgAnchor.appendChild(myImg);
            imgAnchor.setAttribute("onClick", "tb_show('', '"+$media_path+"',''); return false;");

            jQuery(img_div).append(imgAnchor);

            jQuery(result_div).append(img_div);
        }
        if ( ( options.media_type_id == 7 ) || ( options.media_type_id == 9 ) ) {
            // video
            jQuery(result_div).addClass("add_video");

            var icon_div = document.createElement("div");
            jQuery(icon_div).addClass("icon");

            myImg=document.createElement("IMG");
            myImg.setAttribute("src","/images/icon_video.png");
            myImg.setAttribute("height","24");
            myImg.setAttribute("width","24");
            myImg.setAttribute("alt","Video");

            jQuery(icon_div).append(myImg);
            jQuery(result_div).append(icon_div);
        }
        if ( options.media_type_id == 8 ) {
            // audio
            jQuery(result_div).addClass("add_audio");

            var icon_div = document.createElement("div");
            jQuery(icon_div).addClass("icon");

            myImg=document.createElement("IMG");
            myImg.setAttribute("src","/images/icon_audio.png");
            myImg.setAttribute("height","24");
            myImg.setAttribute("width","24");
            myImg.setAttribute("alt","Audio");

            jQuery(icon_div).append(myImg);
            jQuery(result_div).append(icon_div);
        }

        jQuery(result_div).append(details_div);
        jQuery($new_media_div).append(result_div);
        return $new_media_div;
    }
};

jQuery(document).ready(function() {

    bbyo.fix_z_index();

    jQuery("div.dropzone").droppable(bbyo.dropOptionsInsertionPoints); //.css('background','pink');
    jQuery("div.prayer_content").droppable(bbyo.dropOptionsPrayers); //.css('background','blue').css('border-style','solid');
    jQuery('.search-images-button').live('click', function() {
        // console.log('search-images-button click');
        var type = 'images';
        var $content = jQuery(this).parent().next('div.search_results');
        jQuery('.active_control').removeClass('active_control');
        jQuery(this).prev('input.media_search_target').addClass('active_control'); //.css('background-color','green');
        $content.html('<img src="/images/beige_waiting_circle.gif">');
        var $search_string = escape(jQuery(this).prev('input').val());
        $content.load('/create/search/'+ type +'/?rm=perform_search;keywords='+$search_string);
    });
    jQuery('.search-audio-button').live('click', function() {
        // console.log('search-audio-button click');
        var type = 'audio';
        var $content = jQuery(this).parent().next('div.search_results');
        jQuery('.active_control').removeClass('active_control');
        jQuery(this).prev('input.media_search_target').addClass('active_control'); //.css('background-color','yellow');
        $content.html('<img src="/images/beige_waiting_circle.gif">');
        var $search_string = escape(jQuery(this).prev('input').val());
        $content.load('/create/search/'+ type +'/?rm=perform_search;keywords='+$search_string);
    });
    jQuery('.search-video-button').live('click', function() {
        // console.log('search-video-button click');
        var type = 'video';
        var $content = jQuery(this).parent().next('div.search_results');
        jQuery('.active_control').removeClass('active_control');
        jQuery(this).prev('input.media_search_target').addClass('active_control'); //.css('background-color','pink');
        $content.html('<img src="/images/beige_waiting_circle.gif">');
        var $search_string = escape(jQuery(this).prev('input').val());
        $content.load('/create/search/'+ type +'/?rm=perform_search;keywords='+$search_string);
    });
    jQuery(function() {
        jQuery("ul.sortable").sortable({
            update: function(event, ui) {
                bbyo.renumber_additions(jQuery(this).closest('div.prayer_content'));
            }
        });
    });
});