",
+ options: {
+ disabled: false,
+
+ // callbacks
+ create: null
+ },
+ _createWidget: function( options, element ) {
+ element = $( element || this.defaultElement || this )[ 0 ];
+ this.element = $( element );
+ this.uuid = uuid++;
+ this.eventNamespace = "." + this.widgetName + this.uuid;
+ this.options = $.widget.extend( {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ this.bindings = $();
+ this.hoverable = $();
+ this.focusable = $();
+
+ if ( element !== this ) {
+ $.data( element, this.widgetFullName, this );
+ this._on( true, this.element, {
+ remove: function( event ) {
+ if ( event.target === element ) {
+ this.destroy();
+ }
+ }
+ });
+ this.document = $( element.style ?
+ // element within the document
+ element.ownerDocument :
+ // element is window or document
+ element.document || element );
+ this.window = $( this.document[0].defaultView || this.document[0].parentWindow );
+ }
+
+ this._create();
+ this._trigger( "create", null, this._getCreateEventData() );
+ this._init();
+ },
+ _getCreateOptions: $.noop,
+ _getCreateEventData: $.noop,
+ _create: $.noop,
+ _init: $.noop,
+
+ destroy: function() {
+ this._destroy();
+ // we can probably remove the unbind calls in 2.0
+ // all event bindings should go through this._on()
+ this.element
+ .unbind( this.eventNamespace )
+ // 1.9 BC for #7810
+ // TODO remove dual storage
+ .removeData( this.widgetName )
+ .removeData( this.widgetFullName )
+ // support: jquery <1.6.3
+ // http://bugs.jquery.com/ticket/9413
+ .removeData( $.camelCase( this.widgetFullName ) );
+ this.widget()
+ .unbind( this.eventNamespace )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetFullName + "-disabled " +
+ "ui-state-disabled" );
+
+ // clean up events and states
+ this.bindings.unbind( this.eventNamespace );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ },
+ _destroy: $.noop,
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key,
+ parts,
+ curOption,
+ i;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.widget.extend( {}, this.options );
+ }
+
+ if ( typeof key === "string" ) {
+ // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
+ options = {};
+ parts = key.split( "." );
+ key = parts.shift();
+ if ( parts.length ) {
+ curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
+ for ( i = 0; i < parts.length - 1; i++ ) {
+ curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
+ curOption = curOption[ parts[ i ] ];
+ }
+ key = parts.pop();
+ if ( value === undefined ) {
+ return curOption[ key ] === undefined ? null : curOption[ key ];
+ }
+ curOption[ key ] = value;
+ } else {
+ if ( value === undefined ) {
+ return this.options[ key ] === undefined ? null : this.options[ key ];
+ }
+ options[ key ] = value;
+ }
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var key;
+
+ for ( key in options ) {
+ this._setOption( key, options[ key ] );
+ }
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ .toggleClass( this.widgetFullName + "-disabled ui-state-disabled", !!value )
+ .attr( "aria-disabled", value );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _on: function( suppressDisabledCheck, element, handlers ) {
+ var delegateElement,
+ instance = this;
+
+ // no suppressDisabledCheck flag, shuffle arguments
+ if ( typeof suppressDisabledCheck !== "boolean" ) {
+ handlers = element;
+ element = suppressDisabledCheck;
+ suppressDisabledCheck = false;
+ }
+
+ // no element argument, shuffle and use this.element
+ if ( !handlers ) {
+ handlers = element;
+ element = this.element;
+ delegateElement = this.widget();
+ } else {
+ // accept selectors, DOM elements
+ element = delegateElement = $( element );
+ this.bindings = this.bindings.add( element );
+ }
+
+ $.each( handlers, function( event, handler ) {
+ function handlerProxy() {
+ // allow widgets to customize the disabled handling
+ // - disabled as an array instead of boolean
+ // - disabled class as method for disabling individual parts
+ if ( !suppressDisabledCheck &&
+ ( instance.options.disabled === true ||
+ $( this ).hasClass( "ui-state-disabled" ) ) ) {
+ return;
+ }
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+
+ // copy the guid so direct unbinding works
+ if ( typeof handler !== "string" ) {
+ handlerProxy.guid = handler.guid =
+ handler.guid || handlerProxy.guid || $.guid++;
+ }
+
+ var match = event.match( /^(\w+)\s*(.*)$/ ),
+ eventName = match[1] + instance.eventNamespace,
+ selector = match[2];
+ if ( selector ) {
+ delegateElement.delegate( selector, eventName, handlerProxy );
+ } else {
+ element.bind( eventName, handlerProxy );
+ }
+ });
+ },
+
+ _off: function( element, eventName ) {
+ eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) + this.eventNamespace;
+ element.unbind( eventName ).undelegate( eventName );
+ },
+
+ _delay: function( handler, delay ) {
+ function handlerProxy() {
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+ var instance = this;
+ return setTimeout( handlerProxy, delay || 0 );
+ },
+
+ _hoverable: function( element ) {
+ this.hoverable = this.hoverable.add( element );
+ this._on( element, {
+ mouseenter: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-hover" );
+ },
+ mouseleave: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-hover" );
+ }
+ });
+ },
+
+ _focusable: function( element ) {
+ this.focusable = this.focusable.add( element );
+ this._on( element, {
+ focusin: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-focus" );
+ },
+ focusout: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-focus" );
+ }
+ });
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig,
+ callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ // the original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+ return !( $.isFunction( callback ) &&
+ callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+ $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+ if ( typeof options === "string" ) {
+ options = { effect: options };
+ }
+ var hasOptions,
+ effectName = !options ?
+ method :
+ options === true || typeof options === "number" ?
+ defaultEffect :
+ options.effect || defaultEffect;
+ options = options || {};
+ if ( typeof options === "number" ) {
+ options = { duration: options };
+ }
+ hasOptions = !$.isEmptyObject( options );
+ options.complete = callback;
+ if ( options.delay ) {
+ element.delay( options.delay );
+ }
+ if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
+ element[ method ]( options );
+ } else if ( effectName !== method && element[ effectName ] ) {
+ element[ effectName ]( options.duration, options.easing, callback );
+ } else {
+ element.queue(function( next ) {
+ $( this )[ method ]();
+ if ( callback ) {
+ callback.call( element[ 0 ] );
+ }
+ next();
+ });
+ }
+ };
+});
+
+})( jQuery );
+(function( $, undefined ) {
+
+var mouseHandled = false;
+$( document ).mouseup( function() {
+ mouseHandled = false;
+});
+
+$.widget("ui.mouse", {
+ version: "1.10.3",
+ options: {
+ cancel: "input,textarea,button,select,option",
+ distance: 1,
+ delay: 0
+ },
+ _mouseInit: function() {
+ var that = this;
+
+ this.element
+ .bind("mousedown."+this.widgetName, function(event) {
+ return that._mouseDown(event);
+ })
+ .bind("click."+this.widgetName, function(event) {
+ if (true === $.data(event.target, that.widgetName + ".preventClickEvent")) {
+ $.removeData(event.target, that.widgetName + ".preventClickEvent");
+ event.stopImmediatePropagation();
+ return false;
+ }
+ });
+
+ this.started = false;
+ },
+
+ // TODO: make sure destroying one instance of mouse doesn't mess with
+ // other instances of mouse
+ _mouseDestroy: function() {
+ this.element.unbind("."+this.widgetName);
+ if ( this._mouseMoveDelegate ) {
+ $(document)
+ .unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
+ .unbind("mouseup."+this.widgetName, this._mouseUpDelegate);
+ }
+ },
+
+ _mouseDown: function(event) {
+ // don't let more than one widget handle mouseStart
+ if( mouseHandled ) { return; }
+
+ // we may have missed mouseup (out of window)
+ (this._mouseStarted && this._mouseUp(event));
+
+ this._mouseDownEvent = event;
+
+ var that = this,
+ btnIsLeft = (event.which === 1),
+ // event.target.nodeName works around a bug in IE 8 with
+ // disabled inputs (#7620)
+ elIsCancel = (typeof this.options.cancel === "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);
+ if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
+ return true;
+ }
+
+ this.mouseDelayMet = !this.options.delay;
+ if (!this.mouseDelayMet) {
+ this._mouseDelayTimer = setTimeout(function() {
+ that.mouseDelayMet = true;
+ }, this.options.delay);
+ }
+
+ if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
+ this._mouseStarted = (this._mouseStart(event) !== false);
+ if (!this._mouseStarted) {
+ event.preventDefault();
+ return true;
+ }
+ }
+
+ // Click event may never have fired (Gecko & Opera)
+ if (true === $.data(event.target, this.widgetName + ".preventClickEvent")) {
+ $.removeData(event.target, this.widgetName + ".preventClickEvent");
+ }
+
+ // these delegates are required to keep context
+ this._mouseMoveDelegate = function(event) {
+ return that._mouseMove(event);
+ };
+ this._mouseUpDelegate = function(event) {
+ return that._mouseUp(event);
+ };
+ $(document)
+ .bind("mousemove."+this.widgetName, this._mouseMoveDelegate)
+ .bind("mouseup."+this.widgetName, this._mouseUpDelegate);
+
+ event.preventDefault();
+
+ mouseHandled = true;
+ return true;
+ },
+
+ _mouseMove: function(event) {
+ // IE mouseup check - mouseup happened when mouse was out of window
+ if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {
+ return this._mouseUp(event);
+ }
+
+ if (this._mouseStarted) {
+ this._mouseDrag(event);
+ return event.preventDefault();
+ }
+
+ if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
+ this._mouseStarted =
+ (this._mouseStart(this._mouseDownEvent, event) !== false);
+ (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
+ }
+
+ return !this._mouseStarted;
+ },
+
+ _mouseUp: function(event) {
+ $(document)
+ .unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
+ .unbind("mouseup."+this.widgetName, this._mouseUpDelegate);
+
+ if (this._mouseStarted) {
+ this._mouseStarted = false;
+
+ if (event.target === this._mouseDownEvent.target) {
+ $.data(event.target, this.widgetName + ".preventClickEvent", true);
+ }
+
+ this._mouseStop(event);
+ }
+
+ return false;
+ },
+
+ _mouseDistanceMet: function(event) {
+ return (Math.max(
+ Math.abs(this._mouseDownEvent.pageX - event.pageX),
+ Math.abs(this._mouseDownEvent.pageY - event.pageY)
+ ) >= this.options.distance
+ );
+ },
+
+ _mouseDelayMet: function(/* event */) {
+ return this.mouseDelayMet;
+ },
+
+ // These are placeholder methods, to be overriden by extending plugin
+ _mouseStart: function(/* event */) {},
+ _mouseDrag: function(/* event */) {},
+ _mouseStop: function(/* event */) {},
+ _mouseCapture: function(/* event */) { return true; }
+});
+
+})(jQuery);
+(function( $, undefined ) {
+
+/*jshint loopfunc: true */
+
+function isOverAxis( x, reference, size ) {
+ return ( x > reference ) && ( x < ( reference + size ) );
+}
+
+function isFloating(item) {
+ return (/left|right/).test(item.css("float")) || (/inline|table-cell/).test(item.css("display"));
+}
+
+$.widget("ui.sortable", $.ui.mouse, {
+ version: "1.10.3",
+ widgetEventPrefix: "sort",
+ ready: false,
+ options: {
+ appendTo: "parent",
+ axis: false,
+ connectWith: false,
+ containment: false,
+ cursor: "auto",
+ cursorAt: false,
+ dropOnEmpty: true,
+ forcePlaceholderSize: false,
+ forceHelperSize: false,
+ grid: false,
+ handle: false,
+ helper: "original",
+ items: "> *",
+ opacity: false,
+ placeholder: false,
+ revert: false,
+ scroll: true,
+ scrollSensitivity: 20,
+ scrollSpeed: 20,
+ scope: "default",
+ tolerance: "intersect",
+ zIndex: 1000,
+
+ // callbacks
+ activate: null,
+ beforeStop: null,
+ change: null,
+ deactivate: null,
+ out: null,
+ over: null,
+ receive: null,
+ remove: null,
+ sort: null,
+ start: null,
+ stop: null,
+ update: null
+ },
+ _create: function() {
+
+ var o = this.options;
+ this.containerCache = {};
+ this.element.addClass("ui-sortable");
+
+ //Get the items
+ this.refresh();
+
+ //Let's determine if the items are being displayed horizontally
+ this.floating = this.items.length ? o.axis === "x" || isFloating(this.items[0].item) : false;
+
+ //Let's determine the parent's offset
+ this.offset = this.element.offset();
+
+ //Initialize mouse events for interaction
+ this._mouseInit();
+
+ //We're ready to go
+ this.ready = true;
+
+ },
+
+ _destroy: function() {
+ this.element
+ .removeClass("ui-sortable ui-sortable-disabled");
+ this._mouseDestroy();
+
+ for ( var i = this.items.length - 1; i >= 0; i-- ) {
+ this.items[i].item.removeData(this.widgetName + "-item");
+ }
+
+ return this;
+ },
+
+ _setOption: function(key, value){
+ if ( key === "disabled" ) {
+ this.options[ key ] = value;
+
+ this.widget().toggleClass( "ui-sortable-disabled", !!value );
+ } else {
+ // Don't call widget base _setOption for disable as it adds ui-state-disabled class
+ $.Widget.prototype._setOption.apply(this, arguments);
+ }
+ },
+
+ _mouseCapture: function(event, overrideHandle) {
+ var currentItem = null,
+ validHandle = false,
+ that = this;
+
+ if (this.reverting) {
+ return false;
+ }
+
+ if(this.options.disabled || this.options.type === "static") {
+ return false;
+ }
+
+ //We have to refresh the items data once first
+ this._refreshItems(event);
+
+ //Find out if the clicked node (or one of its parents) is a actual item in this.items
+ $(event.target).parents().each(function() {
+ if($.data(this, that.widgetName + "-item") === that) {
+ currentItem = $(this);
+ return false;
+ }
+ });
+ if($.data(event.target, that.widgetName + "-item") === that) {
+ currentItem = $(event.target);
+ }
+
+ if(!currentItem) {
+ return false;
+ }
+ if(this.options.handle && !overrideHandle) {
+ $(this.options.handle, currentItem).find("*").addBack().each(function() {
+ if(this === event.target) {
+ validHandle = true;
+ }
+ });
+ if(!validHandle) {
+ return false;
+ }
+ }
+
+ this.currentItem = currentItem;
+ this._removeCurrentsFromItems();
+ return true;
+
+ },
+
+ _mouseStart: function(event, overrideHandle, noActivation) {
+
+ var i, body,
+ o = this.options;
+
+ this.currentContainer = this;
+
+ //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture
+ this.refreshPositions();
+
+ //Create and append the visible helper
+ this.helper = this._createHelper(event);
+
+ //Cache the helper size
+ this._cacheHelperProportions();
+
+ /*
+ * - Position generation -
+ * This block generates everything position related - it's the core of draggables.
+ */
+
+ //Cache the margins of the original element
+ this._cacheMargins();
+
+ //Get the next scrolling parent
+ this.scrollParent = this.helper.scrollParent();
+
+ //The element's absolute position on the page minus margins
+ this.offset = this.currentItem.offset();
+ this.offset = {
+ top: this.offset.top - this.margins.top,
+ left: this.offset.left - this.margins.left
+ };
+
+ $.extend(this.offset, {
+ click: { //Where the click happened, relative to the element
+ left: event.pageX - this.offset.left,
+ top: event.pageY - this.offset.top
+ },
+ parent: this._getParentOffset(),
+ relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
+ });
+
+ // Only after we got the offset, we can change the helper's position to absolute
+ // TODO: Still need to figure out a way to make relative sorting possible
+ this.helper.css("position", "absolute");
+ this.cssPosition = this.helper.css("position");
+
+ //Generate the original position
+ this.originalPosition = this._generatePosition(event);
+ this.originalPageX = event.pageX;
+ this.originalPageY = event.pageY;
+
+ //Adjust the mouse offset relative to the helper if "cursorAt" is supplied
+ (o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));
+
+ //Cache the former DOM position
+ this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };
+
+ //If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way
+ if(this.helper[0] !== this.currentItem[0]) {
+ this.currentItem.hide();
+ }
+
+ //Create the placeholder
+ this._createPlaceholder();
+
+ //Set a containment if given in the options
+ if(o.containment) {
+ this._setContainment();
+ }
+
+ if( o.cursor && o.cursor !== "auto" ) { // cursor option
+ body = this.document.find( "body" );
+
+ // support: IE
+ this.storedCursor = body.css( "cursor" );
+ body.css( "cursor", o.cursor );
+
+ this.storedStylesheet = $( "" ).appendTo( body );
+ }
+
+ if(o.opacity) { // opacity option
+ if (this.helper.css("opacity")) {
+ this._storedOpacity = this.helper.css("opacity");
+ }
+ this.helper.css("opacity", o.opacity);
+ }
+
+ if(o.zIndex) { // zIndex option
+ if (this.helper.css("zIndex")) {
+ this._storedZIndex = this.helper.css("zIndex");
+ }
+ this.helper.css("zIndex", o.zIndex);
+ }
+
+ //Prepare scrolling
+ if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
+ this.overflowOffset = this.scrollParent.offset();
+ }
+
+ //Call callbacks
+ this._trigger("start", event, this._uiHash());
+
+ //Recache the helper size
+ if(!this._preserveHelperProportions) {
+ this._cacheHelperProportions();
+ }
+
+
+ //Post "activate" events to possible containers
+ if( !noActivation ) {
+ for ( i = this.containers.length - 1; i >= 0; i-- ) {
+ this.containers[ i ]._trigger( "activate", event, this._uiHash( this ) );
+ }
+ }
+
+ //Prepare possible droppables
+ if($.ui.ddmanager) {
+ $.ui.ddmanager.current = this;
+ }
+
+ if ($.ui.ddmanager && !o.dropBehaviour) {
+ $.ui.ddmanager.prepareOffsets(this, event);
+ }
+
+ this.dragging = true;
+
+ this.helper.addClass("ui-sortable-helper");
+ this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position
+ return true;
+
+ },
+
+ _mouseDrag: function(event) {
+ var i, item, itemElement, intersection,
+ o = this.options,
+ scrolled = false;
+
+ //Compute the helpers position
+ this.position = this._generatePosition(event);
+ this.positionAbs = this._convertPositionTo("absolute");
+
+ if (!this.lastPositionAbs) {
+ this.lastPositionAbs = this.positionAbs;
+ }
+
+ //Do scrolling
+ if(this.options.scroll) {
+ if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
+
+ if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
+ this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
+ } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
+ this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
+ }
+
+ if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
+ this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
+ } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
+ this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
+ }
+
+ } else {
+
+ if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
+ scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
+ } else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
+ scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
+ }
+
+ if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
+ scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
+ } else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
+ scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
+ }
+
+ }
+
+ if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
+ $.ui.ddmanager.prepareOffsets(this, event);
+ }
+ }
+
+ //Regenerate the absolute position used for position checks
+ this.positionAbs = this._convertPositionTo("absolute");
+
+ //Set the helper position
+ if(!this.options.axis || this.options.axis !== "y") {
+ this.helper[0].style.left = this.position.left+"px";
+ }
+ if(!this.options.axis || this.options.axis !== "x") {
+ this.helper[0].style.top = this.position.top+"px";
+ }
+
+ //Rearrange
+ for (i = this.items.length - 1; i >= 0; i--) {
+
+ //Cache variables and intersection, continue if no intersection
+ item = this.items[i];
+ itemElement = item.item[0];
+ intersection = this._intersectsWithPointer(item);
+ if (!intersection) {
+ continue;
+ }
+
+ // Only put the placeholder inside the current Container, skip all
+ // items form other containers. This works because when moving
+ // an item from one container to another the
+ // currentContainer is switched before the placeholder is moved.
+ //
+ // Without this moving items in "sub-sortables" can cause the placeholder to jitter
+ // beetween the outer and inner container.
+ if (item.instance !== this.currentContainer) {
+ continue;
+ }
+
+ // cannot intersect with itself
+ // no useless actions that have been done before
+ // no action if the item moved is the parent of the item checked
+ if (itemElement !== this.currentItem[0] &&
+ this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
+ !$.contains(this.placeholder[0], itemElement) &&
+ (this.options.type === "semi-dynamic" ? !$.contains(this.element[0], itemElement) : true)
+ ) {
+
+ this.direction = intersection === 1 ? "down" : "up";
+
+ if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
+ this._rearrange(event, item);
+ } else {
+ break;
+ }
+
+ this._trigger("change", event, this._uiHash());
+ break;
+ }
+ }
+
+ //Post events to containers
+ this._contactContainers(event);
+
+ //Interconnect with droppables
+ if($.ui.ddmanager) {
+ $.ui.ddmanager.drag(this, event);
+ }
+
+ //Call callbacks
+ this._trigger("sort", event, this._uiHash());
+
+ this.lastPositionAbs = this.positionAbs;
+ return false;
+
+ },
+
+ _mouseStop: function(event, noPropagation) {
+
+ if(!event) {
+ return;
+ }
+
+ //If we are using droppables, inform the manager about the drop
+ if ($.ui.ddmanager && !this.options.dropBehaviour) {
+ $.ui.ddmanager.drop(this, event);
+ }
+
+ if(this.options.revert) {
+ var that = this,
+ cur = this.placeholder.offset(),
+ axis = this.options.axis,
+ animation = {};
+
+ if ( !axis || axis === "x" ) {
+ animation.left = cur.left - this.offset.parent.left - this.margins.left + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollLeft);
+ }
+ if ( !axis || axis === "y" ) {
+ animation.top = cur.top - this.offset.parent.top - this.margins.top + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollTop);
+ }
+ this.reverting = true;
+ $(this.helper).animate( animation, parseInt(this.options.revert, 10) || 500, function() {
+ that._clear(event);
+ });
+ } else {
+ this._clear(event, noPropagation);
+ }
+
+ return false;
+
+ },
+
+ cancel: function() {
+
+ if(this.dragging) {
+
+ this._mouseUp({ target: null });
+
+ if(this.options.helper === "original") {
+ this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
+ } else {
+ this.currentItem.show();
+ }
+
+ //Post deactivating events to containers
+ for (var i = this.containers.length - 1; i >= 0; i--){
+ this.containers[i]._trigger("deactivate", null, this._uiHash(this));
+ if(this.containers[i].containerCache.over) {
+ this.containers[i]._trigger("out", null, this._uiHash(this));
+ this.containers[i].containerCache.over = 0;
+ }
+ }
+
+ }
+
+ if (this.placeholder) {
+ //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
+ if(this.placeholder[0].parentNode) {
+ this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
+ }
+ if(this.options.helper !== "original" && this.helper && this.helper[0].parentNode) {
+ this.helper.remove();
+ }
+
+ $.extend(this, {
+ helper: null,
+ dragging: false,
+ reverting: false,
+ _noFinalSort: null
+ });
+
+ if(this.domPosition.prev) {
+ $(this.domPosition.prev).after(this.currentItem);
+ } else {
+ $(this.domPosition.parent).prepend(this.currentItem);
+ }
+ }
+
+ return this;
+
+ },
+
+ serialize: function(o) {
+
+ var items = this._getItemsAsjQuery(o && o.connected),
+ str = [];
+ o = o || {};
+
+ $(items).each(function() {
+ var res = ($(o.item || this).attr(o.attribute || "id") || "").match(o.expression || (/(.+)[\-=_](.+)/));
+ if (res) {
+ str.push((o.key || res[1]+"[]")+"="+(o.key && o.expression ? res[1] : res[2]));
+ }
+ });
+
+ if(!str.length && o.key) {
+ str.push(o.key + "=");
+ }
+
+ return str.join("&");
+
+ },
+
+ toArray: function(o) {
+
+ var items = this._getItemsAsjQuery(o && o.connected),
+ ret = [];
+
+ o = o || {};
+
+ items.each(function() { ret.push($(o.item || this).attr(o.attribute || "id") || ""); });
+ return ret;
+
+ },
+
+ /* Be careful with the following core functions */
+ _intersectsWith: function(item) {
+
+ var x1 = this.positionAbs.left,
+ x2 = x1 + this.helperProportions.width,
+ y1 = this.positionAbs.top,
+ y2 = y1 + this.helperProportions.height,
+ l = item.left,
+ r = l + item.width,
+ t = item.top,
+ b = t + item.height,
+ dyClick = this.offset.click.top,
+ dxClick = this.offset.click.left,
+ isOverElementHeight = ( this.options.axis === "x" ) || ( ( y1 + dyClick ) > t && ( y1 + dyClick ) < b ),
+ isOverElementWidth = ( this.options.axis === "y" ) || ( ( x1 + dxClick ) > l && ( x1 + dxClick ) < r ),
+ isOverElement = isOverElementHeight && isOverElementWidth;
+
+ if ( this.options.tolerance === "pointer" ||
+ this.options.forcePointerForContainers ||
+ (this.options.tolerance !== "pointer" && this.helperProportions[this.floating ? "width" : "height"] > item[this.floating ? "width" : "height"])
+ ) {
+ return isOverElement;
+ } else {
+
+ return (l < x1 + (this.helperProportions.width / 2) && // Right Half
+ x2 - (this.helperProportions.width / 2) < r && // Left Half
+ t < y1 + (this.helperProportions.height / 2) && // Bottom Half
+ y2 - (this.helperProportions.height / 2) < b ); // Top Half
+
+ }
+ },
+
+ _intersectsWithPointer: function(item) {
+
+ var isOverElementHeight = (this.options.axis === "x") || isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
+ isOverElementWidth = (this.options.axis === "y") || isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),
+ isOverElement = isOverElementHeight && isOverElementWidth,
+ verticalDirection = this._getDragVerticalDirection(),
+ horizontalDirection = this._getDragHorizontalDirection();
+
+ if (!isOverElement) {
+ return false;
+ }
+
+ return this.floating ?
+ ( ((horizontalDirection && horizontalDirection === "right") || verticalDirection === "down") ? 2 : 1 )
+ : ( verticalDirection && (verticalDirection === "down" ? 2 : 1) );
+
+ },
+
+ _intersectsWithSides: function(item) {
+
+ var isOverBottomHalf = isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),
+ isOverRightHalf = isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),
+ verticalDirection = this._getDragVerticalDirection(),
+ horizontalDirection = this._getDragHorizontalDirection();
+
+ if (this.floating && horizontalDirection) {
+ return ((horizontalDirection === "right" && isOverRightHalf) || (horizontalDirection === "left" && !isOverRightHalf));
+ } else {
+ return verticalDirection && ((verticalDirection === "down" && isOverBottomHalf) || (verticalDirection === "up" && !isOverBottomHalf));
+ }
+
+ },
+
+ _getDragVerticalDirection: function() {
+ var delta = this.positionAbs.top - this.lastPositionAbs.top;
+ return delta !== 0 && (delta > 0 ? "down" : "up");
+ },
+
+ _getDragHorizontalDirection: function() {
+ var delta = this.positionAbs.left - this.lastPositionAbs.left;
+ return delta !== 0 && (delta > 0 ? "right" : "left");
+ },
+
+ refresh: function(event) {
+ this._refreshItems(event);
+ this.refreshPositions();
+ return this;
+ },
+
+ _connectWith: function() {
+ var options = this.options;
+ return options.connectWith.constructor === String ? [options.connectWith] : options.connectWith;
+ },
+
+ _getItemsAsjQuery: function(connected) {
+
+ var i, j, cur, inst,
+ items = [],
+ queries = [],
+ connectWith = this._connectWith();
+
+ if(connectWith && connected) {
+ for (i = connectWith.length - 1; i >= 0; i--){
+ cur = $(connectWith[i]);
+ for ( j = cur.length - 1; j >= 0; j--){
+ inst = $.data(cur[j], this.widgetFullName);
+ if(inst && inst !== this && !inst.options.disabled) {
+ queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), inst]);
+ }
+ }
+ }
+ }
+
+ queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), this]);
+
+ for (i = queries.length - 1; i >= 0; i--){
+ queries[i][0].each(function() {
+ items.push(this);
+ });
+ }
+
+ return $(items);
+
+ },
+
+ _removeCurrentsFromItems: function() {
+
+ var list = this.currentItem.find(":data(" + this.widgetName + "-item)");
+
+ this.items = $.grep(this.items, function (item) {
+ for (var j=0; j < list.length; j++) {
+ if(list[j] === item.item[0]) {
+ return false;
+ }
+ }
+ return true;
+ });
+
+ },
+
+ _refreshItems: function(event) {
+
+ this.items = [];
+ this.containers = [this];
+
+ var i, j, cur, inst, targetData, _queries, item, queriesLength,
+ items = this.items,
+ queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]],
+ connectWith = this._connectWith();
+
+ if(connectWith && this.ready) { //Shouldn't be run the first time through due to massive slow-down
+ for (i = connectWith.length - 1; i >= 0; i--){
+ cur = $(connectWith[i]);
+ for (j = cur.length - 1; j >= 0; j--){
+ inst = $.data(cur[j], this.widgetFullName);
+ if(inst && inst !== this && !inst.options.disabled) {
+ queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);
+ this.containers.push(inst);
+ }
+ }
+ }
+ }
+
+ for (i = queries.length - 1; i >= 0; i--) {
+ targetData = queries[i][1];
+ _queries = queries[i][0];
+
+ for (j=0, queriesLength = _queries.length; j < queriesLength; j++) {
+ item = $(_queries[j]);
+
+ item.data(this.widgetName + "-item", targetData); // Data for target checking (mouse manager)
+
+ items.push({
+ item: item,
+ instance: targetData,
+ width: 0, height: 0,
+ left: 0, top: 0
+ });
+ }
+ }
+
+ },
+
+ refreshPositions: function(fast) {
+
+ //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change
+ if(this.offsetParent && this.helper) {
+ this.offset.parent = this._getParentOffset();
+ }
+
+ var i, item, t, p;
+
+ for (i = this.items.length - 1; i >= 0; i--){
+ item = this.items[i];
+
+ //We ignore calculating positions of all connected containers when we're not over them
+ if(item.instance !== this.currentContainer && this.currentContainer && item.item[0] !== this.currentItem[0]) {
+ continue;
+ }
+
+ t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;
+
+ if (!fast) {
+ item.width = t.outerWidth();
+ item.height = t.outerHeight();
+ }
+
+ p = t.offset();
+ item.left = p.left;
+ item.top = p.top;
+ }
+
+ if(this.options.custom && this.options.custom.refreshContainers) {
+ this.options.custom.refreshContainers.call(this);
+ } else {
+ for (i = this.containers.length - 1; i >= 0; i--){
+ p = this.containers[i].element.offset();
+ this.containers[i].containerCache.left = p.left;
+ this.containers[i].containerCache.top = p.top;
+ this.containers[i].containerCache.width = this.containers[i].element.outerWidth();
+ this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
+ }
+ }
+
+ return this;
+ },
+
+ _createPlaceholder: function(that) {
+ that = that || this;
+ var className,
+ o = that.options;
+
+ if(!o.placeholder || o.placeholder.constructor === String) {
+ className = o.placeholder;
+ o.placeholder = {
+ element: function() {
+
+ var nodeName = that.currentItem[0].nodeName.toLowerCase(),
+ element = $( "<" + nodeName + ">", that.document[0] )
+ .addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
+ .removeClass("ui-sortable-helper");
+
+ if ( nodeName === "tr" ) {
+ that.currentItem.children().each(function() {
+ $( "
| ", that.document[0] )
+ .attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+ .appendTo( element );
+ });
+ } else if ( nodeName === "img" ) {
+ element.attr( "src", that.currentItem.attr( "src" ) );
+ }
+
+ if ( !className ) {
+ element.css( "visibility", "hidden" );
+ }
+
+ return element;
+ },
+ update: function(container, p) {
+
+ // 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
+ // 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
+ if(className && !o.forcePlaceholderSize) {
+ return;
+ }
+
+ //If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
+ if(!p.height()) { p.height(that.currentItem.innerHeight() - parseInt(that.currentItem.css("paddingTop")||0, 10) - parseInt(that.currentItem.css("paddingBottom")||0, 10)); }
+ if(!p.width()) { p.width(that.currentItem.innerWidth() - parseInt(that.currentItem.css("paddingLeft")||0, 10) - parseInt(that.currentItem.css("paddingRight")||0, 10)); }
+ }
+ };
+ }
+
+ //Create the placeholder
+ that.placeholder = $(o.placeholder.element.call(that.element, that.currentItem));
+
+ //Append it after the actual current item
+ that.currentItem.after(that.placeholder);
+
+ //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
+ o.placeholder.update(that, that.placeholder);
+
+ },
+
+ _contactContainers: function(event) {
+ var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, base, cur, nearBottom, floating,
+ innermostContainer = null,
+ innermostIndex = null;
+
+ // get innermost container that intersects with item
+ for (i = this.containers.length - 1; i >= 0; i--) {
+
+ // never consider a container that's located within the item itself
+ if($.contains(this.currentItem[0], this.containers[i].element[0])) {
+ continue;
+ }
+
+ if(this._intersectsWith(this.containers[i].containerCache)) {
+
+ // if we've already found a container and it's more "inner" than this, then continue
+ if(innermostContainer && $.contains(this.containers[i].element[0], innermostContainer.element[0])) {
+ continue;
+ }
+
+ innermostContainer = this.containers[i];
+ innermostIndex = i;
+
+ } else {
+ // container doesn't intersect. trigger "out" event if necessary
+ if(this.containers[i].containerCache.over) {
+ this.containers[i]._trigger("out", event, this._uiHash(this));
+ this.containers[i].containerCache.over = 0;
+ }
+ }
+
+ }
+
+ // if no intersecting containers found, return
+ if(!innermostContainer) {
+ return;
+ }
+
+ // move the item into the container if it's not there already
+ if(this.containers.length === 1) {
+ if (!this.containers[innermostIndex].containerCache.over) {
+ this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
+ this.containers[innermostIndex].containerCache.over = 1;
+ }
+ } else {
+
+ //When entering a new container, we will find the item with the least distance and append our item near it
+ dist = 10000;
+ itemWithLeastDistance = null;
+ floating = innermostContainer.floating || isFloating(this.currentItem);
+ posProperty = floating ? "left" : "top";
+ sizeProperty = floating ? "width" : "height";
+ base = this.positionAbs[posProperty] + this.offset.click[posProperty];
+ for (j = this.items.length - 1; j >= 0; j--) {
+ if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) {
+ continue;
+ }
+ if(this.items[j].item[0] === this.currentItem[0]) {
+ continue;
+ }
+ if (floating && !isOverAxis(this.positionAbs.top + this.offset.click.top, this.items[j].top, this.items[j].height)) {
+ continue;
+ }
+ cur = this.items[j].item.offset()[posProperty];
+ nearBottom = false;
+ if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)){
+ nearBottom = true;
+ cur += this.items[j][sizeProperty];
+ }
+
+ if(Math.abs(cur - base) < dist) {
+ dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
+ this.direction = nearBottom ? "up": "down";
+ }
+ }
+
+ //Check if dropOnEmpty is enabled
+ if(!itemWithLeastDistance && !this.options.dropOnEmpty) {
+ return;
+ }
+
+ if(this.currentContainer === this.containers[innermostIndex]) {
+ return;
+ }
+
+ itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[innermostIndex].element, true);
+ this._trigger("change", event, this._uiHash());
+ this.containers[innermostIndex]._trigger("change", event, this._uiHash(this));
+ this.currentContainer = this.containers[innermostIndex];
+
+ //Update the placeholder
+ this.options.placeholder.update(this.currentContainer, this.placeholder);
+
+ this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
+ this.containers[innermostIndex].containerCache.over = 1;
+ }
+
+
+ },
+
+ _createHelper: function(event) {
+
+ var o = this.options,
+ helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper === "clone" ? this.currentItem.clone() : this.currentItem);
+
+ //Add the helper to the DOM if that didn't happen already
+ if(!helper.parents("body").length) {
+ $(o.appendTo !== "parent" ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);
+ }
+
+ if(helper[0] === this.currentItem[0]) {
+ this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") };
+ }
+
+ if(!helper[0].style.width || o.forceHelperSize) {
+ helper.width(this.currentItem.width());
+ }
+ if(!helper[0].style.height || o.forceHelperSize) {
+ helper.height(this.currentItem.height());
+ }
+
+ return helper;
+
+ },
+
+ _adjustOffsetFromHelper: function(obj) {
+ if (typeof obj === "string") {
+ obj = obj.split(" ");
+ }
+ if ($.isArray(obj)) {
+ obj = {left: +obj[0], top: +obj[1] || 0};
+ }
+ if ("left" in obj) {
+ this.offset.click.left = obj.left + this.margins.left;
+ }
+ if ("right" in obj) {
+ this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
+ }
+ if ("top" in obj) {
+ this.offset.click.top = obj.top + this.margins.top;
+ }
+ if ("bottom" in obj) {
+ this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
+ }
+ },
+
+ _getParentOffset: function() {
+
+
+ //Get the offsetParent and cache its position
+ this.offsetParent = this.helper.offsetParent();
+ var po = this.offsetParent.offset();
+
+ // This is a special case where we need to modify a offset calculated on start, since the following happened:
+ // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
+ // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
+ // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
+ if(this.cssPosition === "absolute" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {
+ po.left += this.scrollParent.scrollLeft();
+ po.top += this.scrollParent.scrollTop();
+ }
+
+ // This needs to be actually done for all browsers, since pageX/pageY includes this information
+ // with an ugly IE fix
+ if( this.offsetParent[0] === document.body || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === "html" && $.ui.ie)) {
+ po = { top: 0, left: 0 };
+ }
+
+ return {
+ top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
+ left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
+ };
+
+ },
+
+ _getRelativeOffset: function() {
+
+ if(this.cssPosition === "relative") {
+ var p = this.currentItem.position();
+ return {
+ top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(),
+ left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft()
+ };
+ } else {
+ return { top: 0, left: 0 };
+ }
+
+ },
+
+ _cacheMargins: function() {
+ this.margins = {
+ left: (parseInt(this.currentItem.css("marginLeft"),10) || 0),
+ top: (parseInt(this.currentItem.css("marginTop"),10) || 0)
+ };
+ },
+
+ _cacheHelperProportions: function() {
+ this.helperProportions = {
+ width: this.helper.outerWidth(),
+ height: this.helper.outerHeight()
+ };
+ },
+
+ _setContainment: function() {
+
+ var ce, co, over,
+ o = this.options;
+ if(o.containment === "parent") {
+ o.containment = this.helper[0].parentNode;
+ }
+ if(o.containment === "document" || o.containment === "window") {
+ this.containment = [
+ 0 - this.offset.relative.left - this.offset.parent.left,
+ 0 - this.offset.relative.top - this.offset.parent.top,
+ $(o.containment === "document" ? document : window).width() - this.helperProportions.width - this.margins.left,
+ ($(o.containment === "document" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
+ ];
+ }
+
+ if(!(/^(document|window|parent)$/).test(o.containment)) {
+ ce = $(o.containment)[0];
+ co = $(o.containment).offset();
+ over = ($(ce).css("overflow") !== "hidden");
+
+ this.containment = [
+ co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
+ co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
+ co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
+ co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
+ ];
+ }
+
+ },
+
+ _convertPositionTo: function(d, pos) {
+
+ if(!pos) {
+ pos = this.position;
+ }
+ var mod = d === "absolute" ? 1 : -1,
+ scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent,
+ scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
+
+ return {
+ top: (
+ pos.top + // The absolute mouse position
+ this.offset.relative.top * mod + // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.top * mod - // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)
+ ),
+ left: (
+ pos.left + // The absolute mouse position
+ this.offset.relative.left * mod + // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.left * mod - // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)
+ )
+ };
+
+ },
+
+ _generatePosition: function(event) {
+
+ var top, left,
+ o = this.options,
+ pageX = event.pageX,
+ pageY = event.pageY,
+ scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
+
+ // This is another very weird special case that only happens for relative elements:
+ // 1. If the css position is relative
+ // 2. and the scroll parent is the document or similar to the offset parent
+ // we have to refresh the relative offset during the scroll so there are no jumps
+ if(this.cssPosition === "relative" && !(this.scrollParent[0] !== document && this.scrollParent[0] !== this.offsetParent[0])) {
+ this.offset.relative = this._getRelativeOffset();
+ }
+
+ /*
+ * - Position constraining -
+ * Constrain the position to a mix of grid, containment.
+ */
+
+ if(this.originalPosition) { //If we are not dragging yet, we won't check for options
+
+ if(this.containment) {
+ if(event.pageX - this.offset.click.left < this.containment[0]) {
+ pageX = this.containment[0] + this.offset.click.left;
+ }
+ if(event.pageY - this.offset.click.top < this.containment[1]) {
+ pageY = this.containment[1] + this.offset.click.top;
+ }
+ if(event.pageX - this.offset.click.left > this.containment[2]) {
+ pageX = this.containment[2] + this.offset.click.left;
+ }
+ if(event.pageY - this.offset.click.top > this.containment[3]) {
+ pageY = this.containment[3] + this.offset.click.top;
+ }
+ }
+
+ if(o.grid) {
+ top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
+ pageY = this.containment ? ( (top - this.offset.click.top >= this.containment[1] && top - this.offset.click.top <= this.containment[3]) ? top : ((top - this.offset.click.top >= this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
+
+ left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
+ pageX = this.containment ? ( (left - this.offset.click.left >= this.containment[0] && left - this.offset.click.left <= this.containment[2]) ? left : ((left - this.offset.click.left >= this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
+ }
+
+ }
+
+ return {
+ top: (
+ pageY - // The absolute mouse position
+ this.offset.click.top - // Click offset (relative to the element)
+ this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.top + // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
+ ),
+ left: (
+ pageX - // The absolute mouse position
+ this.offset.click.left - // Click offset (relative to the element)
+ this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.left + // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
+ )
+ };
+
+ },
+
+ _rearrange: function(event, i, a, hardRefresh) {
+
+ a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling));
+
+ //Various things done here to improve the performance:
+ // 1. we create a setTimeout, that calls refreshPositions
+ // 2. on the instance, we have a counter variable, that get's higher after every append
+ // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
+ // 4. this lets only the last addition to the timeout stack through
+ this.counter = this.counter ? ++this.counter : 1;
+ var counter = this.counter;
+
+ this._delay(function() {
+ if(counter === this.counter) {
+ this.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
+ }
+ });
+
+ },
+
+ _clear: function(event, noPropagation) {
+
+ this.reverting = false;
+ // We delay all events that have to be triggered to after the point where the placeholder has been removed and
+ // everything else normalized again
+ var i,
+ delayedTriggers = [];
+
+ // We first have to update the dom position of the actual currentItem
+ // Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088)
+ if(!this._noFinalSort && this.currentItem.parent().length) {
+ this.placeholder.before(this.currentItem);
+ }
+ this._noFinalSort = null;
+
+ if(this.helper[0] === this.currentItem[0]) {
+ for(i in this._storedCSS) {
+ if(this._storedCSS[i] === "auto" || this._storedCSS[i] === "static") {
+ this._storedCSS[i] = "";
+ }
+ }
+ this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
+ } else {
+ this.currentItem.show();
+ }
+
+ if(this.fromOutside && !noPropagation) {
+ delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); });
+ }
+ if((this.fromOutside || this.domPosition.prev !== this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent !== this.currentItem.parent()[0]) && !noPropagation) {
+ delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed
+ }
+
+ // Check if the items Container has Changed and trigger appropriate
+ // events.
+ if (this !== this.currentContainer) {
+ if(!noPropagation) {
+ delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); });
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); }; }).call(this, this.currentContainer));
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this)); }; }).call(this, this.currentContainer));
+ }
+ }
+
+
+ //Post events to containers
+ for (i = this.containers.length - 1; i >= 0; i--){
+ if(!noPropagation) {
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("deactivate", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
+ }
+ if(this.containers[i].containerCache.over) {
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("out", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
+ this.containers[i].containerCache.over = 0;
+ }
+ }
+
+ //Do what was originally in plugins
+ if ( this.storedCursor ) {
+ this.document.find( "body" ).css( "cursor", this.storedCursor );
+ this.storedStylesheet.remove();
+ }
+ if(this._storedOpacity) {
+ this.helper.css("opacity", this._storedOpacity);
+ }
+ if(this._storedZIndex) {
+ this.helper.css("zIndex", this._storedZIndex === "auto" ? "" : this._storedZIndex);
+ }
+
+ this.dragging = false;
+ if(this.cancelHelperRemoval) {
+ if(!noPropagation) {
+ this._trigger("beforeStop", event, this._uiHash());
+ for (i=0; i < delayedTriggers.length; i++) {
+ delayedTriggers[i].call(this, event);
+ } //Trigger all delayed events
+ this._trigger("stop", event, this._uiHash());
+ }
+
+ this.fromOutside = false;
+ return false;
+ }
+
+ if(!noPropagation) {
+ this._trigger("beforeStop", event, this._uiHash());
+ }
+
+ //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
+ this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
+
+ if(this.helper[0] !== this.currentItem[0]) {
+ this.helper.remove();
+ }
+ this.helper = null;
+
+ if(!noPropagation) {
+ for (i=0; i < delayedTriggers.length; i++) {
+ delayedTriggers[i].call(this, event);
+ } //Trigger all delayed events
+ this._trigger("stop", event, this._uiHash());
+ }
+
+ this.fromOutside = false;
+ return true;
+
+ },
+
+ _trigger: function() {
+ if ($.Widget.prototype._trigger.apply(this, arguments) === false) {
+ this.cancel();
+ }
+ },
+
+ _uiHash: function(_inst) {
+ var inst = _inst || this;
+ return {
+ helper: inst.helper,
+ placeholder: inst.placeholder || $([]),
+ position: inst.position,
+ originalPosition: inst.originalPosition,
+ offset: inst.positionAbs,
+ item: inst.currentItem,
+ sender: _inst ? _inst.element : null
+ };
+ }
+
+});
+
+})(jQuery);
+;/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
+ * http://benalman.com/
+ * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
+
+(function($) {
+
+ var o = $({});
+
+ $.subscribe = function() {
+ //console.log("SUBSCRIBE: " + arguments[0]);
+ o.on.apply(o, arguments);
+ };
+
+ $.unsubscribe = function() {
+ o.off.apply(o, arguments);
+ };
+
+ $.publish = function() {
+ //console.log("PUBLISH: " + arguments[0]);
+ o.trigger.apply(o, arguments);
+ };
+
+}(jQuery));
+
+
+;/* ===========================================================
+ * bootstrap-tooltip.js v2.1.1
+ * http://twitter.github.com/bootstrap/javascript.html#tooltips
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+ "use strict"; // jshint ;_;
+
+
+ /* TOOLTIP PUBLIC CLASS DEFINITION
+ * =============================== */
+
+ var Tooltip = function (element, options) {
+ this.init('tooltip', element, options)
+ }
+
+ Tooltip.prototype = {
+
+ constructor: Tooltip
+
+ , init: function (type, element, options) {
+ var eventIn
+ , eventOut
+
+ this.type = type
+ this.$element = $(element)
+ this.options = this.getOptions(options)
+ this.enabled = true
+
+ if (this.options.trigger == 'click') {
+ this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
+ } else if (this.options.trigger != 'manual') {
+ eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
+ eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
+ this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+ this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
+ }
+
+ this.options.selector ?
+ (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+ this.fixTitle()
+ }
+
+ , getOptions: function (options) {
+ options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
+
+ if (options.delay && typeof options.delay == 'number') {
+ options.delay = {
+ show: options.delay
+ , hide: options.delay
+ }
+ }
+
+ return options
+ }
+
+ , enter: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (!self.options.delay || !self.options.delay.show) return self.show()
+
+ clearTimeout(this.timeout)
+ self.hoverState = 'in'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'in') self.show()
+ }, self.options.delay.show)
+ }
+
+ , leave: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (this.timeout) clearTimeout(this.timeout)
+ if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+ self.hoverState = 'out'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'out') self.hide()
+ }, self.options.delay.hide)
+ }
+
+ , show: function () {
+ var $tip
+ , inside
+ , pos
+ , actualWidth
+ , actualHeight
+ , placement
+ , tp
+
+ if (this.hasContent() && this.enabled) {
+ $tip = this.tip()
+ this.setContent()
+
+ if (this.options.animation) {
+ $tip.addClass('fade')
+ }
+
+ placement = typeof this.options.placement == 'function' ?
+ this.options.placement.call(this, $tip[0], this.$element[0]) :
+ this.options.placement
+
+ inside = /in/.test(placement)
+
+ $tip
+ .remove()
+ .css({ top: 0, left: 0, display: 'block' })
+ .appendTo(inside ? this.$element : document.body)
+
+ pos = this.getPosition(inside)
+
+ actualWidth = $tip[0].offsetWidth
+ actualHeight = $tip[0].offsetHeight
+
+ switch (inside ? placement.split(' ')[1] : placement) {
+ case 'bottom':
+ tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
+ break
+ case 'top':
+ tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
+ break
+ case 'left':
+ tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
+ break
+ case 'right':
+ tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
+ break
+ }
+
+ $tip
+ .css(tp)
+ .addClass(placement)
+ .addClass('in')
+ }
+ }
+
+ , setContent: function () {
+ var $tip = this.tip()
+ , title = this.getTitle()
+
+ $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
+ $tip.removeClass('fade in top bottom left right')
+ }
+
+ , hide: function () {
+ var that = this
+ , $tip = this.tip()
+
+ $tip.removeClass('in')
+
+ function removeWithAnimation() {
+ var timeout = setTimeout(function () {
+ $tip.off($.support.transition.end).remove()
+ }, 500)
+
+ $tip.one($.support.transition.end, function () {
+ clearTimeout(timeout)
+ $tip.remove()
+ })
+ }
+
+ $.support.transition && this.$tip.hasClass('fade') ?
+ removeWithAnimation() :
+ $tip.remove()
+
+ return this
+ }
+
+ , fixTitle: function () {
+ var $e = this.$element
+ if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+ $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+ }
+ }
+
+ , hasContent: function () {
+ return this.getTitle()
+ }
+
+ , getPosition: function (inside) {
+ return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
+ width: this.$element[0].offsetWidth
+ , height: this.$element[0].offsetHeight
+ })
+ }
+
+ , getTitle: function () {
+ var title
+ , $e = this.$element
+ , o = this.options
+
+ title = $e.attr('data-original-title')
+ || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
+
+ return title
+ }
+
+ , tip: function () {
+ return this.$tip = this.$tip || $(this.options.template)
+ }
+
+ , validate: function () {
+ if (!this.$element[0].parentNode) {
+ this.hide()
+ this.$element = null
+ this.options = null
+ }
+ }
+
+ , enable: function () {
+ this.enabled = true
+ }
+
+ , disable: function () {
+ this.enabled = false
+ }
+
+ , toggleEnabled: function () {
+ this.enabled = !this.enabled
+ }
+
+ , toggle: function () {
+ this[this.tip().hasClass('in') ? 'hide' : 'show']()
+ }
+
+ , destroy: function () {
+ this.hide().$element.off('.' + this.type).removeData(this.type)
+ }
+
+ }
+
+
+ /* TOOLTIP PLUGIN DEFINITION
+ * ========================= */
+
+ $.fn.tooltip = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('tooltip')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.tooltip.Constructor = Tooltip
+
+ $.fn.tooltip.defaults = {
+ animation: true
+ , placement: 'top'
+ , selector: false
+ , template: '
'
+ , trigger: 'hover'
+ , title: ''
+ , delay: 0
+ , html: true
+ }
+
+}(window.jQuery);
+;/**
+* This class lets you encode animated GIF files
+* Base class : http://www.java2s.com/Code/Java/2D-Graphics-GUI/AnimatedGifEncoder.htm
+* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
+* @author Thibault Imbert (AS3 version - bytearray.org)
+* @version 0.1 AS3 implementation
+*/
+
+
+ //import flash.utils.ByteArray;
+ //import flash.display.BitmapData;
+ //import flash.display.Bitmap;
+ //import org.bytearray.gif.encoder.NeuQuant
+ //import flash.net.URLRequestHeader;
+ //import flash.net.URLRequestMethod;
+ //import flash.net.URLRequest;
+ //import flash.net.navigateToURL;
+
+ GIFEncoder = function()
+ {
+ for(var i = 0, chr = {}; i < 256; i++)
+ chr[i] = String.fromCharCode(i);
+
+ function ByteArray(){
+ this.bin = [];
+ }
+
+ ByteArray.prototype.getData = function(){
+
+ for(var v = '', l = this.bin.length, i = 0; i < l; i++)
+ v += chr[this.bin[i]];
+ return v;
+ }
+ ByteArray.prototype.writeByte = function(val){
+ this.bin.push(val);
+ }
+ ByteArray.prototype.writeUTFBytes = function(string){
+ for(var l = string.length, i = 0; i < l; i++)
+ this.writeByte(string.charCodeAt(i));
+ }
+ ByteArray.prototype.writeBytes = function(array, offset, length){
+ for(var l = length || array.length, i = offset||0; i < l; i++)
+ this.writeByte(array[i]);
+ }
+
+ var exports = {};
+ /*private*/ var width/*int*/ // image size
+ /*private*/ var height/*int*/;
+ /*private*/ var transparent/***/ = null; // transparent color if given
+ /*private*/ var transIndex/*int*/; // transparent index in color table
+ /*private*/ var repeat/*int*/ = -1; // no repeat
+ /*private*/ var delay/*int*/ = 0; // frame delay (hundredths)
+ /*private*/ var started/*Boolean*/ = false; // ready to output frames
+ /*private*/ var out/*ByteArray*/;
+ /*private*/ var image/*Bitmap*/; // current frame
+ /*private*/ var pixels/*ByteArray*/; // BGR byte array from frame
+ /*private*/ var indexedPixels/*ByteArray*/ // converted frame indexed to palette
+ /*private*/ var colorDepth/*int*/; // number of bit planes
+ /*private*/ var colorTab/*ByteArray*/; // RGB palette
+ /*private*/ var usedEntry/*Array*/ = new Array; // active palette entries
+ /*private*/ var palSize/*int*/ = 7; // color table size (bits-1)
+ /*private*/ var dispose/*int*/ = -1; // disposal code (-1 = use default)
+ /*private*/ var closeStream/*Boolean*/ = false; // close stream when finished
+ /*private*/ var firstFrame/*Boolean*/ = true;
+ /*private*/ var sizeSet/*Boolean*/ = false; // if false, get size from first frame
+ /*private*/ var sample/*int*/ = 10; // default sample interval for quantizer
+
+ /**
+ * Sets the delay time between each frame, or changes it for subsequent frames
+ * (applies to last frame added)
+ * int delay time in milliseconds
+ * @param ms
+ */
+
+ var setDelay = exports.setDelay = function setDelay(ms/*int*/)/*void*/
+ {
+
+ delay = Math.round(ms / 10);
+
+ }
+
+ /**
+ * Sets the GIF frame disposal code for the last added frame and any
+ *
+ * subsequent frames. Default is 0 if no transparent color has been set,
+ * otherwise 2.
+ * @param code
+ * int disposal code.
+ */
+
+ var setDispose = exports.setDispose = function setDispose(code/*int*/)/*void*/
+ {
+
+ if (code >= 0) dispose = code;
+
+ }
+
+ /**
+ * Sets the number of times the set of GIF frames should be played. Default is
+ * 1; 0 means play indefinitely. Must be invoked before the first image is
+ * added.
+ *
+ * @param iter
+ * int number of iterations.
+ * @return
+ */
+
+ var setRepeat = exports.setRepeat = function setRepeat(iter/*int*/)/*void*/
+ {
+
+ if (iter >= 0) repeat = iter;
+
+ }
+
+ /**
+ * Sets the transparent color for the last added frame and any subsequent
+ * frames. Since all colors are subject to modification in the quantization
+ * process, the color in the final palette for each frame closest to the given
+ * color becomes the transparent color for that frame. May be set to null to
+ * indicate no transparent color.
+ * @param
+ * Color to be treated as transparent on display.
+ */
+
+ var setTransparent = exports.setTransparent = function setTransparent(c/*Number*/)/*void*/
+ {
+
+ transparent = c;
+
+ }
+
+ /**
+ * The addFrame method takes an incoming BitmapData object to create each frames
+ * @param
+ * BitmapData object to be treated as a GIF's frame
+ */
+
+ var addFrame = exports.addFrame = function addFrame(im/*BitmapData*/, is_imageData)/*Boolean*/
+ {
+
+ if ((im == null) || !started || out == null)
+ {
+ throw new Error ("Please call start method before calling addFrame");
+ return false;
+ }
+
+ var ok/*Boolean*/ = true;
+
+ try {
+ if(!is_imageData){
+ image = im.getImageData(0,0, im.canvas.width, im.canvas.height).data;
+ if (!sizeSet) setSize(im.canvas.width, im.canvas.height);
+ }else{
+ image = im;
+ }
+ getImagePixels(); // convert to correct format if necessary
+ analyzePixels(); // build color table & map pixels
+
+ if (firstFrame)
+ {
+ writeLSD(); // logical screen descriptior
+ writePalette(); // global color table
+ if (repeat >= 0)
+ {
+ // use NS app extension to indicate reps
+ writeNetscapeExt();
+ }
+ }
+
+ writeGraphicCtrlExt(); // write graphic control extension
+ writeImageDesc(); // image descriptor
+ if (!firstFrame) writePalette(); // local color table
+ writePixels(); // encode and write pixel data
+ firstFrame = false;
+ } catch (e/*Error*/) {
+ ok = false;
+ }
+
+ return ok;
+
+ }
+
+ /**
+ * Adds final trailer to the GIF stream, if you don't call the finish method
+ * the GIF stream will not be valid.
+ */
+
+ var finish = exports.finish = function finish()/*Boolean*/
+ {
+ if (!started) return false;
+ var ok/*Boolean*/ = true;
+ started = false;
+ try {
+ out.writeByte(0x3b); // gif trailer
+ } catch (e/*Error*/) {
+ ok = false;
+ }
+
+ return ok;
+
+ }
+
+ /**
+ * Resets some members so that a new stream can be started.
+ * This method is actually called by the start method
+ */
+
+ var reset = function reset ( )/*void*/
+ {
+
+ // reset for subsequent use
+ transIndex = 0;
+ image = null;
+ pixels = null;
+ indexedPixels = null;
+ colorTab = null;
+ closeStream = false;
+ firstFrame = true;
+
+ }
+
+ /**
+ * * Sets frame rate in frames per second. Equivalent to
+ *
setDelay(1000/fps).
+ * @param fps
+ * float frame rate (frames per second)
+ */
+
+ var setFrameRate = exports.setFrameRate = function setFrameRate(fps/*Number*/)/*void*/
+ {
+
+ if (fps != 0xf) delay = Math.round(100/fps);
+
+ }
+
+ /**
+ * Sets quality of color quantization (conversion of images to the maximum 256
+ * colors allowed by the GIF specification). Lower values (minimum = 1)
+ * produce better colors, but slow processing significantly. 10 is the
+ * default, and produces good color mapping at reasonable speeds. Values
+ * greater than 20 do not yield significant improvements in speed.
+ * @param quality
+ * int greater than 0.
+ * @return
+ */
+
+ var setQuality = exports.setQuality = function setQuality(quality/*int*/)/*void*/
+ {
+
+ if (quality < 1) quality = 1;
+ sample = quality;
+
+ }
+
+ /**
+ * Sets the GIF frame size. The default size is the size of the first frame
+ * added if this method is not invoked.
+ * @param w
+ * int frame width.
+ * @param h
+ * int frame width.
+ */
+
+ var setSize = exports.setSize = function setSize(w/*int*/, h/*int*/)/*void*/
+ {
+
+ if (started && !firstFrame) return;
+ width = w;
+ height = h;
+ if (width < 1)width = 320;
+ if (height < 1)height = 240;
+ sizeSet = true
+
+ }
+
+ /**
+ * Initiates GIF file creation on the given stream.
+ * @param os
+ * OutputStream on which GIF images are written.
+ * @return false if initial write failed.
+ *
+ */
+
+ var start = exports.start = function start()/*Boolean*/
+ {
+
+ reset();
+ var ok/*Boolean*/ = true;
+ closeStream = false;
+ out = new ByteArray;
+ try {
+ out.writeUTFBytes("GIF89a"); // header
+ } catch (e/*Error*/) {
+ ok = false;
+ }
+
+ return started = ok;
+
+ }
+
+ var cont = exports.cont = function cont()/*Boolean*/
+ {
+
+ reset();
+ var ok/*Boolean*/ = true;
+ closeStream = false;
+ out = new ByteArray;
+
+ return started = ok;
+
+ }
+
+ /**
+ * Analyzes image colors and creates color map.
+ */
+
+ var analyzePixels = function analyzePixels()/*void*/
+ {
+
+ var len/*int*/ = pixels.length;
+ var nPix/*int*/ = len / 3;
+ indexedPixels = [];
+ var nq/*NeuQuant*/ = new NeuQuant(pixels, len, sample);
+ // initialize quantizer
+ colorTab = nq.process(); // create reduced palette
+ // map image pixels to new palette
+ var k/*int*/ = 0;
+ for (var j/*int*/ = 0; j < nPix; j++) {
+ var index/*int*/ = nq.map(pixels[k++] & 0xff, pixels[k++] & 0xff, pixels[k++] & 0xff);
+ usedEntry[index] = true;
+ indexedPixels[j] = index;
+ }
+ pixels = null;
+ colorDepth = 8;
+ palSize = 7;
+ // get closest match to transparent color if specified
+ if (transparent != null) {
+ transIndex = findClosest(transparent);
+
+ var r = colorTab[transIndex*3];
+ var g = colorTab[transIndex*3+1];
+ var b = colorTab[transIndex*3+2];
+ var trans_indices = [];
+ for (var i=0; i
= 0) {
+ indexedPixels[i] = transIndex;
+ }
+ }
+ }
+ }
+
+ /**
+ * Returns index of palette color closest to c
+ *
+ */
+
+ var findClosest = function findClosest(c/*Number*/)/*int*/
+ {
+
+ if (colorTab == null) return -1;
+ var r/*int*/ = (c & 0xFF0000) >> 16;
+ var g/*int*/ = (c & 0x00FF00) >> 8;
+ var b/*int*/ = (c & 0x0000FF);
+ var minpos/*int*/ = 0;
+ var dmin/*int*/ = 256 * 256 * 256;
+ var len/*int*/ = colorTab.length;
+
+ for (var i/*int*/ = 0; i < len;) {
+ var dr/*int*/ = r - (colorTab[i++] & 0xff);
+ var dg/*int*/ = g - (colorTab[i++] & 0xff);
+ var db/*int*/ = b - (colorTab[i] & 0xff);
+ var d/*int*/ = dr * dr + dg * dg + db * db;
+ var index/*int*/ = i / 3;
+ if (usedEntry[index] && (d < dmin)) {
+ dmin = d;
+ minpos = index;
+ }
+ i++;
+ }
+ return minpos;
+
+ }
+
+ /**
+ * Extracts image pixels into byte array "pixels
+ */
+
+ var getImagePixels = function getImagePixels()/*void*/
+ {
+
+ var w/*int*/ = width;
+ var h/*int*/ = height;
+ pixels = [];
+ var data = image;
+ var count/*int*/ = 0;
+
+ for ( var i/*int*/ = 0; i < h; i++ )
+ {
+
+ for (var j/*int*/ = 0; j < w; j++ )
+ {
+
+ var b = (i*w*4)+j*4;
+ pixels[count++] = data[b];
+ pixels[count++] = data[b+1];
+ pixels[count++] = data[b+2];
+
+ }
+
+ }
+
+ }
+
+ /**
+ * Writes Graphic Control Extension
+ */
+
+ var writeGraphicCtrlExt = function writeGraphicCtrlExt()/*void*/
+ {
+ out.writeByte(0x21); // extension introducer
+ out.writeByte(0xf9); // GCE label
+ out.writeByte(4); // data block size
+ var transp/*int*/
+ var disp/*int*/;
+ if (transparent == null) {
+ transp = 0;
+ disp = 0; // dispose = no action
+ } else {
+ transp = 1;
+ disp = 2; // force clear if using transparent color
+ }
+ if (dispose >= 0) {
+ disp = dispose & 7; // user override
+ }
+ disp <<= 2;
+ // packed fields
+ out.writeByte(0 | // 1:3 reserved
+ disp | // 4:6 disposal
+ 0 | // 7 user input - 0 = none
+ transp); // 8 transparency flag
+
+ WriteShort(delay); // delay x 1/100 sec
+ out.writeByte(transIndex); // transparent color index
+ out.writeByte(0); // block terminator
+
+ }
+
+ /**
+ * Writes Image Descriptor
+ */
+
+ var writeImageDesc = function writeImageDesc()/*void*/
+ {
+
+ out.writeByte(0x2c); // image separator
+ WriteShort(0); // image position x,y = 0,0
+ WriteShort(0);
+ WriteShort(width); // image size
+ WriteShort(height);
+
+ // packed fields
+ if (firstFrame) {
+ // no LCT - GCT is used for first (or only) frame
+ out.writeByte(0);
+ } else {
+ // specify normal LCT
+ out.writeByte(0x80 | // 1 local color table 1=yes
+ 0 | // 2 interlace - 0=no
+ 0 | // 3 sorted - 0=no
+ 0 | // 4-5 reserved
+ palSize); // 6-8 size of color table
+ }
+ }
+
+ /**
+ * Writes Logical Screen Descriptor
+ */
+
+ var writeLSD = function writeLSD()/*void*/
+ {
+
+ // logical screen size
+ WriteShort(width);
+ WriteShort(height);
+ // packed fields
+ out.writeByte((0x80 | // 1 : global color table flag = 1 (gct used)
+ 0x70 | // 2-4 : color resolution = 7
+ 0x00 | // 5 : gct sort flag = 0
+ palSize)); // 6-8 : gct size
+
+ out.writeByte(0); // background color index
+ out.writeByte(0); // pixel aspect ratio - assume 1:1
+
+ }
+
+ /**
+ * Writes Netscape application extension to define repeat count.
+ */
+
+ var writeNetscapeExt = function writeNetscapeExt()/*void*/
+ {
+
+ out.writeByte(0x21); // extension introducer
+ out.writeByte(0xff); // app extension label
+ out.writeByte(11); // block size
+ out.writeUTFBytes("NETSCAPE" + "2.0"); // app id + auth code
+ out.writeByte(3); // sub-block size
+ out.writeByte(1); // loop sub-block id
+ WriteShort(repeat); // loop count (extra iterations, 0=repeat forever)
+ out.writeByte(0); // block terminator
+
+ }
+
+ /**
+ * Writes color table
+ */
+
+ var writePalette = function writePalette()/*void*/
+ {
+ out.writeBytes(colorTab);
+ var n/*int*/ = (3 * 256) - colorTab.length;
+ for (var i/*int*/ = 0; i < n; i++) out.writeByte(0);
+
+ }
+
+ var WriteShort = function WriteShort (pValue/*int*/)/*void*/
+ {
+
+ out.writeByte( pValue & 0xFF );
+ out.writeByte( (pValue >> 8) & 0xFF);
+
+ }
+
+ /**
+ * Encodes and writes pixel data
+ */
+
+ var writePixels = function writePixels()/*void*/
+ {
+
+ var myencoder/*LZWEncoder*/ = new LZWEncoder(width, height, indexedPixels, colorDepth);
+ myencoder.encode(out);
+
+ }
+
+ /**
+ * retrieves the GIF stream
+ */
+ var stream = exports.stream = function stream ( )/*ByteArray*/
+ {
+
+ return out;
+
+ }
+
+ var setProperties = exports.setProperties = function setProperties(has_start, is_first){
+ started = has_start;
+ firstFrame = is_first;
+ //out = new ByteArray; //??
+ }
+
+ return exports
+
+ }
+;function encode64(input) {
+ var output = "", i = 0, l = input.length,
+ key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+ chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+ while (i < l) {
+ chr1 = input.charCodeAt(i++);
+ chr2 = input.charCodeAt(i++);
+ chr3 = input.charCodeAt(i++);
+ enc1 = chr1 >> 2;
+ enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+ enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+ enc4 = chr3 & 63;
+ if (isNaN(chr2)) enc3 = enc4 = 64;
+ else if (isNaN(chr3)) enc4 = 64;
+ output = output + key.charAt(enc1) + key.charAt(enc2) + key.charAt(enc3) + key.charAt(enc4);
+ }
+ return output;
+}
+;/*
+* NeuQuant Neural-Net Quantization Algorithm
+* ------------------------------------------
+*
+* Copyright (c) 1994 Anthony Dekker
+*
+* NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994. See
+* "Kohonen neural networks for optimal colour quantization" in "Network:
+* Computation in Neural Systems" Vol. 5 (1994) pp 351-367. for a discussion of
+* the algorithm.
+*
+* Any party obtaining a copy of these files from the author, directly or
+* indirectly, is granted, free of charge, a full and unrestricted irrevocable,
+* world-wide, paid up, royalty-free, nonexclusive right and license to deal in
+* this software and documentation files (the "Software"), including without
+* limitation the rights to use, copy, modify, merge, publish, distribute,
+* sublicense, and/or sell copies of the Software, and to permit persons who
+* receive copies from any such party to do so, with the only requirement being
+* that this copyright notice remain intact.
+*/
+
+/*
+* This class handles Neural-Net quantization algorithm
+* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
+* @author Thibault Imbert (AS3 version - bytearray.org)
+* @version 0.1 AS3 implementation
+*/
+
+ //import flash.utils.ByteArray;
+
+ NeuQuant = function()
+ {
+ var exports = {};
+ /*private_static*/ var netsize/*int*/ = 256; /* number of colours used */
+
+ /* four primes near 500 - assume no image has a length so large */
+ /* that it is divisible by all four primes */
+
+ /*private_static*/ var prime1/*int*/ = 499;
+ /*private_static*/ var prime2/*int*/ = 491;
+ /*private_static*/ var prime3/*int*/ = 487;
+ /*private_static*/ var prime4/*int*/ = 503;
+ /*private_static*/ var minpicturebytes/*int*/ = (3 * prime4);
+
+ /* minimum size for input image */
+ /*
+ * Program Skeleton ---------------- [select samplefac in range 1..30] [read
+ * image from input file] pic = (unsigned char*) malloc(3*width*height);
+ * initnet(pic,3*width*height,samplefac); learn(); unbiasnet(); [write output
+ * image header, using writecolourmap(f)] inxbuild(); write output image using
+ * inxsearch(b,g,r)
+ */
+
+ /*
+ * Network Definitions -------------------
+ */
+
+ /*private_static*/ var maxnetpos/*int*/ = (netsize - 1);
+ /*private_static*/ var netbiasshift/*int*/ = 4; /* bias for colour values */
+ /*private_static*/ var ncycles/*int*/ = 100; /* no. of learning cycles */
+
+ /* defs for freq and bias */
+ /*private_static*/ var intbiasshift/*int*/ = 16; /* bias for fractions */
+ /*private_static*/ var intbias/*int*/ = (1 << intbiasshift);
+ /*private_static*/ var gammashift/*int*/ = 10; /* gamma = 1024 */
+ /*private_static*/ var gamma/*int*/ = (1 << gammashift);
+ /*private_static*/ var betashift/*int*/ = 10;
+ /*private_static*/ var beta/*int*/ = (intbias >> betashift); /* beta = 1/1024 */
+ /*private_static*/ var betagamma/*int*/ = (intbias << (gammashift - betashift));
+
+ /* defs for decreasing radius factor */
+ /*private_static*/ var initrad/*int*/ = (netsize >> 3); /*
+ * for 256 cols, radius
+ * starts
+ */
+
+ /*private_static*/ var radiusbiasshift/*int*/ = 6; /* at 32.0 biased by 6 bits */
+ /*private_static*/ var radiusbias/*int*/ = (1 << radiusbiasshift);
+ /*private_static*/ var initradius/*int*/ = (initrad * radiusbias); /*
+ * and
+ * decreases
+ * by a
+ */
+
+ /*private_static*/ var radiusdec/*int*/ = 30; /* factor of 1/30 each cycle */
+
+ /* defs for decreasing alpha factor */
+ /*private_static*/ var alphabiasshift/*int*/ = 10; /* alpha starts at 1.0 */
+ /*private_static*/ var initalpha/*int*/ = (1 << alphabiasshift);
+ /*private*/ var alphadec/*int*/ /* biased by 10 bits */
+
+ /* radbias and alpharadbias used for radpower calculation */
+ /*private_static*/ var radbiasshift/*int*/ = 8;
+ /*private_static*/ var radbias/*int*/ = (1 << radbiasshift);
+ /*private_static*/ var alpharadbshift/*int*/ = (alphabiasshift + radbiasshift);
+
+ /*private_static*/ var alpharadbias/*int*/ = (1 << alpharadbshift);
+
+ /*
+ * Types and Global Variables --------------------------
+ */
+
+ /*private*/ var thepicture/*ByteArray*//* the input image itself */
+ /*private*/ var lengthcount/*int*/; /* lengthcount = H*W*3 */
+ /*private*/ var samplefac/*int*/; /* sampling factor 1..30 */
+
+ // typedef int pixel[4]; /* BGRc */
+ /*private*/ var network/*Array*/; /* the network itself - [netsize][4] */
+ /*protected*/ var netindex/*Array*/ = new Array();
+
+ /* for network lookup - really 256 */
+ /*private*/ var bias/*Array*/ = new Array();
+
+ /* bias and freq arrays for learning */
+ /*private*/ var freq/*Array*/ = new Array();
+ /*private*/ var radpower/*Array*/ = new Array();
+
+ var NeuQuant = exports.NeuQuant = function NeuQuant(thepic/*ByteArray*/, len/*int*/, sample/*int*/)
+ {
+
+ var i/*int*/;
+ var p/*Array*/;
+
+ thepicture = thepic;
+ lengthcount = len;
+ samplefac = sample;
+
+ network = new Array(netsize);
+
+ for (i = 0; i < netsize; i++)
+ {
+
+ network[i] = new Array(4);
+ p = network[i];
+ p[0] = p[1] = p[2] = (i << (netbiasshift + 8)) / netsize;
+ freq[i] = intbias / netsize; /* 1/netsize */
+ bias[i] = 0;
+ }
+
+ }
+
+ var colorMap = function colorMap()/*ByteArray*/
+ {
+
+ var map/*ByteArray*/ = [];
+ var index/*Array*/ = new Array(netsize);
+ for (var i/*int*/ = 0; i < netsize; i++)
+ index[network[i][3]] = i;
+ var k/*int*/ = 0;
+ for (var l/*int*/ = 0; l < netsize; l++) {
+ var j/*int*/ = index[l];
+ map[k++] = (network[j][0]);
+ map[k++] = (network[j][1]);
+ map[k++] = (network[j][2]);
+ }
+ return map;
+
+ }
+
+ /*
+ * Insertion sort of network and building of netindex[0..255] (to do after
+ * unbias)
+ * -------------------------------------------------------------------------------
+ */
+
+ var inxbuild = function inxbuild()/*void*/
+ {
+
+ var i/*int*/;
+ var j/*int*/;
+ var smallpos/*int*/;
+ var smallval/*int*/;
+ var p/*Array*/;
+ var q/*Array*/;
+ var previouscol/*int*/
+ var startpos/*int*/
+
+ previouscol = 0;
+ startpos = 0;
+ for (i = 0; i < netsize; i++)
+ {
+
+ p = network[i];
+ smallpos = i;
+ smallval = p[1]; /* index on g */
+ /* find smallest in i..netsize-1 */
+ for (j = i + 1; j < netsize; j++)
+ {
+ q = network[j];
+ if (q[1] < smallval)
+ { /* index on g */
+
+ smallpos = j;
+ smallval = q[1]; /* index on g */
+ }
+ }
+
+ q = network[smallpos];
+ /* swap p (i) and q (smallpos) entries */
+
+ if (i != smallpos)
+ {
+
+ j = q[0];
+ q[0] = p[0];
+ p[0] = j;
+ j = q[1];
+ q[1] = p[1];
+ p[1] = j;
+ j = q[2];
+ q[2] = p[2];
+ p[2] = j;
+ j = q[3];
+ q[3] = p[3];
+ p[3] = j;
+
+ }
+
+ /* smallval entry is now in position i */
+
+ if (smallval != previouscol)
+
+ {
+
+ netindex[previouscol] = (startpos + i) >> 1;
+
+ for (j = previouscol + 1; j < smallval; j++) netindex[j] = i;
+
+ previouscol = smallval;
+ startpos = i;
+
+ }
+
+ }
+
+ netindex[previouscol] = (startpos + maxnetpos) >> 1;
+ for (j = previouscol + 1; j < 256; j++) netindex[j] = maxnetpos; /* really 256 */
+
+ }
+
+ /*
+ * Main Learning Loop ------------------
+ */
+
+ var learn = function learn()/*void*/
+
+ {
+
+ var i/*int*/;
+ var j/*int*/;
+ var b/*int*/;
+ var g/*int*/
+ var r/*int*/;
+ var radius/*int*/;
+ var rad/*int*/;
+ var alpha/*int*/;
+ var step/*int*/;
+ var delta/*int*/;
+ var samplepixels/*int*/;
+ var p/*ByteArray*/;
+ var pix/*int*/;
+ var lim/*int*/;
+
+ if (lengthcount < minpicturebytes) samplefac = 1;
+
+ alphadec = 30 + ((samplefac - 1) / 3);
+ p = thepicture;
+ pix = 0;
+ lim = lengthcount;
+ samplepixels = lengthcount / (3 * samplefac);
+ delta = samplepixels / ncycles;
+ alpha = initalpha;
+ radius = initradius;
+
+ rad = radius >> radiusbiasshift;
+ if (rad <= 1) rad = 0;
+
+ for (i = 0; i < rad; i++) radpower[i] = alpha * (((rad * rad - i * i) * radbias) / (rad * rad));
+
+
+ if (lengthcount < minpicturebytes) step = 3;
+
+ else if ((lengthcount % prime1) != 0) step = 3 * prime1;
+
+ else
+
+ {
+
+ if ((lengthcount % prime2) != 0) step = 3 * prime2;
+
+ else
+
+ {
+
+ if ((lengthcount % prime3) != 0) step = 3 * prime3;
+
+ else step = 3 * prime4;
+
+ }
+
+ }
+
+ i = 0;
+
+ while (i < samplepixels)
+
+ {
+
+ b = (p[pix + 0] & 0xff) << netbiasshift;
+ g = (p[pix + 1] & 0xff) << netbiasshift;
+ r = (p[pix + 2] & 0xff) << netbiasshift;
+ j = contest(b, g, r);
+
+ altersingle(alpha, j, b, g, r);
+
+ if (rad != 0) alterneigh(rad, j, b, g, r); /* alter neighbours */
+
+ pix += step;
+
+ if (pix >= lim) pix -= lengthcount;
+
+ i++;
+
+ if (delta == 0) delta = 1;
+
+ if (i % delta == 0)
+
+ {
+
+ alpha -= alpha / alphadec;
+ radius -= radius / radiusdec;
+ rad = radius >> radiusbiasshift;
+
+ if (rad <= 1) rad = 0;
+
+ for (j = 0; j < rad; j++) radpower[j] = alpha * (((rad * rad - j * j) * radbias) / (rad * rad));
+
+ }
+
+ }
+
+ }
+
+ /*
+ ** Search for BGR values 0..255 (after net is unbiased) and return colour
+ * index
+ * ----------------------------------------------------------------------------
+ */
+
+ var map = exports.map = function map(b/*int*/, g/*int*/, r/*int*/)/*int*/
+
+ {
+
+ var i/*int*/;
+ var j/*int*/;
+ var dist/*int*/
+ var a/*int*/;
+ var bestd/*int*/;
+ var p/*Array*/;
+ var best/*int*/;
+
+ bestd = 1000; /* biggest possible dist is 256*3 */
+ best = -1;
+ i = netindex[g]; /* index on g */
+ j = i - 1; /* start at netindex[g] and work outwards */
+
+ while ((i < netsize) || (j >= 0))
+
+ {
+
+ if (i < netsize)
+
+ {
+
+ p = network[i];
+
+ dist = p[1] - g; /* inx key */
+
+ if (dist >= bestd) i = netsize; /* stop iter */
+
+ else
+
+ {
+
+ i++;
+
+ if (dist < 0) dist = -dist;
+
+ a = p[0] - b;
+
+ if (a < 0) a = -a;
+
+ dist += a;
+
+ if (dist < bestd)
+
+ {
+
+ a = p[2] - r;
+
+ if (a < 0) a = -a;
+
+ dist += a;
+
+ if (dist < bestd)
+
+ {
+
+ bestd = dist;
+ best = p[3];
+
+ }
+
+ }
+
+ }
+
+ }
+
+ if (j >= 0)
+ {
+
+ p = network[j];
+
+ dist = g - p[1]; /* inx key - reverse dif */
+
+ if (dist >= bestd) j = -1; /* stop iter */
+
+ else
+ {
+
+ j--;
+ if (dist < 0) dist = -dist;
+ a = p[0] - b;
+ if (a < 0) a = -a;
+ dist += a;
+
+ if (dist < bestd)
+
+ {
+
+ a = p[2] - r;
+ if (a < 0)a = -a;
+ dist += a;
+ if (dist < bestd)
+ {
+ bestd = dist;
+ best = p[3];
+ }
+
+ }
+
+ }
+
+ }
+
+ }
+
+ return (best);
+
+ }
+
+ var process = exports.process = function process()/*ByteArray*/
+ {
+
+ learn();
+ unbiasnet();
+ inxbuild();
+ return colorMap();
+
+ }
+
+ /*
+ * Unbias network to give byte values 0..255 and record position i to prepare
+ * for sort
+ * -----------------------------------------------------------------------------------
+ */
+
+ var unbiasnet = function unbiasnet()/*void*/
+
+ {
+
+ var i/*int*/;
+ var j/*int*/;
+
+ for (i = 0; i < netsize; i++)
+ {
+ network[i][0] >>= netbiasshift;
+ network[i][1] >>= netbiasshift;
+ network[i][2] >>= netbiasshift;
+ network[i][3] = i; /* record colour no */
+ }
+
+ }
+
+ /*
+ * Move adjacent neurons by precomputed alpha*(1-((i-j)^2/[r]^2)) in
+ * radpower[|i-j|]
+ * ---------------------------------------------------------------------------------
+ */
+
+ var alterneigh = function alterneigh(rad/*int*/, i/*int*/, b/*int*/, g/*int*/, r/*int*/)/*void*/
+
+ {
+
+ var j/*int*/;
+ var k/*int*/;
+ var lo/*int*/;
+ var hi/*int*/;
+ var a/*int*/;
+ var m/*int*/;
+
+ var p/*Array*/;
+
+ lo = i - rad;
+ if (lo < -1) lo = -1;
+
+ hi = i + rad;
+
+ if (hi > netsize) hi = netsize;
+
+ j = i + 1;
+ k = i - 1;
+ m = 1;
+
+ while ((j < hi) || (k > lo))
+
+ {
+
+ a = radpower[m++];
+
+ if (j < hi)
+
+ {
+
+ p = network[j++];
+
+ try {
+
+ p[0] -= (a * (p[0] - b)) / alpharadbias;
+ p[1] -= (a * (p[1] - g)) / alpharadbias;
+ p[2] -= (a * (p[2] - r)) / alpharadbias;
+
+ } catch (e/*Error*/) {} // prevents 1.3 miscompilation
+
+ }
+
+ if (k > lo)
+
+ {
+
+ p = network[k--];
+
+ try
+ {
+
+ p[0] -= (a * (p[0] - b)) / alpharadbias;
+ p[1] -= (a * (p[1] - g)) / alpharadbias;
+ p[2] -= (a * (p[2] - r)) / alpharadbias;
+
+ } catch (e/*Error*/) {}
+
+ }
+
+ }
+
+ }
+
+ /*
+ * Move neuron i towards biased (b,g,r) by factor alpha
+ * ----------------------------------------------------
+ */
+
+ var altersingle = function altersingle(alpha/*int*/, i/*int*/, b/*int*/, g/*int*/, r/*int*/)/*void*/
+ {
+
+ /* alter hit neuron */
+ var n/*Array*/ = network[i];
+ n[0] -= (alpha * (n[0] - b)) / initalpha;
+ n[1] -= (alpha * (n[1] - g)) / initalpha;
+ n[2] -= (alpha * (n[2] - r)) / initalpha;
+
+ }
+
+ /*
+ * Search for biased BGR values ----------------------------
+ */
+
+ var contest = function contest(b/*int*/, g/*int*/, r/*int*/)/*int*/
+ {
+
+ /* finds closest neuron (min dist) and updates freq */
+ /* finds best neuron (min dist-bias) and returns position */
+ /* for frequently chosen neurons, freq[i] is high and bias[i] is negative */
+ /* bias[i] = gamma*((1/netsize)-freq[i]) */
+
+ var i/*int*/;
+ var dist/*int*/;
+ var a/*int*/;
+ var biasdist/*int*/;
+ var betafreq/*int*/;
+ var bestpos/*int*/;
+ var bestbiaspos/*int*/;
+ var bestd/*int*/;
+ var bestbiasd/*int*/;
+ var n/*Array*/;
+
+ bestd = ~(1 << 31);
+ bestbiasd = bestd;
+ bestpos = -1;
+ bestbiaspos = bestpos;
+
+ for (i = 0; i < netsize; i++)
+
+ {
+
+ n = network[i];
+ dist = n[0] - b;
+
+ if (dist < 0) dist = -dist;
+
+ a = n[1] - g;
+
+ if (a < 0) a = -a;
+
+ dist += a;
+
+ a = n[2] - r;
+
+ if (a < 0) a = -a;
+
+ dist += a;
+
+ if (dist < bestd)
+
+ {
+
+ bestd = dist;
+ bestpos = i;
+
+ }
+
+ biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
+
+ if (biasdist < bestbiasd)
+
+ {
+
+ bestbiasd = biasdist;
+ bestbiaspos = i;
+
+ }
+
+ betafreq = (freq[i] >> betashift);
+ freq[i] -= betafreq;
+ bias[i] += (betafreq << gammashift);
+
+ }
+
+ freq[bestpos] += beta;
+ bias[bestpos] -= betagamma;
+ return (bestbiaspos);
+
+ }
+
+ NeuQuant.apply(this, arguments);
+ return exports;
+ }
+;/**
+* This class handles LZW encoding
+* Adapted from Jef Poskanzer's Java port by way of J. M. G. Elliott.
+* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
+* @author Thibault Imbert (AS3 version - bytearray.org)
+* @version 0.1 AS3 implementation
+*/
+
+ //import flash.utils.ByteArray;
+
+ LZWEncoder = function()
+ {
+ var exports = {};
+ /*private_static*/ var EOF/*int*/ = -1;
+ /*private*/ var imgW/*int*/;
+ /*private*/ var imgH/*int*/
+ /*private*/ var pixAry/*ByteArray*/;
+ /*private*/ var initCodeSize/*int*/;
+ /*private*/ var remaining/*int*/;
+ /*private*/ var curPixel/*int*/;
+
+ // GIFCOMPR.C - GIF Image compression routines
+ // Lempel-Ziv compression based on 'compress'. GIF modifications by
+ // David Rowley (mgardi@watdcsu.waterloo.edu)
+ // General DEFINEs
+
+ /*private_static*/ var BITS/*int*/ = 12;
+ /*private_static*/ var HSIZE/*int*/ = 5003; // 80% occupancy
+
+ // GIF Image compression - modified 'compress'
+ // Based on: compress.c - File compression ala IEEE Computer, June 1984.
+ // By Authors: Spencer W. Thomas (decvax!harpo!utah-cs!utah-gr!thomas)
+ // Jim McKie (decvax!mcvax!jim)
+ // Steve Davies (decvax!vax135!petsd!peora!srd)
+ // Ken Turkowski (decvax!decwrl!turtlevax!ken)
+ // James A. Woods (decvax!ihnp4!ames!jaw)
+ // Joe Orost (decvax!vax135!petsd!joe)
+
+ /*private*/ var n_bits/*int*/ // number of bits/code
+ /*private*/ var maxbits/*int*/ = BITS; // user settable max # bits/code
+ /*private*/ var maxcode/*int*/ // maximum code, given n_bits
+ /*private*/ var maxmaxcode/*int*/ = 1 << BITS; // should NEVER generate this code
+ /*private*/ var htab/*Array*/ = new Array;
+ /*private*/ var codetab/*Array*/ = new Array;
+ /*private*/ var hsize/*int*/ = HSIZE; // for dynamic table sizing
+ /*private*/ var free_ent/*int*/ = 0; // first unused entry
+
+ // block compression parameters -- after all codes are used up,
+ // and compression rate changes, start over.
+
+ /*private*/ var clear_flg/*Boolean*/ = false;
+
+ // Algorithm: use open addressing double hashing (no chaining) on the
+ // prefix code / next character combination. We do a variant of Knuth's
+ // algorithm D (vol. 3, sec. 6.4) along with G. Knott's relatively-prime
+ // secondary probe. Here, the modular division first probe is gives way
+ // to a faster exclusive-or manipulation. Also do block compression with
+ // an adaptive reset, whereby the code table is cleared when the compression
+ // ratio decreases, but after the table fills. The variable-length output
+ // codes are re-sized at this point, and a special CLEAR code is generated
+ // for the decompressor. Late addition: construct the table according to
+ // file size for noticeable speed improvement on small files. Please direct
+ // questions about this implementation to ames!jaw.
+
+ /*private*/ var g_init_bits/*int*/;
+ /*private*/ var ClearCode/*int*/;
+ /*private*/ var EOFCode/*int*/;
+
+ // output
+ // Output the given code.
+ // Inputs:
+ // code: A n_bits-bit integer. If == -1, then EOF. This assumes
+ // that n_bits =< wordsize - 1.
+ // Outputs:
+ // Outputs code to the file.
+ // Assumptions:
+ // Chars are 8 bits long.
+ // Algorithm:
+ // Maintain a BITS character long buffer (so that 8 codes will
+ // fit in it exactly). Use the VAX insv instruction to insert each
+ // code in turn. When the buffer fills up empty it and start over.
+
+ /*private*/ var cur_accum/*int*/ = 0;
+ /*private*/ var cur_bits/*int*/ = 0;
+ /*private*/ var masks/*Array*/ = [ 0x0000, 0x0001, 0x0003, 0x0007, 0x000F, 0x001F, 0x003F, 0x007F, 0x00FF, 0x01FF, 0x03FF, 0x07FF, 0x0FFF, 0x1FFF, 0x3FFF, 0x7FFF, 0xFFFF ];
+
+ // Number of characters so far in this 'packet'
+ /*private*/ var a_count/*int*/;
+
+ // Define the storage for the packet accumulator
+ /*private*/ var accum/*ByteArray*/ = [];
+
+ var LZWEncoder = exports.LZWEncoder = function LZWEncoder (width/*int*/, height/*int*/, pixels/*ByteArray*/, color_depth/*int*/)
+ {
+
+ imgW = width;
+ imgH = height;
+ pixAry = pixels;
+ initCodeSize = Math.max(2, color_depth);
+
+ }
+
+ // Add a character to the end of the current packet, and if it is 254
+ // characters, flush the packet to disk.
+ var char_out = function char_out(c/*Number*/, outs/*ByteArray*/)/*void*/
+ {
+ accum[a_count++] = c;
+ if (a_count >= 254) flush_char(outs);
+
+ }
+
+ // Clear out the hash table
+ // table clear for block compress
+
+ var cl_block = function cl_block(outs/*ByteArray*/)/*void*/
+ {
+
+ cl_hash(hsize);
+ free_ent = ClearCode + 2;
+ clear_flg = true;
+ output(ClearCode, outs);
+
+ }
+
+ // reset code table
+ var cl_hash = function cl_hash(hsize/*int*/)/*void*/
+ {
+
+ for (var i/*int*/ = 0; i < hsize; ++i) htab[i] = -1;
+
+ }
+
+ var compress = exports.compress = function compress(init_bits/*int*/, outs/*ByteArray*/)/*void*/
+
+ {
+ var fcode/*int*/;
+ var i/*int*/ /* = 0 */;
+ var c/*int*/;
+ var ent/*int*/;
+ var disp/*int*/;
+ var hsize_reg/*int*/;
+ var hshift/*int*/;
+
+ // Set up the globals: g_init_bits - initial number of bits
+ g_init_bits = init_bits;
+
+ // Set up the necessary values
+ clear_flg = false;
+ n_bits = g_init_bits;
+ maxcode = MAXCODE(n_bits);
+
+ ClearCode = 1 << (init_bits - 1);
+ EOFCode = ClearCode + 1;
+ free_ent = ClearCode + 2;
+
+ a_count = 0; // clear packet
+
+ ent = nextPixel();
+
+ hshift = 0;
+ for (fcode = hsize; fcode < 65536; fcode *= 2)
+ ++hshift;
+ hshift = 8 - hshift; // set hash code range bound
+
+ hsize_reg = hsize;
+ cl_hash(hsize_reg); // clear hash table
+
+ output(ClearCode, outs);
+
+ outer_loop: while ((c = nextPixel()) != EOF)
+
+ {
+
+ fcode = (c << maxbits) + ent;
+ i = (c << hshift) ^ ent; // xor hashing
+
+ if (htab[i] == fcode)
+ {
+ ent = codetab[i];
+ continue;
+ } else if (htab[i] >= 0) // non-empty slot
+ {
+ disp = hsize_reg - i; // secondary hash (after G. Knott)
+ if (i == 0)
+ disp = 1;
+ do
+ {
+
+ if ((i -= disp) < 0) i += hsize_reg;
+
+ if (htab[i] == fcode)
+ {
+ ent = codetab[i];
+ continue outer_loop;
+ }
+ } while (htab[i] >= 0);
+ }
+
+ output(ent, outs);
+ ent = c;
+ if (free_ent < maxmaxcode)
+ {
+ codetab[i] = free_ent++; // code -> hashtable
+ htab[i] = fcode;
+ } else cl_block(outs);
+ }
+
+ // Put out the final code.
+ output(ent, outs);
+ output(EOFCode, outs);
+
+ }
+
+ // ----------------------------------------------------------------------------
+ var encode = exports.encode = function encode(os/*ByteArray*/)/*void*/
+ {
+ os.writeByte(initCodeSize); // write "initial code size" byte
+ remaining = imgW * imgH; // reset navigation variables
+ curPixel = 0;
+ compress(initCodeSize + 1, os); // compress and write the pixel data
+ os.writeByte(0); // write block terminator
+
+ }
+
+ // Flush the packet to disk, and reset the accumulator
+ var flush_char = function flush_char(outs/*ByteArray*/)/*void*/
+ {
+
+ if (a_count > 0)
+ {
+ outs.writeByte(a_count);
+ outs.writeBytes(accum, 0, a_count);
+ a_count = 0;
+ }
+
+ }
+
+ var MAXCODE = function MAXCODE(n_bits/*int*/)/*int*/
+ {
+
+ return (1 << n_bits) - 1;
+
+ }
+
+ // ----------------------------------------------------------------------------
+ // Return the next pixel from the image
+ // ----------------------------------------------------------------------------
+
+ var nextPixel = function nextPixel()/*int*/
+ {
+
+ if (remaining == 0) return EOF;
+
+ --remaining;
+
+ var pix/*Number*/ = pixAry[curPixel++];
+
+ return pix & 0xff;
+
+ }
+
+ var output = function output(code/*int*/, outs/*ByteArray*/)/*void*/
+
+ {
+ cur_accum &= masks[cur_bits];
+
+ if (cur_bits > 0) cur_accum |= (code << cur_bits);
+ else cur_accum = code;
+
+ cur_bits += n_bits;
+
+ while (cur_bits >= 8)
+
+ {
+
+ char_out((cur_accum & 0xff), outs);
+ cur_accum >>= 8;
+ cur_bits -= 8;
+
+ }
+
+ // If the next entry is going to be too big for the code size,
+ // then increase it, if possible.
+
+ if (free_ent > maxcode || clear_flg)
+ {
+
+ if (clear_flg)
+ {
+
+ maxcode = MAXCODE(n_bits = g_init_bits);
+ clear_flg = false;
+
+ } else
+ {
+
+ ++n_bits;
+
+ if (n_bits == maxbits) maxcode = maxmaxcode;
+
+ else maxcode = MAXCODE(n_bits);
+
+ }
+
+ }
+
+ if (code == EOFCode)
+ {
+
+ // At EOF, write the rest of the buffer.
+ while (cur_bits > 0)
+ {
+
+ char_out((cur_accum & 0xff), outs);
+ cur_accum >>= 8;
+ cur_bits -= 8;
+ }
+
+
+ flush_char(outs);
+
+ }
+
+ }
+ LZWEncoder.apply(this, arguments);
+ return exports;
+ }
+
+;// TODO(grosbouddha): put under pskl namespace.
+var Constants = {
+ DEFAULT_SIZE : {
+ height : 32,
+ width : 32
+ },
+
+ MAX_HEIGHT : 128,
+ MAX_WIDTH : 128,
+
+ DEFAULT_PEN_COLOR : '#000000',
+ TRANSPARENT_COLOR : 'TRANSPARENT',
+
+ /*
+ * Fake semi-transparent color used to highlight transparent
+ * strokes and rectangles:
+ */
+ SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
+
+ /*
+ * When a tool is hovering the drawing canvas, we highlight the eventual
+ * pixel target with this color:
+ */
+ TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)',
+
+ /*
+ * Default entry point for piskel web service:
+ */
+ PISKEL_SERVICE_URL: 'http://3.piskel-app.appspot.com',
+
+ GRID_STROKE_WIDTH: 1,
+ GRID_STROKE_COLOR: "lightgray",
+
+ LEFT_BUTTON : "left_button_1",
+ RIGHT_BUTTON : "right_button_2"
+};;// TODO(grosbouddha): put under pskl namespace.
+Events = {
+
+ TOOL_SELECTED : "TOOL_SELECTED",
+ TOOL_RELEASED : "TOOL_RELEASED",
+ PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED",
+ PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED",
+ SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED",
+ SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED",
+
+ /**
+ * When this event is emitted, a request is sent to the localstorage
+ * Service to save the current framesheet. The storage service
+ * may not immediately store data (internal throttling of requests).
+ */
+ LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
+
+ CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
+
+ /**
+ * Event to request a refresh of the display.
+ * A bit overkill but, it's just workaround in our current drawing system.
+ * TODO: Remove or rework when redraw system is refactored.
+ */
+ REFRESH: "REFRESH",
+
+ /**
+ * Temporary event to bind the redraw of right preview film to the canvas.
+ * This redraw should be driven by model updates.
+ * TODO(vincz): Remove.
+ */
+ REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
+
+ /**
+ * Fired each time a user setting change.
+ * The payload will be:
+ * 1st argument: Name of the settings
+ * 2nd argument: New value
+ */
+ USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED",
+
+ /**
+ * The framesheet was reseted and is now probably drastically different.
+ * Number of frames, content of frames, color used for the palette may have changed.
+ */
+ FRAMESHEET_RESET: "FRAMESHEET_RESET",
+
+ FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
+
+ CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
+
+ SELECTION_CREATED: "SELECTION_CREATED",
+ SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
+ SELECTION_DISMISSED: "SELECTION_DISMISSED",
+
+ SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
+ HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
+
+ UNDO: "UNDO",
+ REDO: "REDO",
+ CUT: "CUT",
+ COPY: "COPY",
+ PASTE: "PASTE"
+};;jQuery.namespace = function() {
+ var a=arguments, o=null, i, j, d;
+ for (i=0; i 255 || g > 255 || b > 255)
+ throw "Invalid color component";
+ return ((r << 16) | (g << 8) | b).toString(16);
+ };
+
+ ns.inherit = function(extendedObject, inheritFrom) {
+ extendedObject.prototype = Object.create(inheritFrom.prototype);
+ extendedObject.prototype.constructor = extendedObject;
+ extendedObject.prototype.superclass = inheritFrom.prototype;
+ };
+
+})();
+
+;(function () {
+ var ns = $.namespace("pskl");
+
+ ns.PixelUtils = {
+
+ getRectanglePixels : function (x0, y0, x1, y1) {
+ var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
+ var pixels = [];
+
+ for(var x = rectangle.x0; x <= rectangle.x1; x++) {
+ for(var y = rectangle.y0; y <= rectangle.y1; y++) {
+ pixels.push({"col": x, "row": y});
+ }
+ }
+
+ return pixels;
+ },
+
+ getBoundRectanglePixels : function (x0, y0, x1, y1) {
+ var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
+ var pixels = [];
+ // Creating horizontal sides of the rectangle:
+ for(var x = rectangle.x0; x <= rectangle.x1; x++) {
+ pixels.push({"col": x, "row": rectangle.y0});
+ pixels.push({"col": x, "row": rectangle.y1});
+ }
+
+ // Creating vertical sides of the rectangle:
+ for(var y = rectangle.y0; y <= rectangle.y1; y++) {
+ pixels.push({"col": rectangle.x0, "row": y});
+ pixels.push({"col": rectangle.x1, "row": y});
+ }
+
+ return pixels;
+ },
+
+ /**
+ * Return an object of ordered rectangle coordinate.
+ * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner
+ * @private
+ */
+ getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
+ return {
+ x0 : Math.min(x0, x1), y0 : Math.min(y0, y1),
+ x1 : Math.max(x0, x1), y1 : Math.max(y0, y1),
+ };
+ },
+
+ /**
+ * Return the list of pixels that would have been filled by a paintbucket tool applied
+ * on pixel at coordinate (x,y).
+ * This function is not altering the Frame object argument.
+ *
+ * @param frame pskl.model.Frame The frame target in which we want to paintbucket
+ * @param col number Column coordinate in the frame
+ * @param row number Row coordinate in the frame
+ *
+ * @return an array of the pixel coordinates paint with the replacement color
+ */
+ getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
+ // To get the list of connected (eg the same color) pixels, we will use the paintbucket algorithm
+ // in a fake cloned frame. The returned pixels by the paintbucket algo are the painted pixels
+ // and are as well connected.
+ var fakeFrame = frame.clone(); // We just want to
+ var fakeFillColor = "sdfsdfsdf"; // A fake color that will never match a real color.
+ var paintedPixels = this.paintSimilarConnectedPixelsFromFrame(fakeFrame, col, row, fakeFillColor);
+
+ return paintedPixels;
+ },
+
+ /**
+ * Apply the paintbucket tool in a frame at the (col, row) initial position
+ * with the replacement color.
+ *
+ * @param frame pskl.model.Frame The frame target in which we want to paintbucket
+ * @param col number Column coordinate in the frame
+ * @param row number Row coordinate in the frame
+ * @param replacementColor string Hexadecimal color used to fill the area
+ *
+ * @return an array of the pixel coordinates paint with the replacement color
+ */
+ paintSimilarConnectedPixelsFromFrame: function(frame, col, row, replacementColor) {
+ /**
+ * Queue linear Flood-fill (node, target-color, replacement-color):
+ * 1. Set Q to the empty queue.
+ * 2. If the color of node is not equal to target-color, return.
+ * 3. Add node to Q.
+ * 4. For each element n of Q:
+ * 5. If the color of n is equal to target-color:
+ * 6. Set w and e equal to n.
+ * 7. Move w to the west until the color of the node to the west of w no longer matches target-color.
+ * 8. Move e to the east until the color of the node to the east of e no longer matches target-color.
+ * 9. Set the color of nodes between w and e to replacement-color.
+ * 10. For each node n between w and e:
+ * 11. If the color of the node to the north of n is target-color, add that node to Q.
+ * 12. If the color of the node to the south of n is target-color, add that node to Q.
+ * 13. Continue looping until Q is exhausted.
+ * 14. Return.
+ */
+ var paintedPixels = [];
+ var queue = [];
+ var dy = [-1, 0, 1, 0];
+ var dx = [0, 1, 0, -1];
+ var targetColor;
+ try {
+ targetColor = frame.getPixel(col, row);
+ } catch(e) {
+ // Frame out of bound exception.
+ }
+
+ if(targetColor == replacementColor) {
+ return;
+ }
+
+
+ queue.push({"col": col, "row": row});
+ var loopCount = 0;
+ var cellCount = frame.getWidth() * frame.getHeight();
+ while(queue.length > 0) {
+ loopCount ++;
+
+ var currentItem = queue.pop();
+ frame.setPixel(currentItem.col, currentItem.row, replacementColor);
+ paintedPixels.push({"col": currentItem.col, "row": currentItem.row });
+
+ for (var i = 0; i < 4; i++) {
+ var nextCol = currentItem.col + dx[i];
+ var nextRow = currentItem.row + dy[i];
+ try {
+ if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
+ queue.push({"col": nextCol, "row": nextRow });
+ }
+ } catch(e) {
+ // Frame out of bound exception.
+ }
+ }
+
+ // Security loop breaker:
+ if(loopCount > 10 * cellCount) {
+ console.log("loop breaker called");
+ break;
+ }
+ }
+ return paintedPixels;
+ },
+
+ /**
+ * Calculate and return the maximal DPI to display a picture in a given container.
+ *
+ * @param container jQueryObject Container where the picture should be displayed
+ * @param number pictureHeight height in pixels of the picture to display
+ * @param number pictureWidth width in pixels of the picture to display
+ * @return number maximal dpi
+ */
+ calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
+ return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
+ },
+
+ /**
+ * Calculate and return the maximal DPI to display a picture for a given height and width.
+ *
+ * @param height number Height available to display the picture
+ * @param width number Width available to display the picture
+ * @param number pictureHeight height in pixels of the picture to display
+ * @param number pictureWidth width in pixels of the picture to display
+ * @return number maximal dpi
+ */
+ calculateDPI : function (height, width, pictureHeight, pictureWidth) {
+ var heightBoundDpi = Math.floor(height / pictureHeight),
+ widthBoundDpi = Math.floor(width / pictureWidth);
+
+ return Math.min(heightBoundDpi, widthBoundDpi);
+ },
+ };
+})();;(function () {
+ var ns = $.namespace("pskl");
+
+ ns.CanvasUtils = {
+ createCanvas : function (width, height, classList) {
+ var canvas = document.createElement("canvas");
+ canvas.setAttribute("width", width);
+ canvas.setAttribute("height", height);
+
+ if (typeof classList == "string") {
+ classList = [classList];
+ }
+ if (Array.isArray(classList)) {
+ for (var i = 0 ; i < classList.length ; i++) {
+ canvas.classList.add(classList[i]);
+ }
+ }
+
+ return canvas;
+ }
+ };
+})();;(function () {
+ var ns = $.namespace("pskl");
+
+ ns.UserSettings = {
+
+ SHOW_GRID : 'SHOW_GRID',
+ CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
+
+ KEY_TO_DEFAULT_VALUE_MAP_ : {
+ 'SHOW_GRID' : false,
+ 'CANVAS_BACKGROUND' : 'medium-canvas-background'
+ },
+
+ /**
+ * @private
+ */
+ cache_ : {},
+
+ /**
+ * Static method to access a user defined settings value ot its default
+ * value if not defined yet.
+ */
+ get : function (key) {
+ this.checkKeyValidity_(key);
+ if (!(key in this.cache_)) {
+ this.cache_[key] =
+ this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
+ }
+ return this.cache_[key];
+ },
+
+ set : function (key, value) {
+ this.checkKeyValidity_(key);
+ this.cache_[key] = value;
+ this.writeToLocalStorage_(key, value);
+
+ $.publish(Events.USER_SETTINGS_CHANGED, [key, value]);
+ },
+
+ /**
+ * @private
+ */
+ readFromLocalStorage_ : function(key) {
+ var value = window.localStorage[key];
+ if (typeof value != "undefined") {
+ value = JSON.parse(value);
+ }
+ return value;
+ },
+
+ /**
+ * @private
+ */
+ writeToLocalStorage_ : function(key, value) {
+ // TODO(grosbouddha): Catch storage exception here.
+ window.localStorage[key] = JSON.stringify(value);
+ },
+
+ /**
+ * @private
+ */
+ readFromDefaults_ : function (key) {
+ return this.KEY_TO_DEFAULT_VALUE_MAP_[key];
+ },
+
+ /**
+ * @private
+ */
+ checkKeyValidity_ : function(key) {
+ if(!(key in this.KEY_TO_DEFAULT_VALUE_MAP_)) {
+ // TODO(grosbouddha): Define error catching strategy and throw exception from here.
+ console.log("UserSettings key <"+ key +"> not find in supported keys.");
+ }
+ }
+ };
+})();;/**
+ * jscolor, JavaScript Color Picker
+ *
+ * @version 1.4.0
+ * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
+ * @author Jan Odvarko, http://odvarko.cz
+ * @created 2008-06-15
+ * @updated 2012-07-06
+ * @link http://jscolor.com
+ */
+
+
+var jscolor = {
+
+
+ dir : '', // location of jscolor directory (leave empty to autodetect)
+ bindClass : 'color', // class name
+ binding : true, // automatic binding via
+ preloading : true, // use image preloading?
+
+
+ install : function() {
+ jscolor.addEvent(window, 'load', jscolor.init);
+ },
+
+
+ init : function() {
+ if(jscolor.binding) {
+ jscolor.bind();
+ }
+ if(jscolor.preloading) {
+ jscolor.preload();
+ }
+ },
+
+
+ getDir : function() {
+ return "js/lib/jsColor_1_4_0/";
+ },
+
+
+ bind : function() {
+ var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i');
+ var e = document.getElementsByTagName('input');
+ for(var i=0; i vs[a] ?
+ (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
+ tp[a],
+ -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
+ (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
+ (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
+ ];
+ }
+ drawPicker(pp[a], pp[b]);
+ }
+ };
+
+
+ this.importColor = function() {
+ if(!valueElement) {
+ this.exportColor();
+ } else {
+ if(!this.adjust) {
+ if(!this.fromString(valueElement.value, leaveValue)) {
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+ styleElement.style.color = styleElement.jscStyle.color;
+ this.exportColor(leaveValue | leaveStyle);
+ }
+ } else if(!this.required && /^\s*$/.test(valueElement.value)) {
+ valueElement.value = '';
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+ styleElement.style.color = styleElement.jscStyle.color;
+ this.exportColor(leaveValue | leaveStyle);
+
+ } else if(this.fromString(valueElement.value)) {
+ // OK
+ } else {
+ this.exportColor();
+ }
+ }
+ };
+
+
+ this.exportColor = function(flags) {
+ if(!(flags & leaveValue) && valueElement) {
+ var value = this.toString();
+ if(this.caps) { value = value.toUpperCase(); }
+ if(this.hash) { value = '#'+value; }
+ valueElement.value = value;
+ }
+ if(!(flags & leaveStyle) && styleElement) {
+ styleElement.style.backgroundImage = "none";
+ styleElement.style.backgroundColor =
+ '#'+this.toString();
+ styleElement.style.color =
+ 0.213 * this.rgb[0] +
+ 0.715 * this.rgb[1] +
+ 0.072 * this.rgb[2]
+ < 0.5 ? '#FFF' : '#000';
+ }
+ if(!(flags & leavePad) && isPickerOwner()) {
+ redrawPad();
+ }
+ if(!(flags & leaveSld) && isPickerOwner()) {
+ redrawSld();
+ }
+ };
+
+
+ this.fromHSV = function(h, s, v, flags) { // null = don't change
+ if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
+ if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
+ if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
+
+ this.rgb = HSV_RGB(
+ h===null ? this.hsv[0] : (this.hsv[0]=h),
+ s===null ? this.hsv[1] : (this.hsv[1]=s),
+ v===null ? this.hsv[2] : (this.hsv[2]=v)
+ );
+
+ this.exportColor(flags);
+ };
+
+
+ this.fromRGB = function(r, g, b, flags) { // null = don't change
+ if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
+ if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
+ if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
+
+ var hsv = RGB_HSV(
+ r===null ? this.rgb[0] : r,
+ g===null ? this.rgb[1] : g,
+ b===null ? this.rgb[2] : b
+ );
+ if(hsv[0] !== null) {
+ this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
+ }
+ if(hsv[2] !== 0) {
+ this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
+ }
+ this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
+
+ // update RGB according to final HSV, as some values might be trimmed
+ var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
+ this.rgb[0] = rgb[0];
+ this.rgb[1] = rgb[1];
+ this.rgb[2] = rgb[2];
+
+ this.exportColor(flags);
+ };
+
+
+ this.fromString = function(hex, flags) {
+ var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
+ if(!m) {
+ return false;
+ } else {
+ if(m[1].length === 6) { // 6-char notation
+ this.fromRGB(
+ parseInt(m[1].substr(0,2),16) / 255,
+ parseInt(m[1].substr(2,2),16) / 255,
+ parseInt(m[1].substr(4,2),16) / 255,
+ flags
+ );
+ } else { // 3-char notation
+ this.fromRGB(
+ parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
+ parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
+ parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
+ flags
+ );
+ }
+ return true;
+ }
+ };
+
+
+ this.toString = function() {
+ return (
+ (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
+ (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
+ (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
+ );
+ };
+
+
+ function RGB_HSV(r, g, b) {
+ var n = Math.min(Math.min(r,g),b);
+ var v = Math.max(Math.max(r,g),b);
+ var m = v - n;
+ if(m === 0) { return [ null, 0, v ]; }
+ var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
+ return [ h===6?0:h, m/v, v ];
+ }
+
+
+ function HSV_RGB(h, s, v) {
+ if(h === null) { return [ v, v, v ]; }
+ var i = Math.floor(h);
+ var f = i%2 ? h-i : 1-(h-i);
+ var m = v * (1 - s);
+ var n = v * (1 - s*f);
+ switch(i) {
+ case 6:
+ case 0: return [v,n,m];
+ case 1: return [n,v,m];
+ case 2: return [m,v,n];
+ case 3: return [m,n,v];
+ case 4: return [n,m,v];
+ case 5: return [v,m,n];
+ }
+ }
+
+
+ function removePicker() {
+ delete jscolor.picker.owner;
+ document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
+ }
+
+
+ function drawPicker(x, y) {
+ if(!jscolor.picker) {
+ jscolor.picker = {
+ box : document.createElement('div'),
+ boxB : document.createElement('div'),
+ pad : document.createElement('div'),
+ padB : document.createElement('div'),
+ padM : document.createElement('div'),
+ sld : document.createElement('div'),
+ sldB : document.createElement('div'),
+ sldM : document.createElement('div'),
+ btn : document.createElement('div'),
+ btnS : document.createElement('span'),
+ btnT : document.createTextNode(THIS.pickerCloseText)
+ };
+ for(var i=0,segSize=4; i= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
+ };
+
+ ns.Frame.prototype.saveState = function () {
+ // remove all states past current state
+ this.previousStates.length = this.stateIndex + 1;
+ // push new state
+ this.previousStates.push(this.getPixels());
+ // set the stateIndex to latest saved state
+ this.stateIndex = this.previousStates.length - 1;
+ };
+
+ ns.Frame.prototype.loadPreviousState = function () {
+ if (this.stateIndex > 0) {
+ this.stateIndex--;
+ this.setPixels(this.previousStates[this.stateIndex]);
+ }
+ };
+
+ ns.Frame.prototype.loadNextState = function () {
+ if (this.stateIndex < this.previousStates.length - 1) {
+ this.stateIndex++;
+ this.setPixels(this.previousStates[this.stateIndex]);
+ }
+ };
+
+ ns.Frame.prototype.isSameSize = function (otherFrame) {
+ return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.model");
+ ns.FrameSheet = function (height, width) {
+ this.width = width;
+ this.height = height;
+ this.frames = [];
+ this.currentFrameIndex = 0;
+ };
+
+ ns.FrameSheet.prototype.getHeight = function () {
+ return this.height;
+ };
+
+ ns.FrameSheet.prototype.getWidth = function () {
+ return this.width;
+ };
+
+ ns.FrameSheet.prototype.addEmptyFrame = function () {
+ this.addFrame(ns.Frame.createEmpty(this.width, this.height));
+ };
+
+ ns.FrameSheet.prototype.addFrame = function (frame) {
+ this.frames.push(frame);
+ };
+
+ ns.FrameSheet.prototype.getFrameCount = function () {
+ return this.frames.length;
+ };
+
+ ns.FrameSheet.prototype.getCurrentFrame = function () {
+ return this.frames[this.currentFrameIndex];
+ };
+
+ ns.FrameSheet.prototype.setCurrentFrameIndex = function (index) {
+ this.currentFrameIndex = index;
+ $.publish(Events.CURRENT_FRAME_SET, [this.getCurrentFrame()]);
+ $.publish(Events.FRAMESHEET_RESET); // Is it no to overkill to have this here ?
+ };
+
+ ns.FrameSheet.prototype.getUsedColors = function() {
+ var colors = {};
+ for (var frameIndex=0; frameIndex < this.frames.length; frameIndex++) {
+ var frame = this.frames[frameIndex];
+ for (var i = 0, width = frame.getWidth(); i < width ; i++) {
+ var line = frame[i];
+ for (var j = 0, height = frame.getHeight() ; j < height ; j++) {
+ var pixel = frame.getPixel(i, j);
+ colors[pixel] = pixel;
+ }
+ }
+ }
+ return colors;
+ };
+
+ // Could be used to pass around model using long GET param (good enough for simple models) and
+ // do some temporary locastorage
+ ns.FrameSheet.prototype.serialize = function() {
+ var serializedFrames = [];
+ for (var i = 0 ; i < this.frames.length ; i++) {
+ serializedFrames.push(this.frames[i].serialize());
+ }
+ return '[' + serializedFrames.join(",") + ']';
+ //return JSON.stringify(frames);
+ };
+
+ /**
+ * Load a framesheet from a model that might have been persisted in db / localstorage
+ * Overrides existing frames.
+ * @param {String} serialized
+ */
+ ns.FrameSheet.prototype.deserialize = function (serialized) {
+ try {
+ this.load(JSON.parse(serialized));
+ } catch (e) {
+ throw "Could not load serialized framesheet : " + e.message;
+ }
+ };
+
+
+ /**
+ * Load a framesheet from a model that might have been persisted in db / localstorage
+ * Overrides existing frames.
+ * @param {String} serialized
+ */
+ ns.FrameSheet.prototype.load = function (framesheet) {
+ this.frames = [];
+ for (var i = 0 ; i < framesheet.length ; i++) {
+ var frameCfg = framesheet[i];
+ this.addFrame(new ns.Frame(frameCfg));
+ }
+
+ if (this.hasFrameAtIndex(0)) {
+ this.height = this.getFrameByIndex(0).getHeight();
+ this.width = this.getFrameByIndex(0).getWidth();
+ this.setCurrentFrameIndex(0);
+ $.publish(Events.FRAME_SIZE_CHANGED);
+ }
+
+ $.publish(Events.FRAMESHEET_RESET);
+ };
+
+
+ ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
+ return (index >= 0 && index < this.getFrameCount());
+ };
+
+ ns.FrameSheet.prototype.getFrameByIndex = function(index) {
+ if (isNaN(index)) {
+ throw "Bad argument value for getFrameByIndex method: <" + index + ">";
+ }
+
+ if (!this.hasFrameAtIndex(index)) {
+ throw "Out of bound index for frameSheet object.";
+ }
+
+ return this.frames[index];
+ };
+
+ ns.FrameSheet.prototype.removeFrameByIndex = function(index) {
+ if(!this.hasFrameAtIndex(index)) {
+ throw "Out of bound index for frameSheet object.";
+ }
+ this.frames.splice(index, 1);
+
+ // Current frame index might not be valid anymore
+ if (!this.hasFrameAtIndex(this.currentFrameIndex)) {
+ // if not select last frame available
+ this.setCurrentFrameIndex(this.getFrameCount() - 1);
+ }
+
+ $.publish(Events.FRAMESHEET_RESET);
+ };
+
+ ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) {
+ var frame = this.getFrameByIndex(index);
+ this.frames.splice(index + 1, 0, frame.clone());
+ };
+
+ ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
+ this.frames.splice(destinationIndex, 0, this.frames.splice(originIndex, 1)[0]);
+ };
+
+ ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
+ if(isNaN(indexFrame1) || isNaN(indexFrame1) ||
+ (!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) {
+ throw "Bad indexes for swapFrames Framesheet function.";
+ }
+ if(indexFrame1 == indexFrame2) {
+ return;
+ }
+ else {
+ var swapFrame = this.frames[indexFrame1];
+ this.frames[indexFrame1] = this.frames[indexFrame2];
+ this.frames[indexFrame2] = swapFrame;
+ }
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.selection");
+
+
+ ns.SelectionManager = function (framesheet, overlayFrame) {
+
+ this.framesheet = framesheet;
+ this.overlayFrame = overlayFrame;
+
+ this.currentSelection = null;
+
+ $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
+ $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
+ $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
+
+ $.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
+ $.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
+ $.subscribe(Events.CUT, $.proxy(this.onCut_, this));
+
+ $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
+ if(this.currentSelection) {
+ this.currentSelection.reset();
+ }
+ this.overlayFrame.clear();
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
+ var isSelectionTool = tool instanceof pskl.drawingtools.BaseSelect;
+ if(!isSelectionTool) {
+ this.cleanSelection_();
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.onSelectionDismissed_ = function(evt) {
+ this.cleanSelection_();
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.onCut_ = function(evt) {
+ if(this.currentSelection) {
+ // Put cut target into the selection:
+ this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
+
+ var pixels = this.currentSelection.pixels;
+ var currentFrame = this.framesheet.getCurrentFrame();
+ for(var i=0, l=pixels.length; i undefined.';
+ }
+
+ if(isNaN(renderingOptions.dpi)) {
+ throw 'Bad FrameRenderer initialization. not well defined.';
+ }
+
+ this.container = container;
+ this.dpi = renderingOptions.dpi;
+ this.className = className;
+ this.canvas = null;
+ this.supportGridRendering = renderingOptions.supportGridRendering;
+
+ this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
+
+ // Flag to know if the config was altered
+ this.canvasConfigDirty = true;
+ this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
+ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+ };
+
+ ns.FrameRenderer.prototype.init = function (frame) {
+ this.render(frame);
+ this.lastRenderedFrame = frame;
+ };
+
+ ns.FrameRenderer.prototype.updateDPI = function (newDPI) {
+ this.dpi = newDPI;
+ this.canvasConfigDirty = true;
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
+
+ if(settingName == pskl.UserSettings.SHOW_GRID) {
+ this.enableGrid(settingValue);
+ }
+ else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
+ this.updateBackgroundClass_(settingValue);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
+ var currentClass = this.container.data('current-background-class');
+ if (currentClass) {
+ this.container.removeClass(currentClass);
+ }
+ this.container.addClass(newClass);
+ this.container.data('current-background-class', newClass);
+ };
+
+ ns.FrameRenderer.prototype.enableGrid = function (flag) {
+ this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
+ this.canvasConfigDirty = true;
+ };
+
+ ns.FrameRenderer.prototype.render = function (frame) {
+ this.clear(frame);
+ var context = this.getCanvas_(frame).getContext('2d');
+ for(var col = 0, width = frame.getWidth(); col < width; col++) {
+ for(var row = 0, height = frame.getHeight(); row < height; row++) {
+ var color = frame.getPixel(col, row);
+ this.renderPixel_(color, col, row, context);
+ }
+ }
+ this.lastRenderedFrame = frame;
+ };
+
+ ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
+ if(color != Constants.TRANSPARENT_COLOR) {
+ context.fillStyle = color;
+ context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
+ }
+ };
+
+ ns.FrameRenderer.prototype.clear = function (frame) {
+ var canvas = this.getCanvas_(frame);
+ canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
+ };
+
+ /**
+ * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
+ * frame) into a sprite coordinate in column and row.
+ * @public
+ */
+ ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
+ var cellSize = this.dpi + this.gridStrokeWidth;
+ return {
+ "col" : (coords.x - coords.x % cellSize) / cellSize,
+ "row" : (coords.y - coords.y % cellSize) / cellSize
+ };
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.getFramePos_ = function(index) {
+ return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.drawGrid_ = function(canvas, width, height, col, row) {
+ var ctx = canvas.getContext("2d");
+ ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
+ ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
+ for(var c=1; c < col; c++) {
+ ctx.moveTo(this.getFramePos_(c), 0);
+ ctx.lineTo(this.getFramePos_(c), height);
+ ctx.stroke();
+ }
+
+ for(var r=1; r < row; r++) {
+ ctx.moveTo(0, this.getFramePos_(r));
+ ctx.lineTo(width, this.getFramePos_(r));
+ ctx.stroke();
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
+ if(this.canvasConfigDirty) {
+ $(this.canvas).remove();
+
+ var col = frame.getWidth(),
+ row = frame.getHeight();
+
+ var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
+ var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
+ var classes = ['canvas'];
+ if (this.className) {
+ classes.push(this.className);
+ }
+ var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, classes);
+
+ this.container.append(canvas);
+
+ if(this.gridStrokeWidth > 0) {
+ this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
+ }
+
+ this.canvas = canvas;
+ this.canvasConfigDirty = false;
+ }
+ return this.canvas;
+ };
+})();;(function () {
+
+ var ns = $.namespace("pskl.rendering");
+
+ ns.SpritesheetRenderer = function (framesheet) {
+ this.framesheet = framesheet;
+ };
+
+ ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
+ var canvas = this.createCanvas_();
+ for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
+ var frame = this.framesheet.getFrameByIndex(i);
+ this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
+ }
+ return canvas.toDataURL("image/png");
+ };
+
+ ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) {
+ var encoder = new GIFEncoder(), dpi = 10;
+ encoder.setRepeat(0);
+ encoder.setDelay(1000/fps);
+
+ encoder.start();
+ encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi);
+ for (var i = 0 ; i < this.framesheet.frames.length ; i++) {
+ var frame = this.framesheet.frames[i];
+ var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
+ encoder.addFrame(renderer.render());
+ }
+ encoder.finish();
+
+ var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
+ return imageData;
+ };
+
+
+ /**
+ * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
+ */
+ ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
+ var context = canvas.getContext('2d');
+ for(var col = 0, width = frame.getWidth(); col < width; col++) {
+ for(var row = 0, height = frame.getHeight(); row < height; row++) {
+ var color = frame.getPixel(col, row);
+ if(color != Constants.TRANSPARENT_COLOR) {
+ context.fillStyle = color;
+ context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
+ }
+ }
+ }
+ };
+
+ ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
+ var frameCount = this.framesheet.getFrameCount();
+ if (frameCount > 0){
+ var width = frameCount * this.framesheet.getWidth();
+ var height = this.framesheet.getHeight();
+ return pskl.CanvasUtils.createCanvas(width, height);
+ } else {
+ throw "Cannot render empty Spritesheet";
+ }
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+ ns.DrawingController = function (framesheet, container) {
+ /**
+ * @public
+ */
+ this.framesheet = framesheet;
+
+ /**
+ * @public
+ */
+ this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
+
+ /**
+ * @private
+ */
+ this.container = container;
+
+ // TODO(vincz): Store user prefs in a localstorage string ?
+ var renderingOptions = {
+ "dpi": this.calculateDPI_(),
+ "supportGridRendering" : true
+ };
+
+ this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
+ this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
+
+ this.renderer.init(framesheet.getCurrentFrame());
+ this.overlayRenderer.init(this.overlayFrame);
+
+ // State of drawing controller:
+ this.isClicked = false;
+ this.isRightClicked = false;
+ this.previousMousemoveTime = 0;
+ this.currentToolBehavior = null;
+ this.primaryColor = Constants.DEFAULT_PEN_COLOR;
+ this.secondaryColor = Constants.TRANSPARENT_COLOR;
+
+ this.initMouseBehavior();
+
+ $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
+ console.log("Tool selected: ", toolBehavior);
+ this.currentToolBehavior = toolBehavior;
+ }, this));
+
+ /**
+ * TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
+ * Find a better place to store that. Perhaps PaletteController?
+ */
+ $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
+ console.log("Primary color selected: ", color);
+ this.primaryColor = color;
+ $.publish(Events.PRIMARY_COLOR_UPDATED, [color]);
+ }, this));
+ $.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) {
+ console.log("Secondary color selected: ", color);
+ this.secondaryColor = color;
+ $.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
+ }, this));
+
+ $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
+
+ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+ $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
+
+ this.updateDPI_();
+ };
+
+ ns.DrawingController.prototype.initMouseBehavior = function() {
+ var body = $('body');
+ this.container.mousedown($.proxy(this.onMousedown_, this));
+ this.container.mousemove($.proxy(this.onMousemove_, this));
+ body.mouseup($.proxy(this.onMouseup_, this));
+
+ // Deactivate right click:
+ body.contextmenu(this.onCanvasContextMenu_);
+ };
+
+
+
+ ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
+ if (this.dpiUpdateTimer) {
+ window.clearInterval(this.dpiUpdateTimer);
+ }
+ this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
+ },
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
+ if(settingsName == pskl.UserSettings.SHOW_GRID) {
+ this.updateDPI_();
+ }
+ },
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onMousedown_ = function (event) {
+ this.isClicked = true;
+
+ if(event.button == 2) { // right click
+ this.isRightClicked = true;
+ $.publish(Events.CANVAS_RIGHT_CLICKED);
+ }
+
+ var coords = this.getSpriteCoordinates(event);
+
+ this.currentToolBehavior.applyToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.framesheet.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+
+ $.publish(Events.LOCALSTORAGE_REQUEST);
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onMousemove_ = function (event) {
+ var currentTime = new Date().getTime();
+ // Throttling of the mousemove event:
+ if ((currentTime - this.previousMousemoveTime) > 40 ) {
+ var coords = this.getSpriteCoordinates(event);
+ if (this.isClicked) {
+
+ this.currentToolBehavior.moveToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.framesheet.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+
+ // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
+ // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
+ // you don't need to draw anything when mousemoving and you request useless localStorage.
+ $.publish(Events.LOCALSTORAGE_REQUEST);
+ } else {
+
+ this.currentToolBehavior.moveUnactiveToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.framesheet.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+ }
+ this.previousMousemoveTime = currentTime;
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onMouseup_ = function (event) {
+ if(this.isClicked || this.isRightClicked) {
+ // A mouse button was clicked on the drawing canvas before this mouseup event,
+ // the user was probably drawing on the canvas.
+ // Note: The mousemove movement (and the mouseup) may end up outside
+ // of the drawing canvas.
+
+ this.isClicked = false;
+ this.isRightClicked = false;
+
+ var coords = this.getSpriteCoordinates(event);
+ //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
+ this.currentToolBehavior.releaseToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.framesheet.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+
+ $.publish(Events.TOOL_RELEASED);
+ }
+ },
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
+ var evtInfo = {};
+ if (event.button === 0) {
+ evtInfo.button = Constants.LEFT_BUTTON;
+ } else if (event.button == 2) {
+ evtInfo.button = Constants.RIGHT_BUTTON;
+ }
+ return evtInfo;
+ },
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
+ var canvasPageOffset = this.container.offset();
+ return {
+ x : clientX - canvasPageOffset.left,
+ y : clientY - canvasPageOffset.top
+ };
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
+ var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
+ return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.getCurrentColor_ = function () {
+ if(this.isRightClicked) {
+ return this.secondaryColor;
+ } else {
+ return this.primaryColor;
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
+ if ($(event.target).closest('#drawing-canvas-container').length) {
+ // Deactivate right click on drawing canvas only.
+ event.preventDefault();
+ event.stopPropagation();
+ event.cancelBubble = true;
+ return false;
+ }
+ };
+
+ ns.DrawingController.prototype.render = function () {
+ this.renderFrame();
+ this.renderOverlay();
+ };
+
+ ns.DrawingController.prototype.renderFrame = function () {
+ var frame = this.framesheet.getCurrentFrame();
+ var serializedFrame = frame.serialize();
+ if (this.serializedFrame != serializedFrame) {
+ if (!frame.isSameSize(this.overlayFrame)) {
+ this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
+ }
+ this.serializedFrame = serializedFrame;
+ this.renderer.render(frame);
+ }
+ };
+
+ ns.DrawingController.prototype.renderOverlay = function () {
+ var serializedOverlay = this.overlayFrame.serialize();
+ if (this.serializedOverlay != serializedOverlay) {
+ this.serializedOverlay = serializedOverlay;
+ this.overlayRenderer.render(this.overlayFrame);
+ }
+ };
+
+ ns.DrawingController.prototype.forceRendering_ = function () {
+ this.serializedFrame = this.serializedOverlay = null;
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.calculateDPI_ = function() {
+ var availableViewportHeight = $('#main-wrapper').height(),
+ leftSectionWidth = $('.left-column').outerWidth(true),
+ rightSectionWidth = $('.right-column').outerWidth(true),
+ availableViewportWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth,
+ framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+ framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+
+ if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
+ availableViewportWidth = availableViewportWidth - (framePixelWidth * Constants.GRID_STROKE_WIDTH);
+ availableViewportHeight = availableViewportHeight - (framePixelHeight * Constants.GRID_STROKE_WIDTH);
+ }
+
+ var dpi = pskl.PixelUtils.calculateDPI(
+ availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
+
+ return dpi;
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.updateDPI_ = function() {
+ var dpi = this.calculateDPI_();
+ this.renderer.updateDPI(dpi);
+ this.overlayRenderer.updateDPI(dpi);
+
+ var currentFrameHeight = this.framesheet.getCurrentFrame().getHeight();
+ var canvasHeight = currentFrameHeight * dpi;
+ if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
+ canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
+ }
+
+ var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
+ $('#column-wrapper').css({
+ 'top': verticalGapInPixel + 'px',
+ 'height': canvasHeight + 'px'
+ });
+
+ this.forceRendering_();
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+ ns.PreviewFilmController = function (framesheet, container, dpi) {
+
+ this.framesheet = framesheet;
+ this.container = container;
+ this.dpi = this.calculateDPI_();
+
+ this.redrawFlag = true;
+
+ $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
+ $.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
+ $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
+
+ $('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
+ this.updateScrollerOverflows();
+ };
+
+ ns.PreviewFilmController.prototype.init = function() {};
+
+ ns.PreviewFilmController.prototype.addFrame = function () {
+ this.framesheet.addEmptyFrame();
+ this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
+ this.updateScrollerOverflows();
+ };
+
+ ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
+ this.redrawFlag = true;
+ };
+
+ ns.PreviewFilmController.prototype.refreshDPI_ = function () {
+ this.dpi = this.calculateDPI_();
+ };
+
+ ns.PreviewFilmController.prototype.render = function () {
+ if (this.redrawFlag) {
+ // TODO(vincz): Full redraw on any drawing modification, optimize.
+ this.createPreviews_();
+ this.redrawFlag = false;
+ }
+ };
+
+ ns.PreviewFilmController.prototype.updateScrollerOverflows = function () {
+ var scroller = $('#preview-list-scroller');
+ var scrollerHeight = scroller.height();
+ var scrollTop = scroller.scrollTop();
+ var scrollerContentHeight = $('#preview-list').height();
+ var treshold = $('.top-overflow').height();
+ var overflowTop = false,
+ overflowBottom = false;
+ if (scrollerHeight < scrollerContentHeight) {
+ if (scrollTop > treshold) {
+ overflowTop = true;
+ }
+ var scrollBottom = (scrollerContentHeight - scrollTop) - scrollerHeight;
+ if (scrollBottom > treshold) {
+ overflowBottom = true;
+ }
+ }
+ var wrapper = $('#preview-list-wrapper');
+ wrapper.toggleClass('top-overflow-visible', overflowTop);
+ wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
+ };
+
+ ns.PreviewFilmController.prototype.createPreviews_ = function () {
+
+ this.container.html("");
+ // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
+ $(".tooltip").remove();
+
+ var frameCount = this.framesheet.getFrameCount();
+
+ for (var i = 0, l = frameCount; i < l ; i++) {
+ this.container.append(this.createPreviewTile_(i));
+ }
+ // Append 'new empty frame' button
+ var newFrameButton = document.createElement("div");
+ newFrameButton.id = "add-frame-action";
+ newFrameButton.className = "add-frame-action";
+ newFrameButton.innerHTML = "Add new frame
";
+ this.container.append(newFrameButton);
+
+ $(newFrameButton).click(this.addFrame.bind(this));
+
+ var needDragndropBehavior = (frameCount > 1);
+ if(needDragndropBehavior) {
+ this.initDragndropBehavior_();
+ }
+ this.updateScrollerOverflows();
+ };
+
+
+ /**
+ * @private
+ */
+ ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
+
+ $("#preview-list").sortable({
+ placeholder: "preview-tile-drop-proxy",
+ update: $.proxy(this.onUpdate_, this),
+ items: ".preview-tile"
+ });
+ $("#preview-list").disableSelection();
+ };
+
+ /**
+ * @private
+ */
+ ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
+ var originFrameId = parseInt(ui.item.data("tile-number"), 10);
+ var targetInsertionId = $('.preview-tile').index(ui.item);
+
+ this.framesheet.moveFrame(originFrameId, targetInsertionId);
+ this.framesheet.setCurrentFrameIndex(targetInsertionId);
+
+ // TODO(grosbouddha): move localstorage request to the model layer?
+ $.publish(Events.LOCALSTORAGE_REQUEST);
+ };
+
+
+ /**
+ * @private
+ * TODO(vincz): clean this giant rendering function & remove listeners.
+ */
+ ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
+ var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
+
+ var previewTileRoot = document.createElement("li");
+ var classname = "preview-tile";
+ previewTileRoot.setAttribute("data-tile-number", tileNumber);
+
+ if (this.framesheet.getCurrentFrame() == currentFrame) {
+ classname += " selected";
+ }
+ previewTileRoot.className = classname;
+
+ var canvasContainer = document.createElement("div");
+ canvasContainer.className = "canvas-container";
+
+ var canvasBackground = document.createElement("div");
+ canvasBackground.className = "canvas-background";
+ canvasContainer.appendChild(canvasBackground);
+
+ previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
+
+ var cloneFrameButton = document.createElement("button");
+ cloneFrameButton.setAttribute('rel', 'tooltip');
+ cloneFrameButton.setAttribute('data-placement', 'right');
+ cloneFrameButton.setAttribute('title', 'Duplicate this frame');
+ cloneFrameButton.className = "tile-overlay duplicate-frame-action";
+ previewTileRoot.appendChild(cloneFrameButton);
+ cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
+
+ // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
+ // is to make this update function (#createPreviewTile) less aggressive.
+ var renderingOptions = {"dpi": this.dpi };
+ var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
+ currentFrameRenderer.init(currentFrame);
+
+ previewTileRoot.appendChild(canvasContainer);
+
+ if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
+ // Add 'remove frame' button.
+ var deleteButton = document.createElement("button");
+ deleteButton.setAttribute('rel', 'tooltip');
+ deleteButton.setAttribute('data-placement', 'right');
+ deleteButton.setAttribute('title', 'Delete this frame');
+ deleteButton.className = "tile-overlay delete-frame-action";
+ deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
+ previewTileRoot.appendChild(deleteButton);
+
+ // Add 'dragndrop handle'.
+ var dndHandle = document.createElement("div");
+ dndHandle.className = "tile-overlay dnd-action";
+ previewTileRoot.appendChild(dndHandle);
+ }
+ var tileCount = document.createElement("div");
+ tileCount.className = "tile-overlay tile-count";
+ tileCount.innerHTML = tileNumber;
+ previewTileRoot.appendChild(tileCount);
+
+
+ return previewTileRoot;
+ };
+
+ ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
+ // has not class tile-action:
+ if(!evt.target.classList.contains('tile-overlay')) {
+ this.framesheet.setCurrentFrameIndex(index);
+ }
+ };
+
+ ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
+ this.framesheet.removeFrameByIndex(index);
+ $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
+ this.updateScrollerOverflows();
+ };
+
+ ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
+ this.framesheet.duplicateFrameByIndex(index);
+ $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
+ this.framesheet.setCurrentFrameIndex(index + 1);
+ this.updateScrollerOverflows();
+ };
+
+ /**
+ * Calculate the preview DPI depending on the framesheet size
+ */
+ ns.PreviewFilmController.prototype.calculateDPI_ = function () {
+ var previewSize = 120,
+ framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+ framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+ // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
+
+ return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+ ns.AnimatedPreviewController = function (framesheet, container, dpi) {
+ this.framesheet = framesheet;
+ this.container = container;
+
+ this.elapsedTime = 0;
+ this.currentIndex = 0;
+
+ this.fps = parseInt($("#preview-fps")[0].value, 10);
+
+ var renderingOptions = {
+ "dpi": this.calculateDPI_()
+ };
+ this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
+
+ $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
+ };
+
+ ns.AnimatedPreviewController.prototype.init = function () {
+ // the oninput event won't work on IE10 unfortunately, but at least will provide a
+ // consistent behavior across all other browsers that support the input type range
+ // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+ $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+ };
+
+ ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
+ this.setFPS(parseInt($("#preview-fps")[0].value, 10));
+ };
+
+ ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
+ this.fps = fps;
+ $("#preview-fps").val(this.fps);
+ $("#display-fps").html(this.fps + " FPS");
+ };
+
+ ns.AnimatedPreviewController.prototype.render = function (delta) {
+ this.elapsedTime += delta;
+ var index = Math.floor(this.elapsedTime / (1000/this.fps));
+ if (index != this.currentIndex) {
+ this.currentIndex = index;
+ if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) {
+ this.currentIndex = 0;
+ this.elapsedTime = 0;
+ }
+ this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex));
+ }
+ };
+
+ /**
+ * Calculate the preview DPI depending on the framesheet size
+ */
+ ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
+ var previewSize = 200,
+ framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
+ framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
+ // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
+
+ //return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
+ return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
+ };
+
+ ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
+ this.dpi = this.calculateDPI_();
+ this.renderer.updateDPI(this.dpi);
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+
+
+ ns.ToolController = function () {
+
+ this.toolInstances = {
+ "simplePen" : new pskl.drawingtools.SimplePen(),
+ "verticalMirrorPen" : new pskl.drawingtools.VerticalMirrorPen(),
+ "eraser" : new pskl.drawingtools.Eraser(),
+ "paintBucket" : new pskl.drawingtools.PaintBucket(),
+ "stroke" : new pskl.drawingtools.Stroke(),
+ "rectangle" : new pskl.drawingtools.Rectangle(),
+ "circle" : new pskl.drawingtools.Circle(),
+ "move" : new pskl.drawingtools.Move(),
+ "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
+ "shapeSelect" : new pskl.drawingtools.ShapeSelect(),
+ "colorPicker" : new pskl.drawingtools.ColorPicker()
+ };
+
+ this.currentSelectedTool = this.toolInstances.simplePen;
+ this.previousSelectedTool = this.toolInstances.simplePen;
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
+ var stage = $("body");
+ var previousSelectedToolClass = stage.data("selected-tool-class");
+ if(previousSelectedToolClass) {
+ stage.removeClass(previousSelectedToolClass);
+ }
+ stage.addClass(tool.toolId);
+ stage.data("selected-tool-class", tool.toolId);
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.selectTool_ = function(tool) {
+ console.log("Selecting Tool:" , this.currentSelectedTool);
+ this.currentSelectedTool = tool;
+ this.activateToolOnStage_(this.currentSelectedTool);
+ $.publish(Events.TOOL_SELECTED, [tool]);
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
+ var target = $(evt.target);
+ var clickedTool = target.closest(".tool-icon");
+
+ if(clickedTool.length) {
+ for(var tool in this.toolInstances) {
+ if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
+ this.selectTool_(this.toolInstances[tool]);
+
+ // Show tool as selected:
+ $('#tool-section .tool-icon.selected').removeClass('selected');
+ clickedTool.addClass('selected');
+ }
+ }
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.createToolMarkup_ = function() {
+ var currentTool, toolMarkup = '', extraClass;
+ // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
+ for (var toolKey in this.toolInstances) {
+ currentTool = this.toolInstances[toolKey];
+ extraClass = currentTool.toolId;
+ if (this.currentSelectedTool == currentTool) {
+ extraClass = extraClass + " selected";
+ }
+ toolMarkup += '';
+ }
+ $('#tools-container').html(toolMarkup);
+ };
+
+ /**
+ * @public
+ */
+ ns.ToolController.prototype.init = function() {
+
+ this.createToolMarkup_();
+
+ // Initialize tool:
+ // Set SimplePen as default selected tool:
+ this.selectTool_(this.toolInstances.simplePen);
+ // Activate listener on tool panel:
+ $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+
+ ns.PaletteController = function () {
+ this.paletteRoot = null;
+ this.paletteColors = [];
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
+ var inputPicker = $(evt.target);
+ if(evt.data.isPrimary) {
+ $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
+ }
+ else {
+ $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.addColorToPalette_ = function (color) {
+ if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
+ this.paletteColors.push(color);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.addColorsToPalette_ = function (colors) {
+ for(var color in colors) {
+ this.addColorToPalette_(color);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
+ var selectedColor = $(event.target).data("color");
+ var isLeftClick = (event.which == 1);
+ var isRightClick = (event.which == 3);
+ if (isLeftClick) {
+ $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
+ } else if (isRightClick) {
+ $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
+ if (color == Constants.TRANSPARENT_COLOR) {
+ // We can set the current palette color to transparent.
+ // You can then combine this transparent color with an advanced
+ // tool for customized deletions.
+ // Eg: bucket + transparent: Delete a colored area
+ // Stroke + transparent: hollow out the equivalent of a stroke
+
+ // The colorpicker can't be set to a transparent state.
+ // We set its background to white and insert the
+ // string "TRANSPARENT" to mimic this state:
+ colorPicker[0].color.fromString("#fff");
+ colorPicker.val(Constants.TRANSPARENT_COLOR);
+ } else {
+ colorPicker[0].color.fromString(color);
+ }
+ };
+
+ /**
+ * @public
+ */
+ ns.PaletteController.prototype.init = function(framesheet) {
+
+ this.paletteRoot = $("#palette");
+ this.framesheet = framesheet;
+
+ // Initialize palette:
+ this.addColorsToPalette_(this.framesheet.getUsedColors());
+
+ $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
+ this.addColorsToPalette_(this.framesheet.getUsedColors());
+ }, this));
+
+ this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
+
+ $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
+ this.updateColorPicker_(color, $('#color-picker'));
+ this.addColorToPalette_(color);
+ }, this));
+
+ $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
+ this.updateColorPicker_(color, $('#secondary-color-picker'));
+ this.addColorToPalette_(color);
+ }, this));
+
+ // Initialize colorpickers:
+ var colorPicker = $('#color-picker');
+ colorPicker.val(Constants.DEFAULT_PEN_COLOR);
+ colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
+
+
+ var secondaryColorPicker = $('#secondary-color-picker');
+ secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
+ secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
+
+ };
+})();
+
+
+
+;(function () {
+ var ns = $.namespace("pskl.controller");
+
+ ns.NotificationController = function () {};
+
+ /**
+ * @private
+ */
+ ns.NotificationController.prototype.displayMessage_ = function (evt, messageInfo) {
+ var message = document.createElement('div');
+ message.id = "user-message";
+ message.className = "user-message";
+ message.innerHTML = messageInfo.content;
+ message.innerHTML = message.innerHTML + "x
";
+ document.body.appendChild(message);
+ $(message).find(".close").click($.proxy(this.removeMessage_, this));
+ if(messageInfo.behavior) {
+ messageInfo.behavior(message);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.NotificationController.prototype.removeMessage_ = function (evt) {
+ var message = $("#user-message");
+ if (message.length) {
+ message.remove();
+ }
+ };
+
+ /**
+ * @public
+ */
+ ns.NotificationController.prototype.init = function() {
+ $.subscribe(Events.SHOW_NOTIFICATION, $.proxy(this.displayMessage_, this));
+ $.subscribe(Events.HIDE_NOTIFICATION, $.proxy(this.removeMessage_, this));
+ };
+})();
+;(function () {
+ var ns = $.namespace("pskl.controller");
+
+ ns.SettingsController = function () {};
+
+ /**
+ * @public
+ */
+ ns.SettingsController.prototype.init = function() {
+
+ // Highlight selected background picker:
+ var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+ $('#background-picker-wrapper')
+ .find('.background-picker[data-background-class=' + backgroundClass + ']')
+ .addClass('selected');
+
+ // Initial state for grid display:
+ var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
+ $('#show-grid').prop('checked', show_grid);
+
+ // Expand drawer when clicking 'Settings' tab.
+ $('#settings').click(function(evt) {
+ $('.right-sticky-section').toggleClass('expanded');
+ $('#settings').toggleClass('has-expanded-drawer');
+ });
+
+ // Handle grid display changes:
+ $('#show-grid').change($.proxy(function(evt) {
+ var checked = $('#show-grid').prop('checked');
+ pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
+ }, this));
+
+ // Handle canvas background changes:
+ $('#background-picker-wrapper').click(function(evt) {
+ var target = $(evt.target).closest('.background-picker');
+ if (target.length) {
+ var backgroundClass = target.data('background-class');
+ pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
+
+ $('.background-picker').removeClass('selected');
+ target.addClass('selected');
+ }
+ });
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.service");
+
+ ns.LocalStorageService = function (framesheet_) {
+
+ if(framesheet_ === undefined) {
+ throw "Bad LocalStorageService initialization: ";
+ }
+ this.framesheet = framesheet_;
+ this.localStorageThrottler_ = null;
+ };
+
+ /**
+ * @public
+ */
+ ns.LocalStorageService.prototype.init = function(framesheet_) {
+ $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
+ };
+
+ /**
+ * @private
+ */
+ ns.LocalStorageService.prototype.persistToLocalStorageRequest_ = function () {
+ // Persist to localStorage when drawing. We throttle localStorage accesses
+ // for high frequency drawing (eg mousemove).
+ if(this.localStorageThrottler_ !== null) {
+ window.clearTimeout(this.localStorageThrottler_);
+ }
+ this.localStorageThrottler_ = window.setTimeout($.proxy(function() {
+ this.persistToLocalStorage_();
+ this.localStorageThrottler_ = null;
+ }, this), 1000);
+ };
+
+ /**
+ * @private
+ */
+ ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
+
+ console.log('[LocalStorage service]: Snapshot stored');
+ window.localStorage.snapShot = this.framesheet.serialize();
+ };
+
+ /**
+ * @private
+ */
+ ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
+
+ this.framesheet.deserialize(window.localStorage.snapShot);
+ this.framesheet.setCurrentFrameIndex(0);
+ };
+
+ /**
+ * @private
+ */
+ ns.LocalStorageService.prototype.cleanLocalStorage_ = function() {
+ console.log('[LocalStorage service]: Snapshot removed');
+ delete window.localStorage.snapShot;
+ };
+
+ /**
+ * @public
+ */
+ ns.LocalStorageService.prototype.displayRestoreNotification = function() {
+ if(window.localStorage && window.localStorage.snapShot) {
+ var reloadLink = "reload";
+ var discardLink = "discard";
+ var content = "Non saved version found. " + reloadLink + " or " + discardLink;
+
+ $.publish(Events.SHOW_NOTIFICATION, [{
+ "content": content,
+ "behavior": $.proxy(function(rootNode) {
+ rootNode = $(rootNode);
+ rootNode.click($.proxy(function(evt) {
+ var target = $(evt.target);
+ if(target.hasClass("localstorage-restore")) {
+ this.restoreFromLocalStorage_();
+ }
+ else if (target.hasClass("localstorage-discard")) {
+ this.cleanLocalStorage_();
+ }
+ $.publish(Events.HIDE_NOTIFICATION);
+ }, this));
+ }, this)
+ }]);
+ }
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.service");
+ ns.HistoryService = function (framesheet) {
+ this.framesheet = framesheet;
+ };
+
+ ns.HistoryService.prototype.init = function () {
+
+ $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
+ $.subscribe(Events.UNDO, this.undo.bind(this));
+ $.subscribe(Events.REDO, this.redo.bind(this));
+ };
+
+ ns.HistoryService.prototype.saveState = function () {
+ this.framesheet.getCurrentFrame().saveState();
+ };
+
+ ns.HistoryService.prototype.undo = function () {
+ this.framesheet.getCurrentFrame().loadPreviousState();
+ $.publish(Events.FRAMESHEET_RESET);
+ };
+
+ ns.HistoryService.prototype.redo = function () {
+ this.framesheet.getCurrentFrame().loadNextState();
+ $.publish(Events.FRAMESHEET_RESET);
+ };
+
+})();;(function () {
+ var ns = $.namespace("pskl.service");
+
+ ns.KeyboardEventService = function () {};
+
+ /**
+ * @private
+ */
+ ns.KeyboardEventService.prototype.KeyboardActions_ = {
+
+ "ctrl" : {
+ "z" : Events.UNDO,
+ "y" : Events.REDO,
+ "x" : Events.CUT,
+ "c" : Events.COPY,
+ "v" : Events.PASTE
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.KeyboardEventService.prototype.CharCodeToKeyCodeMap_ = {
+
+ 90 : "z",
+ 89 : "y",
+ 88 : "x",
+ 67 : "c",
+ 86 : "v"
+ };
+
+ /**
+ * @private
+ */
+ ns.KeyboardEventService.prototype.onKeyUp_ = function(evt) {
+ var isMac = false;
+ if (navigator.appVersion.indexOf("Mac")!=-1) {
+ // Welcome in mac world where vowels are consons and meta used instead of ctrl:
+ isMac = true;
+ }
+
+ if (isMac ? evt.metaKey : evt.ctrlKey) {
+ // Get key pressed:
+ var letter = this.CharCodeToKeyCodeMap_[evt.which];
+ if(letter) {
+ var eventToTrigger = this.KeyboardActions_.ctrl[letter];
+ if(eventToTrigger) {
+ $.publish(eventToTrigger);
+
+ evt.preventDefault();
+ return false;
+ }
+ }
+ }
+ };
+
+ /**
+ * @public
+ */
+ ns.KeyboardEventService.prototype.init = function() {
+ $(document.body).keydown($.proxy(this.onKeyUp_, this));
+ };
+
+})();;/*
+ * @provide pskl.drawingtools.BaseTool
+ *
+ * @require pskl.utils
+ */
+(function() {
+ var ns = $.namespace("pskl.drawingtools");
+
+ ns.BaseTool = function() {};
+
+ ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
+
+ ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
+
+ ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
+ if (overlay.containsPixel(col, row)) {
+ if (!isNaN(this.highlightedPixelCol) &&
+ !isNaN(this.highlightedPixelRow) &&
+ (this.highlightedPixelRow != row ||
+ this.highlightedPixelCol != col)) {
+
+ // Clean the previously highlighted pixel:
+ overlay.clear();
+ }
+
+ // Show the current pixel targeted by the tool:
+ overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR);
+
+ this.highlightedPixelCol = col;
+ this.highlightedPixelRow = row;
+ }
+ };
+
+ ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
+
+ /**
+ * Bresenham line algorihtm: Get an array of pixels from
+ * start and end coordinates.
+ *
+ * http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
+ * http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
+ *
+ * @private
+ */
+ ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
+
+ var pixels = [];
+ var dx = Math.abs(x1-x0);
+ var dy = Math.abs(y1-y0);
+ var sx = (x0 < x1) ? 1 : -1;
+ var sy = (y0 < y1) ? 1 : -1;
+ var err = dx-dy;
+
+ while(true){
+
+ // Do what you need to for this
+ pixels.push({"col": x0, "row": y0});
+
+ if ((x0==x1) && (y0==y1)) break;
+ var e2 = 2*err;
+ if (e2>-dy){
+ err -= dy;
+ x0 += sx;
+ }
+ if (e2 < dx) {
+ err += dx;
+ y0 += sy;
+ }
+ }
+ return pixels;
+ };
+})();
+;/*
+ * @provide pskl.drawingtools.SimplePen
+ *
+ * @require pskl.utils
+ */
+(function() {
+ var ns = $.namespace("pskl.drawingtools");
+
+ ns.SimplePen = function() {
+ this.toolId = "tool-pen";
+ this.helpText = "Pen tool";
+
+ this.previousCol = null;
+ this.previousRow = null;
+
+ };
+
+ pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
+
+ /**
+ * @override
+ */
+ ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+ if (frame.containsPixel(col, row)) {
+ frame.setPixel(col, row, color);
+ }
+ this.previousCol = col;
+ this.previousRow = row;
+ };
+
+ ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+ if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
+ // The pen movement is too fast for the mousemove frequency, there is a gap between the
+ // current point and the previously drawn one.
+ // We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
+ var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
+ for(var i=0, l=interpolatedPixels.length; i size=widthxheight
+ var parts = sizeParam.split("x");
+ if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
+ var width = parseInt(parts[0], 10),
+ height = parseInt(parts[1], 10);
+
+ size = {
+ height : Math.min(height, Constants.MAX_HEIGHT),
+ width : Math.min(width, Constants.MAX_WIDTH)
+ };
+ } else {
+ size = Constants.DEFAULT_SIZE;
+ }
+ return size;
+ },
+
+ readFramesheetIdFromURL_ : function () {
+ return this.readUrlParameter_("frameId");
+ },
+
+ readUrlParameter_ : function (paramName) {
+ var searchString = window.location.search.substring(1),
+ i, val, params = searchString.split("&");
+
+ for (i = 0; i < params.length; i++) {
+ val = params[i].split("=");
+ if (val[0] == paramName) {
+ return unescape(val[1]);
+ }
+ }
+ return "";
+ },
+
+ loadFramesheetFromService : function (frameId) {
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
+ xhr.responseType = 'text';
+
+ xhr.onload = function (e) {
+ var res = JSON.parse(this.responseText);
+ frameSheet.load(res.framesheet);
+ pskl.app.animationController.setFPS(res.fps);
+ $.publish(Events.HIDE_NOTIFICATION);
+ pskl.app.finishInit();
+ };
+
+ xhr.onerror = function () {
+ $.publish(Events.HIDE_NOTIFICATION);
+ pskl.app.finishInit();
+ };
+
+ xhr.send();
+ },
+
+ getFirstFrameAsPNGData_ : function () {
+ var tmpSheet = new pskl.model.FrameSheet(frameSheet.getWidth(), frameSheet.getHeight());
+ tmpSheet.addFrame(frameSheet.getFrameByIndex(0));
+ return (new pskl.rendering.SpritesheetRenderer(tmpSheet)).renderAsImageDataSpritesheetPNG();
+ },
+
+ // TODO(julz): Create package ?
+ storeSheet : function (event) {
+ var xhr = new XMLHttpRequest();
+ var formData = new FormData();
+ formData.append('framesheet_content', frameSheet.serialize());
+ formData.append('fps_speed', $('#preview-fps').val());
+
+ if (this.isStaticVersion) {
+ // anonymous save on old app-engine backend
+ xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
+ } else {
+ // additional values only used with latest app-engine backend
+ formData.append('name', $('#piskel-name').val());
+ formData.append('frames', frameSheet.getFrameCount());
+ // Get image/png data for first frame
+
+ formData.append('preview', this.getFirstFrameAsPNGData_());
+
+ xhr.open('POST', "save", true);
+ }
+
+ xhr.onload = function (e) {
+ if (this.status == 200) {
+ if (pskl.app.isStaticVersion) {
+ var baseUrl = window.location.href.replace(window.location.search, "");
+ window.location.href = baseUrl + "?frameId=" + this.responseText;
+ } else {
+ $.publish(Events.SHOW_NOTIFICATION, [{
+ "content" : "Successfully saved !"
+ }]);
+ }
+ } else {
+ this.onerror(e);
+ }
+ };
+ xhr.onerror = function (e) {
+ $.publish(Events.SHOW_NOTIFICATION, [{
+ "content" : "Saving failed (" + this.status + ")"
+ }]);
+ };
+ xhr.send(formData);
+
+ if (event) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ return false;
+ },
+
+ uploadToScreenletstore : function (imageData) {
+ var xhr = new XMLHttpRequest();
+ var formData = new FormData();
+ formData.append('data', imageData);
+ xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
+ var cloudURL;
+ var that = this;
+ xhr.onload = function (e) {
+ if (this.status == 200) {
+ cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
+ that.openWindow(cloudURL);
+ }
+ };
+
+ xhr.send(formData);
+ },
+
+ uploadAsAnimatedGIF : function () {
+ var fps = pskl.app.animationController.fps;
+ var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps);
+ this.uploadToScreenletstore(imageData);
+ },
+
+ uploadAsSpritesheetPNG : function () {
+ var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG();
+ this.uploadToScreenletstore(imageData);
+ },
+
+ openWindow : function (url) {
+ var options = [
+ "dialog=yes", "scrollbars=no", "status=no",
+ "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(),
+ "height=" + frameSheet.getHeight()
+ ].join(",");
+
+ window.open(url, "piskel-export", options);
+ }
+ };
+})();
diff --git a/tests/integration/casperjs/smoke_test.js b/tests/integration/casperjs/smoke_test.js
index 17aefaca..20e1ea84 100644
--- a/tests/integration/casperjs/smoke_test.js
+++ b/tests/integration/casperjs/smoke_test.js
@@ -1,11 +1,11 @@
casper
- .start(casper.cli.get('baseUrl')+"?debug")
+ .start(casper.cli.get('baseUrl')+"?pack")
.then(function () {
+ this.echo(casper.cli.get('baseUrl')+"?pack");
// If there was a JS error after the page load, casper won't perform asserts
this.test.assertExists('html', 'Casper JS cannot assert DOM elements. A JS error has probably occured.');
this.test.assertExists('#drawing-canvas-container canvas', 'Check if drawing canvas element is created');
-
})
.run(function () {
this.test.done();