general.namespace('SW.Controls');

(function () {

        var DateBar = SW.Controls.DateBar = function(daysContainerId, monthYearLabelId) {
            this.daysContainer = $id(daysContainerId);
            this.monthYearLabel = $id(monthYearLabelId);
            this.currentStartDate = general.getDate();
            
            this.timeMarker = $id('timemarker');
            
            this.endTickObscurer = $C('div', null, {id: 'end-tick-obscurer'});
            $id('date-bar-container').appendChild(this.endTickObscurer);
            
            this.registerHandlers();
            this.render(this.currentStartDate);
        };
        DateBar.prototype.constructor = DateBar;
        
        
        DateBar.prototype.setCurrentStartDate = function(startDate) {
            this.currentStartDate = general.getDate();
            this.currentStartDate.setTime(startDate.valueOf());
        };
        
        
        /* the time marker position is coupled to pixel measurements of the datebar image */
        DateBar.prototype.positionTimeMarker = function (frameIdx) {

            var DAY_WIDTH = 70; // offset FROM first pixel of first slot TO first pixel of first slot of the next day
	        var OFFSET_TO_FIRST_DAY = 15; // offset to first slot of first day
            var SLOT_OFFSETS = [0, 17, 34, 51];

            var dayIdx = Math.floor(frameIdx / 4);
            var slotIdx = frameIdx % 4;

            var dayOffset = dayIdx * DAY_WIDTH;
            var slotOffset = SLOT_OFFSETS[slotIdx];

            var offset = OFFSET_TO_FIRST_DAY + dayOffset + slotOffset;
            
            this.timeMarker.style.left = offset + 'px';
        };
        
        
        DateBar.prototype.registerHandlers = function () {
            var me = this;
        
            /**/
            function onClick (evt) {
            
                var animationControl = SWMap.animationControl;
                var frameIdx;
                var DAY_WIDTH = 70;
                
                var target = evt.target || evt.srcElement;
                
                var dayIdx;
                if (typeof(target.idx) !== 'undefined') {
                    dayIdx = target.idx;
                }
                else if (typeof(target.parentNode.idx) !== 'undefined') {
                    dayIdx = target.parentNode.idx;
                }
                else if (typeof(target.parentNode.parentNode.idx) !== 'undefined') {
                    dayIdx = target.parentNode.parentNode.idx;
                }
                
                
                var x = evt.offsetX || (evt.layerX); // need to adjust offsets because IE uses the img itself while Firefox uses the enclosing position:relative
                var y = evt.offsetY || (evt.layerY);
                
                frameIdx = dayIdx * 4;
                
                if (y < 41) {
                    // day selected
                    frameIdx += 2; // select the third slot of the day (noon)
                }
                else {
                    // time selected
                    var remainder = x % DAY_WIDTH;
                    
                    if (remainder >= 51) {
                        frameIdx += 3;
                    }
                    else if (remainder >= 34) {
                        frameIdx += 2;
                    }
                    else if (remainder >= 17) {
                        frameIdx += 1;
                    }
                }
                
                if (animationControl.currentType == 'off') {
                    mapGeneral.centerAndZoomOnRegionAnimation(null, null, frameIdx); // play after setting region
                }
                else {
                    animationControl.setToFrame(frameIdx);
                }
                
            }

            
            /**/
            function onMouseOut (evt) {
                SWMap.tooltip.hide();
            }
            
            
            var timeTicLabels;
            if (SWMap.userPrefs.timeFormat === SW.UserPrefs.TIME_FORMAT.STANDARD) {
                timeTicLabels = ['Midnight', '6 am', 'Noon', '6 pm'];
            } else { // timeFormat is 24 hour clock
                timeTicLabels = ['Midnight', '06:00', 'Noon', '18:00'];
            }
            
            
            /* display the time when hovering over a time tic*/
            function onMouseMove (evt) {
                
                var tooltip = SWMap.tooltip;
            
                var x = evt.layerX || evt.offsetX; // layer for Netscape, offset for IE
                var y = evt.layerY || evt.offsetY;
            
                if (y >= 44) {
                    var message;
                    
                    if (x <= 16) {
                        var message = timeTicLabels[0];
                    }
                    else if (x >= 17 && x <= 33) {
                        message = timeTicLabels[1];
                    }
                    else if (x >= 34 && x <= 50) {
                        message = timeTicLabels[2];
                    }
                    else {
                        message = timeTicLabels[3];
                    }
                    
                    tooltip.setMessage(message);
                    tooltip.show();
                }
                else {
                    tooltip.hide();
                }
            }
            
        
            general.addListener(this.daysContainer, 'click', onClick);
            general.addListener(this.daysContainer, 'mouseout', onMouseOut);
            general.addListener(this.daysContainer, 'mousemove', onMouseMove);
        };
        
        
        
        /**/
        DateBar.prototype.render = function (beginStartDate) {
            this.renderEndTickObscurer(0);
            var startDate = new Date(beginStartDate.getTime());
            if (startDate) {
                this.setCurrentStartDate(startDate);    
            }
            else {
                startDate = this.currentStartDate;
            }
            
            var days = [];
            this.monthYearLabel.innerHTML = general.dateFormat(startDate, "mmmm yyyy");
            startDate.setDate(startDate.getDate() - 1);
            
            for (var i = 0; i < 7; i++) {
                startDate.setDate(startDate.getDate() + 1);
                var day = this.createDayElement(startDate);
                day.idx = i; // used by click handler
                days.push(day); 
            }
            
            general.replaceAllChildren(this.daysContainer, days);
        };
        
        
        /**/
        DateBar.prototype.renderEndTickObscurer = function (numEndTicksToObscure) {
            var n = numEndTicksToObscure;
        
            var style = this.endTickObscurer.style;
            if (n === 0) {
                style.visibility = 'hidden';
            }
            else {
                var width = n * 17; // each slot is 17 pixels wide
                width += Math.floor(n / 4) * 2; // 2 pixels in between each group of 4 slots
                
                style.width = width + 'px';
                style.visibility = 'visible';
            }
        };        
        
        /**/
        DateBar.prototype.createDayElement = function(date) {
            return (
            $C('div', null, {classes: 'dayContainer'},
                $C('div', null, {classes: 'dateText'},
                    $C('span', null, {classes: 'dayOfWeek', html: general.dateFormat(date, "ddd")}),
                    $C('br'),
                    $C('span', null, {classes: 'dayOfMonth', html: general.dateFormat(date, "mmm dd")})
                )
            ));
        };
})();