﻿/**********************************************

Example:


<body>
    <div class="accordion">
		<div class="accordion-parent">Titulo 1</div>
		<div class="accordion-child"><P>Descripcion titulo 1</P></div>
		<div class="accordion-parent">Titulo 2</div>
		<div class="accordion-child">Descripcion titulo 2</div>
    </div>
</body>

<script type="text/javascript">

$(document).ready(function() {
    $(".accordion").accordion({
        imageUrlExpand: "/webtree/images/foldertree/treeplus.gif",
        imageUrlCollapse: "/webtree/images/foldertree/treeminus.gif"});
});

</script>

**********************************************/

jQuery.fn.accordion = function(options) {

    var settings = jQuery.extend({
        imageUrlExpand: '/images/foldertree/treeplus.gif',
        imageUrlCollapse: '/images/foldertree/treeminus.gif',
        speed: 'normal'
    }, options);

    var accordionContainer = this;
 
    $(".accordion-parent", this).each(function(index) {

        var parent = $(this);
        var parentId = parent.attr("id");
        var img = parent.prepend(getImage()).find("img");
        var child = getChild(index);

        parent.css("cursor", "pointer");

        if (child != null) {
            child.hide();
            child.css("margin-left", "15px");

            parent.click(function() {
                if (child.length > 0) {
                    if (child.is(":visible")) {
                        child.hide(settings.speed);
                        changeIcon(false, img);
                    }
                    else {
                        child.show(settings.speed);
                        changeIcon(true, img);
                    }
                }
            });
        }
    });

    function getChild(index) {

        var childs = $(".accordion-child", accordionContainer);

        if (childs.length >= index)
            return $(childs[index]);
        else
            return null;
    }

    function getImage() {

        var imgTAG = "<div style='float: left; padding: 3px;' class='accordion-image'>" +
                "<img src='" + settings.imageUrlExpand + "' width='9' height='9' alt='Expand'></div>";

        return imgTAG;
    }

    function changeIcon(bShown, img) {
        var imageToShow;
        var altText = "Expand";

        if (bShown) {
            imageToShow = settings.imageUrlCollapse;
            altText = "Collapse";
        }
        else {
            imageToShow = settings.imageUrlExpand;
        }

        img.attr("src", imageToShow);
        img.attr("alt", altText);
    }
};
