general.namespace('SW.Controls');

(function () {
    
        /**/
        var MarkerSelectionControl = SW.Controls.MarkerSelectionControl = function (animSelectionButtonContainer) {
        
            this.isMenuShowing = false;
            
            animSelectionButtonContainer.appendChild(
                this.showMeButton = 
                $C('td', {width: '194px'}, {classes: 'data', id: 'more-data-link'},
                    this.showMeMessageContainer = 
                    $C('div', {width: '194px', display: 'block', color: 'white', backgroundColor: '#665C4E', borderLeft: '1px solid #757362'},
                        this.showMeMessage = 
                        $C('a', {width: '194px', display: 'block', color: 'white', backgroundColor: '#665C4E', fontSize: '15px'}, {href: '#', id: 'marker-type-message', html: 'Show Markers... '},
                            $C('img', null, {src: '/assets/images/icn_more_small.gif', width: '9', height: '6', alt: 'more'})
                        )
                    ),
                    this.popupMenu = 
                    $C('div', {height: '236px'}, {id: 'more-data'},
                        $C('ul',
                            $C('li', null, {id: 'marker-button-perspective-view', classes: 'unselectedListItem'},
                                $C('img', null, {src: '/assets/images/map-marker-3d-16.png', classes: 'alphaPNG', alt: '', width: '16', height: '16'}),
                                $C('span', {marginLeft: '5px'}, {html: '3D'})
                            ),
				            $C('li', null, {id: 'marker-button-buoy', classes: 'unselectedListItem'},
                                $C('img', null, {src: '/assets/images/map-marker-buoy-16.png', classes: 'alphaPNG', alt: '', width: '16', height: '16'}),
                                $C('span', {marginLeft: '5px'}, {html: 'Buoys'})
                            ),
				            $C('li', null, {id: 'marker-button-tide-station', classes: 'unselectedListItem'},
                                $C('img', null, {src: '/assets/images/map-marker-tide-16.png', classes: 'alphaPNG', alt: '', width: '16', height: '16'}),
                                $C('span', {marginLeft: '5px'}, {html: 'Tide Stations'})
                            ),
                            $C('li', null, {id: 'marker-button-weather-zone', classes: 'unselectedListItem'},
                                $C('img', null, {src: '/assets/images/map-marker-text-16.png', classes: 'alphaPNG', alt: '', width: '16', height: '16'}),
                                $C('span', {marginLeft: '5px'}, {html: 'Marine Weather'})
                            ),
                            $C('li', null, {id: 'marker-button-surf-spot', classes: 'unselectedListItem'},
                                $C('img', null, {src: '/assets/images/map-marker-surf-16.png', classes: 'alphaPNG', alt: '', width: '16', height: '16'}),
                                $C('span', {marginLeft: '5px'}, {html: 'Surf Spots'})
                            ),
                            $C('li', null, {id: 'marker-button-none', classes: 'selectedListItem'},
                                $C('img', null, {src: '/assets/images/icn-close-small.gif', alt: '', width: '11', height: '11'}),
                                $C('span', {marginLeft: '5px'}, {html: 'Hide all markers'})
                            )
                        )
                    )			            
			    )
            );
            
            // setup the list items for highlighting
            var items = this.popupMenu.getElementsByTagName('li');
            for (var i = 0; i < items.length; i++) {
                items[i].isButton = true;
                items[i].style.textAlign = 'left';
                items[i].style.paddingLeft = '15px';
                items[i].isSelected = false;
                items[i].isHighlightable = true;
                items[i].className = 'unselectedListItem';
            }
            var hideButton = items[items.length - 1];
            hideButton.isSelected = true; // the hide all markers button starts selected
            hideButton.className = 'selectedListItem';
        };
        MarkerSelectionControl.prototype.constructor = MarkerSelectionControl;
    
        
        MarkerSelectionControl.prototype.setupHandlers = function () {
            var me = this;
            
            general.addListener(
                'more-data-link',
                'mouseover',
                function (evt) {
                    me.showMoreData(evt);
                    YAHOO.util.Event.preventDefault(evt);            
                    return false;
                }
            );
            
            general.addListener(
                'more-data-link',
                'mouseout',
                function (evt) {
                    me.hideMoreData(evt);
                    YAHOO.util.Event.preventDefault(evt);
                    return false;
                }
            );
            
            general.addListener( 
                'more-data-link',
                'mousedown',
                function (evt) {
                    YAHOO.util.Event.preventDefault(evt);
                    me.onClick(evt);
                    return false;
                }
            );
            
                    
            general.addListener( // suppress normal anchor behavior
                'more-data-link',
                'click',
                function (evt) {                    
                    YAHOO.util.Event.preventDefault(evt);
                    return false;
                }
            );
        };
        
        MarkerSelectionControl.prototype.isButton = function (target) {
            if (target.isButton) {
                return target;
            }
            else if (target.parentNode && target.parentNode.isButton) {
                return target.parentNode;
            }
            else {
                return null;
            }
        };        
    
        /* on mouseover */
        MarkerSelectionControl.prototype.showMoreData = function (evt) {
            var target = evt.target || evt.srcElement;
            
            var me = this;
            
            if (general.isNodeOrChildOf(target, this.showMeButton) 
                        && !general.isNodeOrChildOf(target, this.popupMenu)
                        && !this.isMenuShowing) {
                this.showMeMessage.style.color = '#fc6';
            }    
            
            target = this.isButton(target);
            if (target && target.isHighlightable && !target.isSelected) {
                target.style.backgroundColor = '#fc6';
            }
            
            return false;
        };
        
        
        /* on mouseout */
        MarkerSelectionControl.prototype.hideMoreData = function (evt, target) {
            if (!target) {
                target = evt.target || evt.srcElement;
            }
            var relatedTarget = evt.relatedTarget || evt.toElement;
            
            if (general.isNodeOrChildOf(target, this.showMeButton)
                        && !general.isNodeOrChildOf(relatedTarget, this.showMeButton)) {
                this.popupMenu.style.visibility = 'hidden';
                this.showMeMessage.style.color = 'white';
                this.isMenuShowing = false;    
            }
            
            target = this.isButton(target);
            if (target && target.isHighlightable && !target.isSelected) {
                target.style.backgroundColor = 'white';
            }
            
            return false;
        };
        
        
        /**/
        MarkerSelectionControl.prototype.onClick = function (evt) {
            var target = evt.target || evt.srcElement;
            
            if (!this.isMenuShowing) {
                this.popupMenu.style.visibility = 'visible';
                this.isMenuShowing = true;
            }
            
            target = this.isButton(target);
            var markerType = (target) ? this.getTypeByButtonId(target.id) : null;
            
            if (markerType) { // might have clicked on something other than a marker button
                this.selectMarkerType(markerType);
                SWMap.historyControl.addState();
            }
            
            YAHOO.util.Event.preventDefault(evt);
        };
        
        
        /**/
        MarkerSelectionControl.prototype.selectMarkerType = function (type, delayUpdate) {            
            this.popupMenu.style.visibility = 'hidden';
            SWMap.markerGrid.setMarkerType(type, delayUpdate);
            
            // clear all type highlighting in the list
            var items = this.popupMenu.getElementsByTagName('li');
            for (var i = 0; i < items.length; i++) {
                items[i].style.backgroundColor = 'white';
                items[i].className = 'unselectedListItem';
                items[i].isSelected = false;
            }
            
            // highlight the clicked type
            var button = this.getButtonByType(type);
            button.className = 'selectedListItem';
            button.style.backgroundColor = '#7A7664';
            button.isSelected = true;
                        
            // set the message
            var newMessage;
            if (type === 'none') {
                newMessage = 'Show Markers... ';
            }
            else if (type === 'Buoy') {
                newMessage = 'Showing Buoys ';
            }
            else if (type === 'TideStation') {
                newMessage = 'Showing Tide Stations ';
            }
            else if (type === 'SurfSpot') {
                newMessage = 'Showing Surf Spots ';
            }
            else if (type === 'PerspectiveView') {
                newMessage = 'Showing 3D ';
            }
            else if (type === 'WeatherZone') {
                newMessage = 'Showing Marine Weather ';
            }
            
            newMessage = document.createTextNode(newMessage);
            
            var ele = document.getElementById('marker-type-message');
            var oldMessage = ele.firstChild;
            ele.replaceChild(newMessage, oldMessage);
            
            return false;
        };
        
        
        /**/
        MarkerSelectionControl.MARKER_TYPE_BY_BUTTON_ID = {
            'marker-button-perspective-view' : 'PerspectiveView',
            'marker-button-buoy' : 'Buoy',
            'marker-button-tide-station' : 'TideStation',
            'marker-button-weather-zone' : 'WeatherZone',
            'marker-button-surf-spot' : 'SurfSpot',
            'marker-button-none' : 'none'
        };
        
        
        /**/
        MarkerSelectionControl.MARKER_BUTTON_ID_BY_TYPE = {
            'PerspectiveView' : 'marker-button-perspective-view',
            'Buoy' : 'marker-button-buoy',
            'TideStation' : 'marker-button-tide-station',
            'WeatherZone' : 'marker-button-weather-zone',
            'SurfSpot' : 'marker-button-surf-spot',
            'none' : 'marker-button-none'
        };
        
        
        MarkerSelectionControl.MARKER_BUTTON_BY_TYPE = {};
        
        
        /**/
        MarkerSelectionControl.prototype.getButtonByType = function (type) {
            var id = MarkerSelectionControl.MARKER_BUTTON_ID_BY_TYPE[type];
            return document.getElementById(id);
        };
        
        
        /**/
        MarkerSelectionControl.prototype.getTypeByButtonId = function (buttonId) {
            return MarkerSelectionControl.MARKER_TYPE_BY_BUTTON_ID[buttonId];
        };
	

})();