<?xml version="1.0" encoding="utf-8"?>
<module xmlns="http://www.kinoma.com/kpr/1">
      
    <behavior id="SwitchButtonBehavior"><![CDATA[
        function changeOffset(container, offset) {
            var label = container.last;
            var line = label.first;
            var button = line.first.next;
            var bar = label.previous;
            var background = bar.previous;
            if (offset < 0)
                offset = 0;
            else if (offset > this.size)
                offset = this.size;
            this.offset = offset;
            bar.width = button.width + Math.round(this.size - offset);
            line.x = label.x - Math.round(offset);
        }
        function onCreate(container, data) {
            this.data = data;
        }
        function onDisplaying(container) {
            var label = container.last;
            var line = label.first;
            var button = line.first.next;
            var bar = label.previous;
            var background = bar.previous;
            this.half = background.width >> 1;
            this.size = background.width - button.width;
            line.first.coordinates = line.last.coordinates = { width: this.size - 9 };      
            this.changeOffset(container, (this.data.value > 0) ? 0 : this.size);
        }
        function onFinished(container) {
        }

        function onTimeChanged(container) {
            this.changeOffset(container, this.anchor + Math.round(this.delta * container.fraction));
        }
        function onTouchBegan(container, id, x, y, ticks) {
            if (container.running) {
                container.stop();
                container.time = container.duration;
            }
            this.anchor = x;
            this.capturing = false;
            this.delta = this.offset + x;
            container.last.first.first.next.state = 1;
        }
        function onTouchCancelled(container, id, x, y, ticks) {
            container.last.first.first.next.state = 0;
        }
        function onTouchEnded(container, id, x, y, ticks) {
            var offset = this.offset;
            var size =  this.size;
            var delta = size >> 1;
            if (this.capturing) {
                if (offset < delta)
                    delta = 0 - offset;
                else 
                    delta = size - offset;
            }
            else {
                if (offset == 0)
                    delta = size;
                else if (offset == size)
                    delta = 0 - size;
                else if (x < this.half)
                    delta = 0 - offset;
                else
                    delta = size - offset;
            }
            if (delta) {
                this.anchor = offset;
                this.delta = delta;
                container.duration = 250 * Math.abs(delta) / size;
                container.time = 0;
                container.start();
            }
            var newValue = ((this.offset + delta) == 0) ? 1 : 0;
            if (this.data.value != newValue) {
                this.data.value = newValue;
                this.onValueChanged(container, this.data.value);
            }
                    
            container.last.first.first.next.state = 0;
        }
        function onTouchMoved(container, id, x, y, ticks) {
            if (this.capturing) {
                this.changeOffset(container, this.delta - x);
            }
            else if (Math.abs(x - this.anchor) >= 8) {
                this.capturing = true;
                container.captureTouch(id, x, y, ticks);
                this.changeOffset(container, this.delta - x);
            }
        }
        function onValueChanged(container, value) {
            this.changeOffset(container, value ? 0 : this.size);
        }
    ]]></behavior>
        
    <container id="SwitchButton" width="100" height="40" active="true" behavior="SwitchButtonBehavior">
        <content left="0" right="0" top="0" bottom="0" skin="THEME.switchBarSkin" state="0"/>
        <content left="0" width="40" top="0" bottom="0" skin="THEME.switchBarSkin" state="1"/>
        <container left="9" right="9" top="0" bottom="0" clip="true">
            <line left="0">
                <content skin="THEME.switchTextSkin" state="1"/>
                <content width="40" top="0" bottom="0" skin="THEME.switchButtonSkin" state="0"/>
                <content skin="THEME.switchTextSkin" state="0"/>
            </line>
        </container>
    </container>
    
</module>
