jQuery.fn.mediaPane = function(options) {

    // Default options
    var opt = $.extend({
        animTimer: 900,
        easing: "easeOutQuint",
        autoplay: true,
        playDelay: 3200,
        sleepOnLoop: 9  // remember, x = each slide, so times x by y for your number (2 x runs with 5 slides = 10)
        // - apart from at the min we get a free turn because of layout, so really ((2x5)-1 = 9) - *sigh*
    }, options);

    //init
    var pane;
    _max = 0;
    _current = 0;
    var mediapanel;
    var panelnav;
    var _iteration = 0;

    //for each gallery passed (for multple galleryies per page)
    return this.each(function() {

        pane = $(this).children(".media"); //scoop up media pane content
        mediapanel = $(this); //using this a lot, lets var it up - performance increase?
        _max = pane.length - 1;
        
        $(this).html(''); //clear media pane of static content, we can rebuild you, faster stronger blah bleh

        $(mediapanel).css('position', 'relative');

        ChangePane(_current);
        panelnav = DrawPanelNav(mediapanel);

        if (opt.autoplay) {
            setTimeout(function() { AutoPlay() }, opt.playDelay);
        }


        $('ul#media-numbers li a').click(function() {

            opt.autoplay = false;
            targetnumber = $(this).attr('rel');
            _current = targetnumber;
            ChangePane(targetnumber);
            UpdatePanelNav(panelnav);

            return false;

        });

    });

    function AutoPlay() {

        if (opt.autoplay) {
            if (_iteration <= opt.sleepOnLoop) {

                _current++;
                _iteration++;

                if (_current > _max) {
                    _current = 0;
                }

                ChangePane(_current);
                UpdatePanelNav(panelnav);

                setTimeout(function() { AutoPlay() }, opt.playDelay);
            }
        }
    }

    function ChangePane(target) {
        StopAll();
        newpane = NewPane(target);
        AnimatePane(newpane);
    }

    function StopAll() {
        mediapanel.stop();
        $('.media').stop();
    }

    function NewPane(target) {
        newpane = $(pane[target]);
        newpane.addClass('waiting')
        newpane.css({ opacity: 0, position: 'absolute', top: '0px' });
        return newpane;
    }

    function AnimatePane(replacement) {
        jQuery.easing.def = opt.easing;
        mediapanel.append(replacement);
        //replacement = $(replacement);
        //alert(opt.timer);
        replacement.animate({ opacity: 1 }, opt.animTimer, function() {
            mediapanel.find('.remove').not(replacement).remove();
            replacement.addClass('remove');
        });

    }

    function DrawPanelNav() {
        media = mediapanel;
        classnamereprep = "";
        lilist = "";
        for (i = 0; i <= pane.length - 1; i++) {
            classnamerep = "";
            if (i == _current) {
                classnamerep = "highlight";
            }
            lilist += '<li><a id="panellink' + (i) + '" class="' + classnamerep + '" rel="' + i + '" href="#panel' + (i + 0) + '" title="go to panel #' + (i + 1) + '">' + (i + 1) + '</a></li>';
        }
        mediapanel.append('<ul id="media-numbers">' + lilist + '</ul>');

        return mediapanel.find('#media-numbers');
    }

    function UpdatePanelNav(panel) {
        //panel.css('background', 'black');
        panel.find('a').removeClass('highlight');
        panel.find('a#panellink' + _current).addClass('highlight');
    }

};
