var OTOS = window.OTOS || {};
OTOS.Graphics = function () {

    return {

        /**
         * The line color of the drawn areas
         */
        LINE_COLOR: '#aa0000',


        /**
         * The width of the line of the drawn areas in pixels
         */
        LINE_WIDTH: 2,


        /**
         * Draws a point to the canvas
         *
         * @param   {int}           x           The point's x-coordinate
         * @param   {int}           y           The point's y-coordinate
         * @param   {string}        id          The point's id
         * @param   {jsGraphics}    graphObj    The canvas object
         */
        drawPoint: function (x, y, id, graphObj) {
            graphObj.drawDiv(x, y, 'id=\'point_' + id + '\' onmousedown=\'dragPress(event)\'');
            graphObj.paint();
        },


        /**
         * Draws a polygon (the image area) to the canvas.
         *
         * @param   {array}         coordinates     An array containing the coordinate points separated
         *                                          by semicolons. If the drawPoints-variable is set to true,
         *                                          there should be also the point id's in the array. The right
         *                                          format should be id;x;y.
         * @param   {double}        factor          If the image is resized, we need the factor to put the points
         *                                          to the right place.
         * @param   {jsGraphics}    graphObj        The image canvas object
         * @param   {boolean}       drawPoints      Whether the corner points should be drawn also
         */
        drawArea: function (coordinates, factor, graphObj, drawPoints) {

            var x           = null,
                y           = null,
                tempX       = null,
                tempY       = null,
                id          = null,
                curPoint    = null,
                prevPoint   = null;

            // draw the lines

            for (var i = 0; i < coordinates.length; i++) {

                curPoint = coordinates[i].split(";");

                x   = drawPoints ? curPoint[1] : curPoint[0];
                y   = drawPoints ? curPoint[2] : curPoint[1];

                if (drawPoints) {
                    id  = curPoint[0];
                } // if

                // if this is the first coordinate point, the previous point is the last
                // point in the array

                if (tempX == null && tempY == null) {

                    prevPoint   = coordinates.last().split(';');
                    tempX       = drawPoints ? prevPoint[1] : prevPoint[0];
                    tempY       = drawPoints ? prevPoint[2] : prevPoint[1];

                } // if

                OTOS.Graphics.drawAreaLine(parseInt(factor * tempX),
                                           parseInt(factor * tempY),
                                           parseInt(factor * x),
                                           parseInt(factor * y),
                                           graphObj);

                tempX   = x;
                tempY   = y;

            } // for

            // draw the points. could have drawn in the previous loop, but then
            // some of the points would have been under the lines and it's prettier
            // this way

            if (drawPoints) {

                for (var i = 0; i < coordinates.length; i++) {

                    curPoint = coordinates[i].split(";");

                    x   = curPoint[1];
                    y   = curPoint[2];
                    id  = curPoint[0];

                    OTOS.Graphics.drawPoint(x, y, id, graphObj);

                } // for

            } // if

        },


        /**
         * Draws a single line to the canvas.
         *
         * @param   {int}           x1          The line's x1-coordinate
         * @param   {int}           y1          The line's y1-coordinate
         * @param   {int}           x2          The line's x2-coordinate
         * @param   {int}           y2          The line's y2-coordinate
         * @param   {jsGraphics}    graphObj    The image canvas object
         */
        drawAreaLine: function (x1, y1, x2, y2, graphObj) {
            graphObj.setColor(OTOS.Graphics.LINE_COLOR);
            graphObj.setStroke(OTOS.Graphics.LINE_WIDTH);
            graphObj.drawLine(parseInt(x1), parseInt(y1), parseInt(x2), parseInt(y2));
            graphObj.paint();
        },


        /**
         * Deletes all the drawings from the canvas
         *
         * @param   {jsGraphics}    graphObj    The canvas
         */
        clearCanvas: function (graphObj) {
            graphObj.clear();
        }

    };

}();