/************************************************
*           JQuery Detailsrow
*           Author: Philip Floetotto
*           Version: 1
*           www: www.webworkflow.co.uk
*           mention: thanks to Sebastien Creme for his help
*           Please feel free to use, alter and distribute
*           
*           Usage:
*           
*           $('#TABLEID').detailsRow("url", {options})
*           
*           
*           Options
*           headerIndicator - 
*           indicatorClosed - html for the closed icon ( You can use any html in here)
*           indicatorOpen - html for the open icon ( You can use any html in here)
*           indicatorClass - which class the td with the indicator gets
*           data - the data which gets passed in the post. (e.g {"id":"id"}) - means it passes the id of the TR element in post variables named "id"
*           tdAttributes - using the jQuery syntax you can pass any attributes to the td e.g {colspan:"20",'class':'container'}
*           trAttributes - using the jQuery syntax you can pass any attributes to the td e.g {'class':"detailsRow"}
*           onLoad - event gets fired when ajax load is finished, passes the td element with the content
*           onHide - event when row is being hidden, passes the td element with the content
*           
************************************************/

$.fn.detailsRow = function(url, options) {

    var defaultSettings = {
        headerIndicator: "+/-",
        indicatorClosed: "<span>+</span>",
        indicatorOpen: "<span>-</span>",
        indicatorClass: "plus",
        loadingclass: "loading",
        data: {},
        tdAttributes: { "colspan": 20, "class": "container" },
        trAttributes: {
            'class': 'detailsRow'
        },
        onLoad: false,
        onHide: false
    };
    settings = $.extend({}, defaultSettings, options);
    var selectedElement = this;

    // alter the DOM
    //var $headerIndicator = $("<th>&nbsp;</th>");
    //$('thead tr', this).prepend($headerIndicator);
    //$('tbody tr', this).prepend($("<td class='" + settings.indicatorClass + "'>" + settings.indicatorClosed + "</td>"));
    $.each($(".td-indfocus-button"), function() {
        $(this).addClass(settings.indicatorClass).attr("id", $(this).text()).html(settings.indicatorClosed);
    });


    // create the details row on click

    $('td.' + settings.indicatorClass, this).unbind('dblclick').click(function(e) {
        // check if the detailsRow already exists
        $parentRow = $(this).parent();
        if ($parentRow.hasClass("no-detail") || $parentRow.parent().is('tfoot')) {
            return false
        }
        var state = $(this).attr("state");
        var data = {};

        if (state == 'closed') {

            $parentRow.next().show();
            $(this)
				.attr('state', 'open')
				.html(settings.indicatorOpen);
            if (settings.onHide) { settings.onHide(this); }

        } else if (state == 'open') {
            $("#trLoading").remove();
            $parentRow.removeClass("selected");
            $parentRow.next().hide();
            $(this)
				.attr('state', 'closed')
				.html(settings.indicatorClosed);

        } else {
            $parentRow.after("<tr id='trLoading'><td colspan='10'><span class='span-loading'><img src='app_themes/default/images/ajax-loader.gif' />Loading data...</span></td></tr>");

            $(this)
				.attr('state', 'open')
				.html(settings.indicatorOpen);

            // retrieve dynamic data to be passed to the post variables
            if (settings.data != null) {
                for (prop in settings.data) {
                    data[prop] = $parentRow.attr(settings.data[prop]);
                }
            }

            // check if the TR element has an url attribute and use that instead
            var tempUrl = '';
            if ($parentRow.attr('url')) {
                tempUrl = $parentRow.attr('url');
            } else {
                tempUrl = url;
            }



            // load the data
            $tr = $("<tr>").attr(settings.trAttributes);
            $td = $("<td>").attr(settings.tdAttributes).load(tempUrl, data, settings.onLoad);
            $td.get(0).colSpan = settings.tdAttributes.colspan; // fix for internet explorer problem
            $parentRow.after($tr.append($td));
        }

    });

    function _toggleAll() {
        $('td.' + settings.indicatorClass, selectedElement).click();
    };

}