var _3dMoveFlag = false;    
var _3dAction = '';
var _curr3dObject;
var _3dTimeToDetect = 1000;
var _3dActionType = {
    'TouchStart_MouseDown' : 0,
    'TouchMove_MouseMove' : 1,
    'TouchEnd_MouseUp' : 2
};

function createMatrixPoints(width, height, _v, _h, imgCurrX, imgCurrY){   
    
    var deltaX =    width/ _h;
    var deltaY =    height/ _v;
    var _arrFrame = [];
    
    for (var countV = 1; countV<= _v; countV++){
        var temp = [];
        for(var countH = 1;countH<=_h; countH++){
            
                var frame = {
                    x1: deltaX*(countH-1), 
                    y1: deltaY*(countV-1),
                    x2: deltaX*countH, 
                    y2: deltaY*countV, 
                    matrixY: countV,
                    matrixX: countH
                };
                temp[countH]=frame;
        }
        
        _arrFrame[countV]=temp;
    }
    
    _arrFrame = setImageIndexToMatrix(imgCurrX, imgCurrY, _arrFrame, _h, _v);
    
    return _arrFrame;    
};

function setImageIndexToMatrix(imgCurrX, imgCurrY, _arrFrame, _h, _v){
    
    var deltaH = (_h - 1)/2;
    var deltaV = (_v - 1)/2;
    
    for(var countY = 1;countY<=_v;countY++){
        var currY = reCalcMatrixY(imgCurrY - deltaV + (countY - 1), _v);
        
        for(var countX=1;countX<=_h;countX++){     
            var currFrame = _arrFrame[countY][countX];
            currFrame.imgY = currY;
            
            var currX = imgCurrX - deltaH + (countX-1);
            currFrame.imgX = reCalcMatrixX(currX, _h);
            
            //set value back
            _arrFrame[countY][countX] = currFrame;      
        }
    }
    
    return _arrFrame;
};

function showCurrImg(id, x, y, w, h, _currFrameX, _currFrameY){
    var strCountH = convNumTo2Char(_currFrameX);
    var strCountV = convNumTo2Char(_currFrameY);
    
    var canvas = document.getElementById('offscreen');
    var context = canvas.getContext('2d');
    
    var imageId = strCountV + "-" + strCountH;
    var imageUrl = "";
    
    for(var i = 0 ; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        
        if(obj.id == id){
            var Obj1 = obj["3dview"];
            imageUrl = Obj1[imageId];
            break;
        }
    }
        
    var imgCurr = new Image();
    
    imgCurr.onload= function() {             
        context.drawImage(imgCurr, x,y,w,h);
        context.save();
        
        if (ClientData.IsAddingMarking() == false && ClientData.IsDisplayMarking() == true) {
            drawMarkingOnScreen();
            if(!isExistDrawing){
                flip();
            }
        }
        else{
            flip();
        }
    };
    imgCurr.src = imageUrl;
};

function reCalcMatrixX(x, _h){
    if(x <= 0)
        x = x + _h;
    
    if(x >_h)
        x = x - _h;
    return x;
};
    
function reCalcMatrixY(y, _v){
    if(y <= 0)
        y = y + _v;
    if(y >_v)
        y =  y - _v;
    return y;
};

function getArrFrame(id){
    var arrResult = [];

    for(var i = 0; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        if(obj.id == id){
            arrResult = obj.arrFrame;            
            return arrResult;
        }
    }
};

function get3dLastSeclectedFrame(id){
    var arrResult = Object();

    for(var i = 0; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        if(obj.id == id){
            arrResult = obj._lastSelectedFrame;            
            return arrResult;
        }
    }
};

function set3dLastSeclectedFrame(id, lastFrame){

    for(var i = 0; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        if(obj.id == id){
            _object3DImageArr[i]._lastSelectedFrame = lastFrame;
        }
    }
};

function getMatrixIndexByPosition(id, position, left, top){
    //compate with matrix to check went to another frame or not
    
    var posX = position.x;
    var posY = position.y;  
    
    posX = posX - left;
    posY = posY - top;
    
    var _arrFrame = getArrFrame(id);
        
    for(var countY=1;countY<_arrFrame.length;countY++){
        for(var countX=1;countX<_arrFrame[countY].length;countX++){
            // get curr frame image object
            var objFrame = _arrFrame[countY][countX];       
            
            if(posX >= objFrame.x1 && posX < objFrame.x2 && posY >= objFrame.y1 && posY < objFrame.y2 ){
                var nRet = objFrame;          
                return nRet;
            }
        }
    }
    return false;       
};

function get3dCurrentFramePos(id){
    var currFrame = [];
    
    for(var i = 0; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        if(obj.id == id){
            currFrame['_currFrameX'] = obj['_currFrameX'];
            currFrame['_currFrameY'] = obj['_currFrameY'];
            
            return currFrame;
        }
    }
};

function set3dCurrentFramePos(id, currFramePos){
    for(var i = 0; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        if(obj.id == id){
            _object3DImageArr[i]._currFrameX = currFramePos._currFrameX;
            _object3DImageArr[i]._currFrameY = currFramePos._currFrameY;
        }
    }
};

function OnMouseDown3D(id, position, left, top) {
    
    if(!_3dMoveFlag ){
        _3dMoveFlag = true;  
                
        //compate with matrix to check went to another frame or not
        //and set to last selected frame to compare on move event later
        var _lastSelectedFrame = getMatrixIndexByPosition(id, position, left, top);  
        set3dLastSeclectedFrame(id, _lastSelectedFrame);
    }
    
};

function OnMouseMove3D(id, position, left, top, width, height, _h, _v) {
    
    if(!_3dMoveFlag){
        return;
    }
               
    //compate with matrix to check went to another frame or not
    var selectedFrame = getMatrixIndexByPosition(id, position, left, top);
    var _lastSeclectedFrame = get3dLastSeclectedFrame(id);
    var _currFramePos = get3dCurrentFramePos(id);
    var _currFrameX = _currFramePos._currFrameX;
    var _currFrameY = _currFramePos._currFrameY; 
    
        
    var strCountH = convNumTo2Char(selectedFrame.matrixX);
    var strCountV = convNumTo2Char(selectedFrame.matrixY);

    //get what action did occur
    var action = get3DAction(_lastSeclectedFrame, selectedFrame);

    $('#test').html(action);

    if(action!=0){
        if(action==1)
            //_currFrameX--;
            _currFrameX++;
        else if(action==2)
            //_currFrameX++;
            _currFrameX--;            
        else if(action==3)
            //_currFrameY--;
            _currFrameY++;
        else if(action==4)
            //_currFrameY++;
            _currFrameY--;
                   
        _currFrameX = reCalcMatrixX(_currFrameX, _h);
        _currFrameY = reCalcMatrixY(_currFrameY, _v);
               
         // show current img 
        showCurrImg(id, left, top, width, height, _currFrameX, _currFrameY);
        _lastSeclectedFrame = selectedFrame;
        
        //recalculate X, Y value
        _currFramePos._currFrameX = _currFrameX; 
        _currFramePos._currFrameY = _currFrameY;
        
        set3dCurrentFramePos(id, _currFramePos);                                  
        set3dLastSeclectedFrame(id, _lastSeclectedFrame);
    }
};

function OnMouseEnd3D(id, _h, _v) {
    
    if(_3dMoveFlag) {
        _3dMoveFlag = false;
        
        var currFramePos = get3dCurrentFramePos(id);
        var _currFrameX = currFramePos._currFrameX;
        var _currFrameY = currFramePos._currFrameY;
        var _arrFrame = getArrFrame(id);
        
        //setImageIndexToMatrix(_currFrameX, _currFrameY, _arrFrame, _h, _v);
        setArrFrame(id, _h, _v, _currFrameX, _currFrameY, _arrFrame);
    }   
};

function setArrFrame(id, _h, _v, _currX, _currY, _arrFrame){
    
    for(var i = 0; i < _object3DImageArr.length; i++){
        var obj = _object3DImageArr[i];
        if(obj.id == id){
            obj.arrFrame = setImageIndexToMatrix(_currX, _currY, _arrFrame, _h, _v);
        }
    }   
};

//compare 2 frame to get action
function get3DAction(lastFrame, currFrame){
    var nRet = 0;

    if(lastFrame.x1<currFrame.x1)
        nRet=1; // move right
    else if(lastFrame.x1>currFrame.x1)
        nRet=2; // move left
    else if(lastFrame.y1<currFrame.y1)
        nRet=3; // move down
    else if(lastFrame.y1>currFrame.y1)
        nRet=4; // move up
    
    return nRet;    
};