bio-svgenes 0.3.1 → 0.3.2

data/doc/manual/bootstrap/js/bootstrap.min.js

@@ -0,0 +1,6 @@
+/*!
+* Bootstrap.js by @fat & @mdo
+* Copyright 2012 Twitter, Inc.
+* http://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+!function(e){"use strict";e(function(){e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.alert.data-api",t,n.prototype.close)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},getActiveIndex:function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},to:function(t){var n=this.getActiveIndex(),r=this;if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){r.to(t)}):n==t?this.pause().cycle():this.slide(t>n?"next":"prev",e(this.$items[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u](),f=e.Event("slide",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning||this.$element.hasClass("in"))return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning||!this.$element.hasClass("in"))return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},e.fn.collapse.defaults,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),!function(e){"use strict";function r(){e(t).each(function(){i(e(this)).removeClass("open")})}function i(t){var n=t.attr("data-target"),r;n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=n&&e(n);if(!r||!r.length)r=t.parent();return r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||s.toggleClass("open"),n.focus(),!1},keydown:function(n){var r,s,o,u,a,f;if(!/(38|40|27)/.test(n.keyCode))return;r=e(this),n.preventDefault(),n.stopPropagation();if(r.is(".disabled, :disabled"))return;u=i(r),a=u.hasClass("open");if(!a||a&&n.keyCode==27)return n.which==27&&u.find(t).focus(),r.click();s=e("[role=menu] li:not(.divider):visible a",u);if(!s.length)return;f=s.index(s.filter(":focus")),n.keyCode==38&&f>0&&f--,n.keyCode==40&&f<s.length-1&&f++,~f||(f=0),s.eq(f).focus()}};var s=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=s,this},e(document).on("click.dropdown.data-api",r).on("click.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown")}):t.$element.focus().trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden")})},removeBackdrop:function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()}};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s,o,u,a;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,o=this.options.trigger.split(" ");for(a=o.length;a--;)u=o[a],u=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):u!="manual"&&(i=u=="hover"?"mouseenter":"focus",s=u=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this)));this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e.fn[this.type].defaults,r={},i;this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)},this),i=e(t.currentTarget)[this.type](r).data(this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var t,n,r,i,s,o,u=e.Event("show");if(this.hasContent()&&this.enabled){this.$element.trigger(u);if(u.isDefaultPrevented())return;t=this.tip(),this.setContent(),this.options.animation&&t.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,t[0],this.$element[0]):this.options.placement,t.detach().css({top:0,left:0,display:"block"}),this.options.container?t.appendTo(this.options.container):t.insertAfter(this.$element),n=this.getPosition(),r=t[0].offsetWidth,i=t[0].offsetHeight;switch(s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}this.applyPlacement(o,s),this.$element.trigger("shown")}},applyPlacement:function(e,t){var n=this.tip(),r=n[0].offsetWidth,i=n[0].offsetHeight,s,o,u,a;n.offset(e).addClass(t).addClass("in"),s=n[0].offsetWidth,o=n[0].offsetHeight,t=="top"&&o!=i&&(e.top=e.top+i-o,a=!0),t=="bottom"||t=="top"?(u=0,e.left<0&&(u=e.left*-2,e.left=0,n.offset(e),s=n[0].offsetWidth,o=n[0].offsetHeight),this.replaceArrow(u-r+s,s,"left")):this.replaceArrow(o-i,o,"top"),a&&n.offset(e)},replaceArrow:function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide");this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden"),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},hasContent:function(){return this.getTitle()},getPosition:function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},arrow:function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(t){var n=t?e(t.currentTarget)[this.type](this._options).data(this.type):this;n.tip().hasClass("in")?n.hide():n.show()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=(typeof n.content=="function"?n.content.call(t[0]):n.content)||t.attr("data-content"),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}});var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active:last a")[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=e(this.options.menu),this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;return t||(this.$element.setAttribute(e,"return;"),t=typeof this.$element[e]=="function"),t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},focus:function(e){this.focused=!0},blur:function(e){this.focused=!1,!this.mousedover&&this.shown&&this.hide()},click:function(e){e.stopPropagation(),e.preventDefault(),this.select(),this.$element.focus()},mouseenter:function(t){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=!1,!this.focused&&this.shown&&this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e.fn.typeahead.noConflict=function(){return e.fn.typeahead=n,this},e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)).on("click.affix.data-api",e.proxy(function(){setTimeout(e.proxy(this.checkPosition,this),1)},this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);

data/doc/manual/manual.html

@@ -0,0 +1,360 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>bio-svgenes Manual</title>
+	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+	<meta name="generator" content="TextMate http://macromates.com/">
+	<meta name="author" content="Dan MacLean (TSL)">
+	<!-- Date: 2013-04-09 -->
+</head>
+<body>
+<div style="padding : 2em;">
+<h1>bio-svgenes</h1>
+
+<h2>A Ruby gem for rendering genomic features quickly and easily in SVG format</h2>
+
+<p>SVGenes is a Ruby-language library that uses SVG primitives to render typical genomic glyphs through a simple and flexible Ruby interface. </p>
+
+<h2>Installation</h2>
+
+<p>This should be easy - the package is available as a gem. If you have an internet connection try:</p>
+
+<pre><code>gem install bio-svgenes
+</code></pre>
+
+<p>If this doesn't work try,</p>
+
+<pre><code>sudo gem install bio-svgenes
+</code></pre>
+
+<h2>Basic use</h2>
+
+<ol>
+<li>Design</li>
+<li>Setting up a page</li>
+<li>Adding a track</li>
+<li>Creating and adding features</li>
+<li>Writing the resulting SVG</li>
+<li>Styling features
+<ol>
+<li>Available glyphs</li>
+<li>Setting basic styles: colours and outlines</li>
+<li>Setting advanced styles: gradients and arbitrary styles
+4 . Height options for tracks</li>
+</ol></li>
+<li>Generating SVG from JSON configuration files</li>
+<li>File formats</li>
+</ol>
+
+<h3>1. Design</h3>
+
+<p>The library implements a simple Page object (a Bio::Graphics::Page object) that defines the whole drawing area. It carries the horizontal track objects (Bio::Graphics::Track objects). Tracks are the level at which visual information is supplied providing the full styling capability of the SVG standard. 
+A glyph type is chosen for each track and all features in a track are rendered with the same glyph any of a selection of defined glyphs. The feature model within SVGenes is simple but flexible and not dependent on particular existing gene feature formats meaning graphics for any existing datasets can easily be created without need for conversion.</p>
+
+<p>To bring the code into your script, load in the gem</p>
+
+<pre><code>require 'bio-svgenes'
+</code></pre>
+
+<h3>2. Setting up a page</h3>
+
+<p>The first thing we need to do is set up the page object, a <code>Bio::Graphics::Page</code> instance. This defines the attributes of the page into which our features will be drawn.</p>
+
+<pre><code>p = Bio::Graphics::Page.new(
+             :width =&gt; 800, 
+             :height =&gt; 200, 
+             :number_of_intervals =&gt; 10
+)
+</code></pre>
+
+<p>The <code>:width</code> attribute specifies the minimum width of the page and the <code>:height</code> attribute specifies the minimum height. Each of these will be increased if successful rendering requires more room than specified. The <code>:number_of_intervals</code> attributes specifies the number of segments to divide the scale into. A scale is always drawn.</p>
+
+<h3>3. Add a track to the page</h3>
+
+<p>Next, we need to add a track to the page. We do this with the <code>Bio::Graphics::Page#add_track</code> method. Glyphs are rendered within tracks and tracks define how those glyphs will be styled. In this example we create a <code>generic</code> block glyph.</p>
+
+<pre><code>generic_track = p.add_track(
+    :glyph =&gt; :generic, 
+    :name =&gt; 'generic_features', 
+    :label =&gt; true  
+)
+</code></pre>
+
+<p>The <code>:name</code> attribute allows us to define a name for the track and the <code>:label</code> attribute explicitly states whether the name should be written onto the track.</p>
+
+<h3>4. Create a MiniFeature object</h3>
+
+<p>Each of the features is represented by a <code>Bio::Graphics::MiniFeature</code> object. This is easily created:</p>
+
+<pre><code>mini_feature = Bio::Graphics::MiniFeature.new(
+    :start =&gt; 923, 
+    :end =&gt; 2212, 
+    :strand =&gt; '+', 
+    :id =&gt; "MyFeature"
+)
+</code></pre>
+
+<p>The minimum information you need to provide for a feature is the start and end. In this example, we add a strand and an id for the feature.</p>
+
+<h4>Add the feature to the track</h4>
+
+<p>The feature now needs to be added to the track object to be considered during rendering, we use <code>Bio::Graphics::Track#add</code> for this.</p>
+
+<pre><code>generic_track.add(mini_feature)
+</code></pre>
+
+<h3>5. Write the output to a file</h3>
+
+<p>This process is repeated for all the features and tracks you want to show in the final rendered figure. We then tell the page to render itself to a file.</p>
+
+<pre><code>p.write("output.svg")
+</code></pre>
+
+<h3>6. Styling features</h3>
+
+<p>Selecting a style for the features in a track is done when you create the Bio::Graphics::Track object. The style information is applied to all features that appear in that track. </p>
+
+<h4>Available glyphs</h4>
+
+<p>A range of glyphs for features are used, namely</p>
+
+<pre><code>:generic, :directed, :transcript, :histogram, :circle, :down_triangle, :up_triangle, :span
+</code></pre>
+
+<p>These look like this</p>
+
+<ul>
+<li><code>:generic</code> <img src="img/generic.png" alt="generic glyph" title="" /></li>
+<li><code>:directed</code> <img src="img/directed.png" alt="directed glyph" title="" /></li>
+<li><code>:transcript</code> <img src="img/transcript.png" alt="transcript glyph" title="" /></li>
+<li><code>:histogram</code> <img src="img/histogram.png" alt="histogram glyph" title="" /></li>
+<li><code>:circle</code> <img src="img/circle.png" alt="circle glyph" title="" /></li>
+<li><code>:down_triangle</code> <img src="img/down_triangle.png" alt="down triangle glyph" title="" /></li>
+<li><code>:up_triangle</code> <img src="img/up_triangle.png" alt="up triangle glyph" title="" /></li>
+<li><code>:span</code> <img src="img/span.png" alt="span glyph" title="" /></li>
+</ul>
+
+<p>You can specify the glyph to use in the <code>add_track()</code> method for the page</p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :generic
+)
+</code></pre>
+
+<h4>Providing enough feature information for the glyph</h4>
+
+<p>Different types of glyphs need different types of information to render the feature fully. 
+<code>:generic, :circle, :up_triangle, :down_triangle, :span</code> glyphs need the minimum feature information, just a start and a stop. Start and end can be the same number if you want to specify a single nucleotide feature.</p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :circle
+)
+
+feature = Bio::Graphics::MiniFeature.new(
+    :start =&gt; 100,
+    :end =&gt; 200
+)
+
+track.add(feature)
+</code></pre>
+
+<p>In addition, the 'stranded' glyphs <code>:directed</code> and <code>:transcript</code> need a strand (+ will be assumed if none is provided).</p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :circle
+)
+
+feature = Bio::Graphics::MiniFeature.new(
+    :start =&gt; 100,
+    :end =&gt; 200,
+    :strand =&gt; '-'
+)
+
+track.add(feature)
+</code></pre>
+
+<p>The <code>:histogram</code> feature is a bit more complicated. Each bar in the histogram is a feature. It's width on the x-axis is specified by it's <code>:start</code> and <code>:end</code> as for the other features, but it has a <code>:segment_height</code> that specifies the bar-height</p>
+
+<pre><code>data_track = page.add_track(
+    :glyph =&gt; :histogram
+)
+
+data_feature = Bio::Graphics::MiniFeature.new(
+    :start =&gt; 100,
+    :end =&gt; 200,
+    :segment_height =&gt; 30
+)
+
+data_track.add(data_feature)
+</code></pre>
+
+<p>Histogram bars can have overlapping or gapped start and end positions if needed. </p>
+
+<p>Features to be rendered with the <code>:transcript</code> glyph need extra information. The exons and utrs are specified as even-numbered lists of start and stop positions. </p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :transcript
+)
+
+feature = Bio::Graphics::MiniFeature.new(
+    :start =&gt; 100,
+    :end =&gt; 200,
+    :strand =&gt; '-',
+    :utrs =&gt; [100,110,90,200],
+    :exons =&gt; [120,140,160,180]
+)
+
+track.add(feature)
+</code></pre>
+
+<h4>Setting fill and outline colours</h4>
+
+<p>Fill and outline colours are specified when creating the track. Any HTML/SVG compatible colour string can be used, so <code>rgb(125,123,0)</code> or <code>#ffff11</code> or <code>goldenrod</code> are all acceptable for each of the following attributes</p>
+
+<p><code>:stroke_color</code> is the outline colour of the glyph
+<code>:stroke_width</code> is the width of the outline of the glyph
+<code>:fill_color</code> is the fill colour of the glyph</p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :directed,
+    :stroke_color =&gt; 'black',
+    :fill_color =&gt; 'gold',
+    :stroke_width =&gt; '1',
+)
+</code></pre>
+
+<p>Transcript glyphs can have separate colours for the exons and utrs, using <code>:exon_fill_color</code> and <code>:utr_fill_color</code>. The line joining them can be coloured with <code>:line_color</code> and you can decide to have an angled line by setting <code>:gap_marker</code> to "angled"</p>
+
+<pre><code>transcript_track = page.add_track(
+    :glyph =&gt; :transcript, 
+    :exon_fill_color =&gt; 'green', 
+    :utr_fill_color =&gt; 'blue', 
+    :line_color =&gt; 'black', 
+    :gap_marker =&gt; 'angled'
+)
+</code></pre>
+
+<h4>Setting gradients and arbitrary styles</h4>
+
+<p>A number of gradient styles are built-in and can be easily used as a fill colour for glyphs. Two basic types <code>radial</code> (which start from a white centre and fade to a colour) and <code>horizontal</code> (which start from white along the bottom edge and fade to a colour) are available in red, blue, yellow and green. The symbols for the attributes are</p>
+
+<pre><code>:red_white_radial, :green_white_radial, :blue_white_radial, :yellow_white_radial, :red_white_h, :green_white_h, :blue_white, :yellow_white_h
+</code></pre>
+
+<p>and are set as</p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :directed,
+    :stroke_color =&gt; 'black',
+    :fill_color =&gt; :red_white_h
+)
+</code></pre>
+
+<p>Arbitrary gradients can be built according to the SVG gradient rules (see <a href="http://www.w3schools.com/svg/svg_grad_linear.asp">SVG gradient linear</a> and <a href="http://www.w3schools.com/svg/svg_grad_radial.asp">SVG gradient radial</a> ) using a ruby-ish attributes hash.</p>
+
+<pre><code>my_gradient = {
+
+    :radial =&gt; "grad1", 
+    :cx =&gt; 50, 
+    :cy =&gt; 50, 
+    :r =&gt; 50, :fx =&gt; 50, :
+    fy =&gt; 50, 
+    :stops =&gt; [ 
+        {
+            :offset =&gt; 0, 
+            :color =&gt; 'rgb(255,255,255)', 
+            :opacity =&gt; 0
+            },  
+            {
+                :offset =&gt; 100, 
+                :color =&gt; 'rgb(0,0,255)', 
+                :opacity =&gt; 1
+            }
+    ]
+}
+</code></pre>
+
+<p>simply pass this to the track <code>:fill_color</code> attribute.</p>
+
+<pre><code>track = page.add_track(
+    :glyph =&gt; :directed,
+    :stroke_color =&gt; 'black',
+    :fill_color =&gt; my_gradient
+)
+</code></pre>
+
+<p>The <code>:style</code> attribute can accept and use any arbitrarily complex SVG compliant style tag (see <a href="http://www.w3.org/TR/SVG/styling.html">SVG styling</a> ). A common use is to modify the opacity of glyphs</p>
+
+<pre><code>track = page.add_track(
+        :glyph =&gt; :generic, 
+        :style =&gt; "fill-opacity:0.4;"
+)
+</code></pre>
+
+<h4>Height options for tracks</h4>
+
+<p>The height of the glyphs may also be specified. Do this by setting the <code>:feature_height</code> attribute</p>
+
+<pre><code>track = page.add_track(
+        :glyph =&gt; :generic, 
+        :feature_height =&gt; 123
+)
+</code></pre>
+
+<p>In data tracks (with the <code>:histogram</code> glyph) a maximum value for the y-scale can be specified that will be enforced and prevent the scale from being auto-calculated. This allows for easy comparison between multiple data tracks, use <code>:max_y</code>.</p>
+
+<pre><code>track = page.add_track(
+        :glyph =&gt; :histogram, 
+        :max_y =&gt; 1000
+)
+</code></pre>
+
+<h3>6. Generating SVG from JSON configuration files</h3>
+
+<p>It is also possible to generate the SVG from a <a href="http://en.wikipedia.org/wiki/JSON">JSON</a> file containing the track information and a reference to file of features in <a href="http://www.sequenceontology.org/gff3.shtml">GFF</a> format or histogram data in a tab-delimited file. The following sample specifies the page and two tracks, one for features one for data. The new attributes <code>file</code> and <code>file_type</code> specify the file and file format respectively. </p>
+
+<pre><code>{
+"Page":{"width":800, "height":800, "intervals":15},
+"Tracks": [ 
+         {
+          "glyph":"generic",
+          "name":"Genes",
+          "label":true,
+          "file":"gene.gff",
+          "file_type":"gff",
+          "fill_color":"red", 
+          "stroke_width":1, 
+          "x_round":4,
+          "y_round":4
+         },
+        {
+          "glyph":"histogram",
+          "name":"Data",
+          "label":true,
+          "file":"data.txt",
+          "file_type":"data",
+          "track_height":100,
+          "fill_color":"yellow_white_radial",
+          "stroke_width":1
+         }
+        ]
+}
+</code></pre>
+
+<p>The data file has a simple format, for each bar of the histogram specify one row with three columns</p>
+
+<pre><code>start, end, height
+</code></pre>
+
+<p>To generate the file, run the provided accessory script <code>draw_from_json.rb</code> which is found in the package examples folder. Find the folder the gem installed into with <code>gem which bio-svgenes</code>. You can then run the script with the following
+
+<pre><code>ruby draw_from_json.rb --json_file json_config_file --svg_file svg_outfile.svg</code></pre>
+
+where <code>json_config_file</code> is the name of the file with the JSON in and <code>svg_outfile.svg</code> is the name of the file into which the SVG is written.	
+</p>
+</div>
+</body>
+</html>

data/doc/manual/manual.md

@@ -0,0 +1,307 @@
+# bio-svgenes
+
+## A Ruby gem for rendering genomic features quickly and easily in SVG format
+SVGenes is a Ruby-language library that uses SVG primitives to render typical genomic glyphs through a simple and flexible Ruby interface. 
+
+## Installation
+
+This should be easy - the package is available as a gem. If you have an internet connection try:
+
+	gem install bio-svgenes
+	
+If this doesn't work try,
+
+	sudo gem install bio-svgenes
+
+## Basic use
+0. Design
+1. Setting up a page
+2. Adding a track
+3. Creating and adding features
+4. Writing the resulting SVG
+5. Styling features
+	1. Available glyphs
+	2. Setting basic styles: colours and outlines
+	3. Setting advanced styles: gradients and arbitrary styles
+	4 . Height options for tracks
+6. Generating SVG from JSON configuration files
+7. File formats
+
+
+### 1. Design
+The library implements a simple Page object (a Bio::Graphics::Page object) that defines the whole drawing area. It carries the horizontal track objects (Bio::Graphics::Track objects). Tracks are the level at which visual information is supplied providing the full styling capability of the SVG standard. 
+A glyph type is chosen for each track and all features in a track are rendered with the same glyph any of a selection of defined glyphs. The feature model within SVGenes is simple but flexible and not dependent on particular existing gene feature formats meaning graphics for any existing datasets can easily be created without need for conversion.
+
+
+To bring the code into your script, load in the gem
+
+	require 'bio-svgenes'
+
+### 2. Setting up a page
+
+The first thing we need to do is set up the page object, a `Bio::Graphics::Page` instance. This defines the attributes of the page into which our features will be drawn.
+
+	p = Bio::Graphics::Page.new(
+				 :width => 800, 
+	             :height => 200, 
+	             :number_of_intervals => 10
+	)
+
+The `:width` attribute specifies the minimum width of the page and the `:height` attribute specifies the minimum height. Each of these will be increased if successful rendering requires more room than specified. The `:number_of_intervals` attributes specifies the number of segments to divide the scale into. A scale is always drawn.
+
+### 3. Add a track to the page
+Next, we need to add a track to the page. We do this with the `Bio::Graphics::Page#add_track` method. Glyphs are rendered within tracks and tracks define how those glyphs will be styled. In this example we create a `generic` block glyph.
+
+	generic_track = p.add_track(
+		:glyph => :generic, 
+		:name => 'generic_features', 
+		:label => true  
+	)
+	
+The `:name` attribute allows us to define a name for the track and the `:label` attribute explicitly states whether the name should be written onto the track.
+
+### 4. Create a MiniFeature object
+Each of the features is represented by a `Bio::Graphics::MiniFeature` object. This is easily created:
+
+	mini_feature = Bio::Graphics::MiniFeature.new(
+		:start => 923, 
+		:end => 2212, 
+		:strand => '+', 
+		:id => "MyFeature"
+	)
+
+The minimum information you need to provide for a feature is the start and end. In this example, we add a strand and an id for the feature.
+
+#### Add the feature to the track
+
+The feature now needs to be added to the track object to be considered during rendering, we use `Bio::Graphics::Track#add` for this.
+
+	generic_track.add(mini_feature)
+	
+
+### 5. Write the output to a file
+This process is repeated for all the features and tracks you want to show in the final rendered figure. We then tell the page to render itself to a file.
+
+	p.write("output.svg")
+	
+	
+### 6. Styling features
+
+Selecting a style for the features in a track is done when you create the Bio::Graphics::Track object. The style information is applied to all features that appear in that track. 
+
+#### Available glyphs
+
+A range of glyphs for features are used, namely
+
+	:generic, :directed, :transcript, :histogram, :circle, :down_triangle, :up_triangle, :span
+
+These look like this
+
++ `:generic` ![generic glyph](img/generic.png)
++ `:directed` ![directed glyph](img/directed.png)
++ `:transcript` ![transcript glyph](img/transcript.png)
++ `:histogram` ![histogram glyph](img/histogram.png)
++ `:circle` ![circle glyph](img/circle.png)
++ `:down_triangle` ![down triangle glyph](img/down_triangle.png)
++ `:up_triangle` ![up triangle glyph](img/up_triangle.png)
++ `:span` ![span glyph](img/span.png)
+
+You can specify the glyph to use in the `add_track()` method for the page
+
+	track = page.add_track(
+		:glyph => :generic
+	)
+	
+#### Providing enough feature information for the glyph
+
+Different types of glyphs need different types of information to render the feature fully. 
+`:generic, :circle, :up_triangle, :down_triangle, :span` glyphs need the minimum feature information, just a start and a stop. Start and end can be the same number if you want to specify a single nucleotide feature.
+
+	track = page.add_track(
+	 	:glyph => :circle
+	)
+	
+	feature = Bio::Graphics::MiniFeature.new(
+		:start => 100,
+		:end => 200
+	)
+	
+	track.add(feature)
+
+
+In addition, the 'stranded' glyphs `:directed` and `:transcript` need a strand (+ will be assumed if none is provided).
+
+	track = page.add_track(
+		:glyph => :circle
+	)
+
+	feature = Bio::Graphics::MiniFeature.new(
+		:start => 100,
+		:end => 200,
+		:strand => '-'
+	)
+
+	track.add(feature)
+
+The `:histogram` feature is a bit more complicated. Each bar in the histogram is a feature. It's width on the x-axis is specified by it's `:start` and `:end` as for the other features, but it has a `:segment_height` that specifies the bar-height
+
+	data_track = page.add_track(
+		:glyph => :histogram
+	)
+	
+	data_feature = Bio::Graphics::MiniFeature.new(
+		:start => 100,
+		:end => 200,
+		:segment_height => 30
+    )
+
+	data_track.add(data_feature)
+	
+Histogram bars can have overlapping or gapped start and end positions if needed. 
+
+Features to be rendered with the `:transcript` glyph need extra information. The exons and utrs are specified as even-numbered lists of start and stop positions. 
+
+	track = page.add_track(
+		:glyph => :transcript
+	)
+	
+	feature = Bio::Graphics::MiniFeature.new(
+		:start => 100,
+		:end => 200,
+		:strand => '-',
+		:utrs => [100,110,90,200],
+		:exons => [120,140,160,180]
+	)
+	
+	track.add(feature)
+
+#### Setting fill and outline colours
+
+Fill and outline colours are specified when creating the track. Any HTML/SVG compatible colour string can be used, so `rgb(125,123,0)` or `#ffff11` or `goldenrod` are all acceptable for each of the following attributes
+
+`:stroke_color` is the outline colour of the glyph
+`:stroke_width` is the width of the outline of the glyph
+`:fill_color` is the fill colour of the glyph
+
+	track = page.add_track(
+		:glyph => :directed,
+        :stroke_color => 'black',
+        :fill_color => 'gold',
+        :stroke_width => '1',
+	)
+	
+Transcript glyphs can have separate colours for the exons and utrs, using `:exon_fill_color` and `:utr_fill_color`. The line joining them can be coloured with `:line_color` and you can decide to have an angled line by setting `:gap_marker` to "angled"
+
+	transcript_track = page.add_track(
+		:glyph => :transcript, 
+        :exon_fill_color => 'green', 
+        :utr_fill_color => 'blue', 
+        :line_color => 'black', 
+        :gap_marker => 'angled'
+	)
+	
+#### Setting gradients and arbitrary styles
+
+A number of gradient styles are built-in and can be easily used as a fill colour for glyphs. Two basic types `radial` (which start from a white centre and fade to a colour) and `horizontal` (which start from white along the bottom edge and fade to a colour) are available in red, blue, yellow and green. The symbols for the attributes are
+
+	:red_white_radial, :green_white_radial, :blue_white_radial, :yellow_white_radial, :red_white_h, :green_white_h, :blue_white, :yellow_white_h
+
+and are set as
+	
+	track = page.add_track(
+		:glyph => :directed,
+    	:stroke_color => 'black',
+    	:fill_color => :red_white_h
+	)
+	
+Arbitrary gradients can be built according to the SVG gradient rules (see [SVG gradient linear](http://www.w3schools.com/svg/svg_grad_linear.asp) and [SVG gradient radial](http://www.w3schools.com/svg/svg_grad_radial.asp) ) using a ruby-ish attributes hash.
+
+	my_gradient = {
+		
+		:radial => "grad1", 
+		:cx => 50, 
+		:cy => 50, 
+		:r => 50, :fx => 50, :
+		fy => 50, 
+		:stops => [ 
+			{
+				:offset => 0, 
+				:color => 'rgb(255,255,255)', 
+				:opacity => 0
+				},  
+				{
+					:offset => 100, 
+					:color => 'rgb(0,0,255)', 
+					:opacity => 1
+				}
+		]
+	}
+
+
+simply pass this to the track `:fill_color` attribute.
+
+	track = page.add_track(
+		:glyph => :directed,
+		:stroke_color => 'black',
+		:fill_color => my_gradient
+	)
+
+The `:style` attribute can accept and use any arbitrarily complex SVG compliant style tag (see [SVG styling](http://www.w3.org/TR/SVG/styling.html) ). A common use is to modify the opacity of glyphs
+
+	track = page.add_track(
+			:glyph => :generic, 
+			:style => "fill-opacity:0.4;"
+	)
+
+#### Height options for tracks
+
+The height of the glyphs may also be specified. Do this by setting the `:feature_height` attribute
+
+	track = page.add_track(
+			:glyph => :generic, 
+			:feature_height => 123
+	)
+	
+In data tracks (with the `:histogram` glyph) a maximum value for the y-scale can be specified that will be enforced and prevent the scale from being auto-calculated. This allows for easy comparison between multiple data tracks, use `:max_y`.
+
+	track = page.add_track(
+			:glyph => :histogram, 
+			:max_y => 1000
+	)
+
+### 6. Generating SVG from JSON configuration files
+
+It is also possible to generate the SVG from a [JSON](http://en.wikipedia.org/wiki/JSON) file containing the track information and a reference to file of features in [GFF](http://www.sequenceontology.org/gff3.shtml) format or histogram data in a tab-delimited file. The following sample specifies the page and two tracks, one for features one for data. The new attributes `file` and `file_type` specify the file and file format respectively. 
+
+	{
+	"Page":{"width":800, "height":800, "intervals":15},
+	"Tracks": [ 
+			 {
+			  "glyph":"generic",
+	          "name":"Genes",
+			  "label":true,
+			  "file":"gene.gff",
+			  "file_type":"gff",
+			  "fill_color":"red", 
+              "stroke_width":1, 
+              "x_round":4,
+			  "y_round":4
+			 },
+			{
+			  "glyph":"histogram",
+			  "name":"Data",
+			  "label":true,
+			  "file":"data.txt",
+			  "file_type":"data",
+			  "track_height":100,
+			  "fill_color":"yellow_white_radial",
+              "stroke_width":1
+			 }
+			]
+	}
+
+The data file has a simple format, for each bar of the histogram specify one row with three columns
+	
+	start, end, height
+
+To generate the file, run the provided accessory script `draw_from_json.rb` which is found in the package examples folder. Find the folder the gem installed into with `gem which bio-svgenes`.