var GridOverlay = (function() {

    var divToggleLinks = new Element('div', {
        id: 'toggleLinks',
        styles: {
            position: 'absolute',
            top: 0,
            left: 0,
            'z-index': 999
        }
    }).inject($(document.body), 'top');


    return new Class({
        Implements: Options,
        options: {
            columns: 16,
            columnWidth: 40,
            gutterWidth: 20,
            rows: 1000,
            rowHeight: 1,
            gutterHeight: 17,
            offset: 0,
            horizontal: false,
            'z-index': 1,
            injectToggleTo: $(document.body)
        },
        initialize: function(options) {
            this.setOptions(options);
            this.render();
        },
        render: function() {



            var injectToggleTo = this.options.injectToggleTo,
                        bHorizontal = this.options.horizontal,
                        iColCount = bHorizontal ? parseInt(($(document.body).getScrollSize().y / (this.options.rowHeight + this.options.gutterHeight))) : this.options.columns,
                        iColWidth = bHorizontal ? this.options.rowHeight : this.options.columnWidth,
                        iGutterWidth = bHorizontal ? this.options.gutterHeight : this.options.gutterWidth,
                        elBody = $(document.body),
   				        iBodyHeight = elBody.getScrollSize().y,
   				        iColBoxWidth = bHorizontal ? elBody.getScrollSize().x : (iColCount * iColWidth) + ((iColCount - 1) * iGutterWidth),
   				        elColBox = new Element('div', {
   				            'id': bHorizontal ? 'gridColBoxH' : 'gridColBoxV',
   				            styles: {
   				                width: iColBoxWidth + 'px',
   				                height: (bHorizontal ? Cookie.read("hToggle") ? Cookie.read("hToggle") : 0 : Cookie.read("vToggle") ? Cookie.read("vToggle") : 0)+'px',
   				                overflow: 'hidden',
   				                position: 'absolute',
   				                left: '49.9999999999%',
   				                'margin-left': '-' + (iColBoxWidth / 2) + 'px',
   				                'z-index': this.options['z-index'] + 500,
   				                top: 0
   				            }
   				        }),
   				        elCol = new Element('div', {
   				            'class': 'gridCol',
   				            styles: {
   				                'float': 'left',
   				                width: bHorizontal ? '100%' : iColWidth + 'px',
   				                height: bHorizontal ? iColWidth + 'px' : '100%',
   				                'margin-right': bHorizontal ? 0 : iGutterWidth + 'px',
   				                'margin-top': bHorizontal ? iGutterWidth + 'px' : 0,
   				                background: '#000',
   				                opacity: '.2',
   				                '-ms-filter': '"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"',
   				                'filter': 'alpha(opacity=20)'
   				            }
   				        });

            while (iColCount--) {
                (iColCount == 0 ? elCol.clone().setStyle('margin', 0) : elCol.clone()).inject(elColBox);
            }

            elColBox.inject(elBody, 'top');

            new Element('a', {
                href: '#',
                html: bHorizontal ? 'Toggle H Grid' : 'Toggle V Grid',
                id: bHorizontal ? 'gridToggleLinkH' : 'gridToggleLinkV',
                styles: {
                    display: 'block'
                }
            }).addEvent('click', function(e) {
                var iTweenHeight = elColBox.getSize().y ? 0 : iBodyHeight;
                elColBox.tween('height', iTweenHeight);
                Cookie.write(bHorizontal ? 'hToggle' : 'vToggle', iTweenHeight);
            }).inject(divToggleLinks, 'bottom');
        }

    });
})();