(function($){
    $.fn.extend({
        AddArrow: function(options) {
             var defaults = {
                ArrowHeight: '32',
                ArrowWidth: '32',
                ArrowPath: 'images/arrow.png',
                Orientation: 'Top',
                Fade: true,
                FadeSpeed: 300,
                MouseOver: true
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                  var o = options;
                  var pos = $(this).position();
                  var width = $(this).width();
                  var height = $(this).height();


                  switch (o.Orientation) {
                    case (o.Orientation = "Top"):
                        $(this).append($('<img>', {
                            src: o.ArrowPath,
                            alt: "Arrow-Top",
                            class: "arrows",
                            style: "height: "+o.ArrowWidth+"px; width: "+o.ArrowHeight+"px; top: "+pos.top+"px; left: "+width / 2 + pos.left+"px; position: absolute; display: none;"
                        }));
                    break;
                    case (o.Orientation = "Right"):
                        $(this).append($('<img>', {
                            src: o.ArrowPath,
                            alt: "Arrow-Top",
                            class: "arrows",
                            style: "height: "+o.ArrowWidth+"px; width: "+o.ArrowHeight+"px; top: "+pos.top + height / 2+"px; left: "+width + pos.left - o.ArrowWidth+"px; position: absolute; display: none;"
                        }));
                    break;
                    case (o.Orientation = "Bottom"):
                        $(this).append($('<img>', {
                            src: o.ArrowPath,
                            alt: "Arrow-Top",
                            class: "arrows",
                            style: "height: "+o.ArrowWidth+"px; width: "+o.ArrowHeight+"px; top: "+pos.top + height - o.ArrowHeight+"px; left: "+width / 2 + pos.left+"px; position: absolute; display: none;"
                        }));
                    break;
                    case (o.Orientation = "Left"):
                        $(this).append($('<img>', {
                            src: o.ArrowPath,
                            alt: "Arrow-Top",
                            class: "arrows",
                            style: "height: "+o.ArrowWidth+"px; width: "+o.ArrowHeight+"px; top: "+pos.top + height / 2+"px; left: "+pos.left+"px; position: absolute; display: none;"
                        }));
                    break;
                  }
                  if(o.Fade)
                  {
                        $(this).hover(function() {
                            $(".arrows").fadeIn(o.FadeSpeed);
                        },
                        function() {
                            $(".arrows").fadeOut(o.FadeSpeed);
                        });
                  }
            });
        }
    });
})(jQuery);