//global vars
        var arrImages = new Array();
        var arrTexts = new Array();
        var sTitle, sText;
        var canvasWith = 1100;
        var canvasHeight = 800;
        var gridX = (canvasWith/20);
        var gridY = (canvasHeight/20);
        var usedGrid = Array();
        var usedGridText = Array();
        var imgEl = Array();
        var imgPos = Array();
        var txtPos = Array();
        var arrCor = false;
        var iTries = 70;
        var counter = 0;

   
    function fitGrid(size) {
        var fixedsize = size
        if ((fixedsize % 20) != 0) {
            fixedsize = size + (20-(size % 20));
        } 
        return fixedsize;
    }

    function getPosition(gX,gY,imgW,imgH,arrUsed) {

        var rX = Math.floor(Math.random()*gX) * 20;
        var rY = Math.floor(Math.random()*gY) * 20;

        while (arrUsed[rX+''+rY]) {
            rX = Math.floor(Math.random()*gX) * 20;
            rY = Math.floor(Math.random()*gY) * 20;
        }

        //console.log('x: '+rX+' y: '+rY);
        var _x = Math.ceil(imgW / 20);
        var _y = Math.ceil(imgH / 20);

        //check all corners, middle of each side and the middle of the image
        cor1 = rX+''+rY;
        cor2 = ((_x*20)+rX)+''+rY;
        cor3 = rX+''+((_y*20)+rY);
        cor4 = ((_x*20)+rX)+''+((_y*20)+rY);
        mid = ((Math.ceil(_x/2)*20)+rX)+''+((Math.ceil(_y/2)*20)+rY);
        mid1 = ((Math.ceil(_x/2)*20)+rX)+''+rY;
        mid2 = ((Math.ceil(_x/2)*20)+rX)+''+((_y*20)+rY);
        mid3 = rX+''+((Math.ceil(_y/2)*20)+rY);
        mid4 = ((_x*20)+rX)+''+((Math.ceil(_y/2)*20)+rY);
        mid1th4_t = ((Math.ceil(_x/4)*20)+rX)+''+rY;
        mid3th4_t = ((Math.ceil(_x/4*3)*20)+rX)+''+rY;
        mid1th4_b = ((Math.ceil(_x/4)*20)+rX)+''+((_y*20)+rY);
        mid3th4_b = ((Math.ceil(_x/4*3)*20)+rX)+''+((_y*20)+rY);
        mid1th4_c = ((Math.ceil(_x/4)*20)+rX)+''+((_y*20/2)+rY);
        mid3th4_c = ((Math.ceil(_x/4*3)*20)+rX)+''+((_y*20/2)+rY);
        mid14th_l = rX+''+((Math.ceil(_y/4)*20)+rY);
        mid34th_l = rX+''+((Math.ceil(_y/4*3)*20)+rY);
        mid14th_r = ((_x*20)+rX)+''+((Math.ceil(_y/4)*20)+rY);
        mid34th_r = ((_x*20)+rX)+''+((Math.ceil(_y/4*3)*20)+rY);
        mid14th_c = ((_x*20/2)+rX)+''+((Math.ceil(_y/4)*20)+rY);
        mid34th_c = ((_x*20/2)+rX)+''+((Math.ceil(_y/4*3)*20)+rY);


        if((arrUsed[cor1]) || (arrUsed[cor2]) || (arrUsed[cor3]) || (arrUsed[cor4]) || (arrUsed[mid]) || (arrUsed[mid1]) || (arrUsed[mid2]) || (arrUsed[mid3]) || (arrUsed[mid4])) {
                return false;
        }
        if((arrUsed[mid1th4_t]) || (arrUsed[mid3th4_t]) || (arrUsed[mid1th4_b]) || (arrUsed[mid3th4_b]) || (arrUsed[mid1th4_c]) || (arrUsed[mid3th4_c])) {
            return false
        }
        if((arrUsed[mid14th_l]) || (arrUsed[mid34th_l]) || (arrUsed[mid14th_r]) || (arrUsed[mid34th_r]) || (arrUsed[mid14th_c]) || (arrUsed[mid34th_c])) {
            return false
        }

                        //console.log('cor1: '+cor1+' cor2: '+cor2+' cor3: '+cor3+' cor4: '+cor4);

        for (i = 0; i<=_x; i++) {
            for (a = 0; a<=_y; a++) {
                arrUsed[((i*20)+rX)+''+((a*20)+rY)] = true;
            }
        }

        return [rX,rY];
    }

    function setCaps(oC,usedGrid) {
        var titleH = oC.height();
        var titleW = oC.width();

         //make sure title fits grid
         titleH = titleH + (20-(titleH % 20));
         titleW = titleW + (20-(titleW % 20));

         //it can not go outside 1100 or below grid height
         //remove image with from grid
         var _gridX = gridX - (titleW/20);
         var _gridY = gridY - (titleH/20);

         //console.log('x '+gridX + ' _x' + _gridX)

         arrCor = false;
         counter = 0;
         while ((arrCor == false) && (counter < iTries)) {


            arrCor = getPosition(_gridX,_gridY,titleW,titleH,usedGrid);
            //console.log(arrCor)
            counter++;
         }

         if(arrCor != false) {
            oC.css('left',arrCor[0]);
            oC.css('top',arrCor[1]);
            return true;
         } else {
            return false;
         }


    }

    // Array Remove - By John Resig (MIT Licensed)
    Array.prototype.remove = function(from, to) {
      var rest = this.slice((to || from) + 1 || this.length);
      this.length = from < 0 ? this.length + from : from;
      return this.push.apply(this, rest);
    };

 $(document).ready(function(){
        //resize grid accoding to window
        canvasWitdh = $(document).width();
        canvasHeight = $(document).height();
        //fix to grid
        canvasWitdh = canvasWitdh - ((canvasWitdh % 20));
        canvasHeight = canvasHeight - ((canvasHeight % 20));
        //create gid
        gridX = (canvasWitdh/20) - 2;
        gridY = (canvasHeight/20);

    })