Ext.define('ImageViewer', {
    extend: 'Ext.container.Container',
    layout: {type: 'vbox', align: 'stretch'},
    config: {
        isMoving: false,
        imageWidth: null,
        imageHeight: null,
        originalImageWidth: null,
        originalImageHeight: null,
        clickX: null,
        clickY: null,
        lastMarginX: null,
        lastMarginY: null,
        rotation: 0
    },
    initComponent: function () {
        var me = this;
        if (this.images.length > 0) {
            me.image = this.images[0];
            //me.src = 'http://free.k-part.com/wm/' + me.image['BookDir'] + '/' + me.image['PicName'];
            me.src = 'https://c1.a2109.com/komatsu20/' + me.image['BookDir'] + '/' + me.image['PicName'];
            //me.src = 'https://storage.googleapis.com/klpdown-central/img/' + me.image['BookDir'] + '/' + me.image['PicName'];
            //me.src = 'https://storage.googleapis.com/klpdown-central/files/img/' + me.image['BookDir'] + '/' + me.image['PicName'];
            me.alt = '1';
        } else {
            me.src = false;
            me.image = false;
        }
        me.tooltips = me.tooltips || {};
        me.tooltips = Ext.applyIf(me.tooltips, {
            stretchHorizontally: 'Stretch horizontally',
            stretchVertically: 'Stretch vertically',
            stretchOptimally: 'Stretch optimally',
            zoomIn: 'Zoom in',
            zoomOut: 'Zoom out',
            rotateClockwise: 'Rotate clockwise',
            rotateAntiClockwise: 'Rotate anticlockwise'
        });
        me.items = [{
            //xtype: 'toolbar',
            xtype: 'toolbar',
            border: true,
            style: 'border-right: 0;border-top: 0;border-left: 0;',
            defaults: {
                tooltipType: 'title'
            },
            items: [
                {
                    xtype: 'button',
                    tooltip: me.tooltips.stretchHorizontally,
                    icon: '/static/images/stretch_horizontally.png',
                    listeners: {click: me.stretchHorizontally, scope: me}
                },
                {
                    xtype: 'button',
                    tooltip: me.tooltips.stretchVertically,
                    icon: '/static/images/stretch_vertically.png',
                    listeners: {click: me.stretchVertically, scope: me}
                },
                {
                    xtype: 'button',
                    tooltip: me.tooltips.stretchOptimally,
                    icon: '/static/images/stretch_optimally.png',
                    listeners: {click: me.stretchOptimally, scope: me}
                },
                {
                    xtype: 'tool',
                    tooltip: me.tooltips.zoomIn,
                    iconCls: 'silk-icon silk-icon-zoom-in x-tool-img x-tool-plus',
                    listeners: {click: me.zoomIn, scope: me}
                },
                {
                    xtype: 'tool',
                    tooltip: me.tooltips.zoomOut,
                    iconCls: 'silk-icon silk-icon-zoom-out x-tool-img x-tool-minus',
                    listeners: {click: me.zoomOut, scope: me}
                }, '->', {
                    xtype: 'tool',
                    iconCls: 'silk-icon silk-icon-printer x-tool-img x-tool-print ',
                    listeners: {click: me.printIt, scope: me}
                }]
        }, {
            xtype: 'container',
            itemId: 'imagecontainer',
            flex: 1,
            style: {
                overflow: 'hidden',
                backgroundColor: '#fff',
                padding: '40px',
                cursor: 'move'
            },
            items: {
                xtype: 'image', mode: 'element', src: me.src, style: {}, alt:'2', listeners: {
                    render: function (image) {
                        image.el.dom.onload = function () {
                            me.setRotation(0);
                            me.rotateImage();
                            me.setOriginalImageWidth(image.el.dom.width);
                            me.setOriginalImageHeight(image.el.dom.height);
                            me.setImageWidth(image.el.dom.width);
                            me.setImageHeight(image.el.dom.height);
                            me.stretchOptimally();
                        };
                        var el = image.getEl();
                        el.on('mousewheel', function (ev) {
                            ev.stopEvent();
                        });
                        el.on('mousewheel', function (ev) {
                            var delta = ev.getWheelDelta();
                            if (delta > 0) me.zoomIn(null, ev, null);
                            if (delta < 0) me.zoomOut(null, ev, null);
                        }, this, {buffer: 25});
                        el.on('dblclick', function (ev) {
                            me.zoomIn(null, ev, null);
                            me.zoomIn(null, ev, null);
                        });
                    }, afterrender: function (image) {
                    }
                }
            }
        }];
        me.callParent();
    },
    initEvents: function () {
        var me = this;
        me.mon(me.getImageContainer().getEl(), {
            mouseup: me.mouseup,
            mousedown: me.mousedown,
            mousemove: me.mousemove,
            scope: me
        });
        me.callParent();
    },
    stretchHorizontally: function () {
        var me = this, imageContainerWidth = me.getImageContainer().getWidth();
        me.setImageSize({
            width: imageContainerWidth - 20,
            height: me.getOriginalImageHeight() * (imageContainerWidth - 20) / me.getOriginalImageWidth()
        });
        me.centerImage();
    },
    stretchVertically: function () {
        var me = this,
            imageContainerHeight = me.getImageContainer().getHeight();

        me.setImageSize({
            width: me.getOriginalImageWidth() * (imageContainerHeight - 20) / me.getOriginalImageHeight(),
            height: imageContainerHeight - 20
        });

        me.centerImage();
    },
    stretchOptimally: function () {
        var me = this,
            imageContainer = me.getImageContainer(),
            adjustedImageSize = me.getAdjustedImageSize();

        if (adjustedImageSize.width * imageContainer.getHeight() / adjustedImageSize.height > imageContainer.getWidth()) {
            me.stretchHorizontally();
        } else {
            me.stretchVertically();
        }
    },
    centerImage: function () {
        var me = this,
            imageContainer = me.getImageContainer(),
            adjustedImageSize = me.getAdjustedImageSize();

        me.setMargins({
            top: (imageContainer.getHeight() - adjustedImageSize.height - 20) / 2,
            left: (imageContainer.getWidth() - adjustedImageSize.width - 20) / 2
        });
    },

    mousedown: function (event) {
        var me = this,
            margins = me.getMargins();

        event.stopEvent();
        me.setClickX(event.getX());
        me.setClickY(event.getY());
        me.setLastMarginY(margins.top);
        me.setLastMarginX(margins.left);
        me.setIsMoving(true);
    },

    mousemove: function (event) {
        var me = this;
        if (me.getIsMoving()) {
            me.setMargins({
                top: me.getLastMarginY() - me.getClickY() + event.getY(),
                left: me.getLastMarginX() - me.getClickX() + event.getX()
            });
        }
    },
    mouseup: function () {
        var me = this;
        if (me.getIsMoving()) {
            me.setClickX(null);
            me.setClickY(null);
            me.setLastMarginX(null);
            me.setLastMarginY(null);
            me.setIsMoving(false);
        }
    },
    printIt: function (btn, event, opts) {
        var me = this;
        var grid = me.ownerCt.ownerCt.grid;
        Ext.printImage = me.getImage().getEl().findParent('div.x-container').outerHTML;
        Ext.ux.grid.Printer.print(grid);
    },
    zoomOut: function (btn, event, opts) {
        var me = this, margins = me.getMargins(), adjustedImageSize = me.getAdjustedImageSize();
        me.setImageSize({
            width: adjustedImageSize.width * 0.9,
            height: me.getOriginalImageHeight() * adjustedImageSize.width * 0.9 / me.getOriginalImageWidth()
        });

        me.setMargins({
            top: margins.top + adjustedImageSize.height * 0.05,
            left: margins.left + adjustedImageSize.width * 0.05
        });

        event.stopEvent();
    },

    zoomIn: function (btn, event, opts) {
        var me = this,
            margins = me.getMargins(),
            adjustedImageSize = me.getAdjustedImageSize();

        me.setImageSize({
            width: adjustedImageSize.width * 1.1,
            height: me.getOriginalImageHeight() * adjustedImageSize.width * 1.1 / me.getOriginalImageWidth()
        });

        me.setMargins({
            top: margins.top - adjustedImageSize.height * 0.05,
            left: margins.left - adjustedImageSize.width * 0.05
        });

        event.stopEvent();
    },

    rotateClockwise: function () {
        var me = this,
            rotation = me.getRotation();

        rotation += 90;

        if (rotation > 360) {
            rotation -= 360;
        }

        me.setRotation(rotation);
        me.rotateImage();
    },

    rotateAntiClockwise: function () {
        var me = this,
            rotation = me.getRotation();

        rotation -= 90;

        if (rotation < 0) {
            rotation += 360;
        }

        me.setRotation(rotation);
        me.rotateImage();
    },

    rotateImage: function () {
        var me = this,
            tmpOriginalWidth,
            transformStyle = 'rotate(' + me.getRotation() + 'deg)';

        tmpOriginalWidth = me.getOriginalImageWidth();
        me.setOriginalImageWidth(me.getOriginalImageHeight());
        me.setOriginalImageHeight(tmpOriginalWidth);

        me.getImage().getEl().applyStyles({
            'transform': transformStyle,
            '-o-transform': transformStyle,
            '-ms-transform': transformStyle,
            '-moz-transform': transformStyle,
            '-webkit-transform': transformStyle
        });

        me.setMargins(me.getMargins());
    },

    setMargins: function (margins) {
        var me = this,
            rotation = me.getRotation(),
            adjustedImageSize = me.getAdjustedImageSize(),
            imageContainer = me.getImageContainer(),
            imageContainerWidth = imageContainer.getWidth(),
            imageContainerHeight = imageContainer.getHeight();

        if (adjustedImageSize.width > imageContainerWidth - 20) {
            if (margins.left > 0) {
                margins.left = 0;
            } else if (margins.left < imageContainerWidth - adjustedImageSize.width - 20) {
                margins.left = imageContainerWidth - adjustedImageSize.width - 20;
            }
        } else {
            if (margins.left < 0) {
                margins.left = 0;
            } else if (margins.left > imageContainerWidth - adjustedImageSize.width - 20) {
                margins.left = imageContainerWidth - adjustedImageSize.width - 20;
            }
        }

        if (adjustedImageSize.height > imageContainerHeight - 20) {
            if (margins.top > 0) {
                margins.top = 0;
            } else if (margins.top < imageContainerHeight - adjustedImageSize.height - 20) {
                margins.top = imageContainerHeight - adjustedImageSize.height - 20;
            }
        } else {
            if (margins.top < 0) {
                margins.top = 0;
            } else if (margins.top > imageContainerHeight - adjustedImageSize.height - 20) {
                margins.top = imageContainerHeight - adjustedImageSize.height - 20;
            }
        }

        if (rotation === 90 || rotation === 270) {
            var marginAdjustment = (me.getImageHeight() - me.getImageWidth()) / 2;
            margins.top = margins.top - marginAdjustment;
            margins.left = margins.left + marginAdjustment;
        }

        me.getImage().getEl().setStyle('margin-left', margins.left + 'px');
        me.getImage().getEl().setStyle('margin-top', margins.top + 'px');

        this.setLabels();
    },

    setLabels: function () {
        var me = this;
        if (me.image === false) return;

        var canvas = me.getImage().getEl().parent();
        //todo
        //Ext.get(canvas).select("> div").remove();
        Ext.get(canvas).select("div").remove();
        var ml = me.getMargins().left;
        var mt = me.getMargins().top;
        var oy = parseInt(this.image['PicOffsetY']);
        var ox = parseInt(this.image['PicOffsetX']);
        var dest_width = parseInt(this.image['DestPicWidth']);
        var dest_height = parseInt(this.image['DestPicHeight']);
        var src_width = parseInt(this.image['SrcPicWidth']);
        var src_height = parseInt(this.image['SrcPicHeight']);
        var scale = me.getImageWidth() / src_width; //src_width;
        //var correctX = Math.max(0, (me.getImageWidth() - src_width * scale) / 2) + 40;
        //var correctY = Math.max(0, (me.getImageHeight() - src_height * scale) / 2) + 40;
        var correctX = Math.max(0, (me.getImageWidth() - src_width * scale) / 2) ;
        var correctY = Math.max(0, (me.getImageHeight() - src_height * scale) / 2);
        for (var i = 0; i < this.image['labels'].length; i++) {
            var x1 = parseInt(this.image['labels'][i]['LabelX1']);
            var x2 = parseInt(this.image['labels'][i]['LabelX2']);
            var y1 = parseInt(this.image['labels'][i]['LabelY1']);
            var y2 = parseInt(this.image['labels'][i]['LabelY2']);
            var label = this.image['labels'][i]['sLabel'];
            var text = label;
            var height = Math.max((y2 - y1) * scale, 20);
            var width = Math.max((x2 - x1) * scale, 20);
            var style = 'line-height:' + (height - 4) + 'px;height:' + (height) + 'px;width:' + (width) + 'px;top:' + (mt + scale * (y1 - oy) + correctY) + 'px;left:' + (ml + scale * (x1 - ox) + correctX) + 'px;';
            var selected = false;
            var ref = false;
            var grid = me.ownerCt.ownerCt.grid;
            var store = grid.getStore();
            var qtip = '';
            var cls = 'part-label';
            store.each(function (r, idx) {
                if (r.data.item === label) {
                    if (grid.getSelectionModel().isRowSelected(idx)) {
                        selected = true;
                        cls = 'part-label-selected';
                    }
                    if (r.data['ref0'] !== '') {
                        text = r.data['name'];
                        ref = true;
                    }
                    qtip = '<b>' + r.get('short_number') + '</b>&nbsp;' + r.get('name');
                }
            });
            var objLabel = Ext.DomHelper.append(canvas, {
                'tag': 'div',
                'style': style,
                'data-qtip': qtip,
                'cls': cls,
                'selected': selected,
                'item': label,
                'ref': ref,
                'html': text
            });
        }
        /*
        Ext.get(canvas).select("div").on('click', function (e) {//"> div"
            var item = this.getAttribute('item');
            var selected = !Ext.decode(this.getAttribute('selected'));
            var ref = Ext.decode(this.getAttribute('ref'));
            if (ref && !selected) selected = true;
            var grid = me.ownerCt.ownerCt.grid;
            grid.store.each(function (record, idx) {
                if (record.data.item === item) {
                    if (selected) grid.getSelectionModel().select(record, true, true);
                    else grid.getSelectionModel().deselect(record, true);
                    grid.getView().focusRow(record);
                    grid.onUpdateTToolbar();

                    if (ref) {
                        var node = T.viewPort.komatsuTreePanel.getSelectionModel().getSelection()[0];
                        T.viewPort.komatsuTreePanel.loadPage(node.get('book'), record.data['page_id']);
                    }
                }
            });
            Ext.get(this.parentNode).select('div').each(function (e) { //"> div"
                if (e.getAttribute('item') === item) {
                    if (selected) {
                        Ext.get(e).replaceCls('part-label', 'part-label-selected');
                    } else {
                        Ext.get(e).replaceCls('part-label-selected', 'part-label');
                    }
                    Ext.get(e).set({'selected': selected});
                }
            });
        });
         */
    },
    getMargins: function () {
        var me = this,
            rotation = me.getRotation(),
            imageEl = me.getImage().getEl();

        var margins = {
            top: parseFloat(imageEl.getStyle('margin-top')),
            left: parseFloat(imageEl.getStyle('margin-left'))
        };
        if (rotation === 90 || rotation === 270) {
            var marginAdjustment = (me.getImageHeight() - me.getImageWidth()) / 2;
            margins.top = margins.top + marginAdjustment;
            margins.left = margins.left - marginAdjustment;
        }

        return margins;
    },

    getAdjustedImageSize: function () {
        var me = this,
            rotation = me.getRotation();

        if (rotation === 90 || rotation === 270) {
            return {
                width: me.getImageHeight(),
                height: me.getImageWidth()
            };
        } else {
            return {
                width: me.getImageWidth(),
                height: me.getImageHeight()
            };
        }
    },

    setImageSize: function (size) {
        var me = this,
            rotation = me.getRotation();

        if (rotation === 90 || rotation === 270) {
            me.setImageWidth(size.height);
            me.setImageHeight(size.width);
        } else {
            me.setImageWidth(size.width);
            me.setImageHeight(size.height);
        }
    },

    applyImageWidth: function (width) {
        var me = this;
        me.getImage().setWidth(width);
        return width;
    },

    applyImageHeight: function (height) {
        var me = this;
        me.getImage().setHeight(height);
        return height;
    },

    getImage: function () {
        return this.query('image')[0];
    },

    getImageContainer: function () {
        return this.query('#imagecontainer')[0];
    }
});