(function($) {
    var features = [];

    $.fn.features = function(options) {
        getFeatures(this).Execute($(this), options);
    };

    // helper methods
    function getFeatures(element) {
        var id = $(element).attr('id');
        if (id.length == 0) {
            id = guid();
            $(element).attr('id', id);
        }

        var feature = features[id];
        if (feature == null) {
            feature = features[id] = new Feature();
        }
        return feature;
    }

    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }

    function guid() {
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }

    // Feature Object
    function Feature() {
        var settings, target;

        this.Execute = function(root, options) {
            init(root, options);
        }

        function init(root, options) {
            target = root;

            settings = $.extend({
                urls: [],
                page: 1,

                pageAreaSelector: '',
                onPageChange: null,
                onComplete: null
            }, options);

            loadFeatures();

            if (settings.onComplete != null) {
                settings.onComplete();
            }
        };

        function loadFeatures() {
            var counter = 1;
            $.each(settings.urls, function(index, element) {
                if (element != null) {
                    var div = $(document.createElement('div')).css('display', 'none').attr('class', 'feature-page').attr('page', counter);
                    var button = $(document.createElement('div')).css('float', 'left').css('cursor', 'pointer').attr('class', 'feature-button').attr('page', counter).html(counter);

                    if (counter == 1)
                        div.css('display', 'block');

                    button.click(function() {
                        var b = $(this);
                        target.children("div[page!='" + b.attr('page') + "']").fadeOut(300, function() {
                            target.children("div[page='" + b.attr('page') + "']").fadeIn(300);
                        });

                        if (settings.onPageChange != null) {
                            settings.onPageChange(b.attr('page'));
                        }
                    });

                    var url = element.url;
                    if (element.selector != '')
                        url = url + ' ' + element.selector;

                    div.load(url, guid());

                    target.append(div);
                    $(settings.pageAreaSelector).append(button);

                    counter++;
                }
            });
        }
    }
})(jQuery);