var OnlineStatus = Object();

OnlineStatus.Settings = {
    ContainerId : 'online_box',
    ContainerIdFull : 'online_box_full',
    ContainerIdBoxHeader : 'box_header'
};

OnlineStatus.boxOpen = false;

$j('#' + OnlineStatus.Settings.ContainerIdFull).bind({
    mouseleave : function() {
        $j(this).css('overflow', 'hidden');
    },
    mouseenter : function() {
        $j(this).css('overflow', 'auto');
    }
});

OnlineStatus.setBrowserSettings = function() {
    
    OnlineStatus.viewport = document.viewport.getDimensions(); /*
                                                                 * Gets the
                                                                 * viewport as
                                                                 * an object
                                                                 * literal
                                                                 */
    OnlineStatus.width = OnlineStatus.viewport.width; /* Usable window width */
    OnlineStatus.height = OnlineStatus.viewport.height; /* Usable window height */
    
    /*
     * $('test_screen_size').update('Width:'+OnlineStatus.width+'
     * Height:'+OnlineStatus.height);
     */
};

OnlineStatus.positionOnlineBox = function() {
    
    if (OnlineStatus.width < 1392) {
        
        OnlineStatus.anchorToggleBox();
        
        if ($(OnlineStatus.Settings.ContainerIdBoxHeader)) {
            $(OnlineStatus.Settings.ContainerIdBoxHeader).onclick = OnlineStatus.buttonToggleBox;
            $(OnlineStatus.Settings.ContainerIdBoxHeader).addClassName(
                'pointer');
            $(OnlineStatus.Settings.ContainerIdBoxHeader).addClassName(
                'open_background');
            
            /*
             * $(OnlineStatus.Settings.ContainerIdBoxHeader).observe('click',
             * function(event) { OnlineStatus.buttonToggleBox() });
             */
        }
        
    } else {
        $(OnlineStatus.Settings.ContainerIdFull).setStyle({
            bottom : 'auto',
            height : '100%'
        });
        
        if ($(OnlineStatus.Settings.ContainerIdBoxHeader)) {
            $(OnlineStatus.Settings.ContainerIdBoxHeader).onclick = null;
            $(OnlineStatus.Settings.ContainerIdBoxHeader).removeClassName(
                'pointer');
            $(OnlineStatus.Settings.ContainerIdBoxHeader).removeClassName(
                'open_background');
            /*
             * $(OnlineStatus.Settings.ContainerIdBoxHeader).observe('click',
             * function(event) { event.stop() });
             */
        }
    }
};

/*
 * This method will make sure the smaller screen online box will stay where it
 * last was
 */
OnlineStatus.anchorToggleBox = function() {
    
    if (!OnlineStatus.boxOpen) {
        
        OnlineStatus.offSetHeight = '-'
                + ($(OnlineStatus.Settings.ContainerIdFull).getHeight() - 20);
        
        $(OnlineStatus.Settings.ContainerIdFull).setStyle({
            bottom : OnlineStatus.offSetHeight + 'px'
        });
        
        if ($(OnlineStatus.Settings.ContainerIdBoxHeader)) {
	        if ($(OnlineStatus.Settings.ContainerIdBoxHeader).hasClassName('pos2')) {
	            $(OnlineStatus.Settings.ContainerIdBoxHeader).removeClassName(
	                'pos2');
	        }
        	$(OnlineStatus.Settings.ContainerIdBoxHeader).addClassName('pos1');
        }
        
    } else {
        
        $(OnlineStatus.Settings.ContainerIdFull).setStyle({
            /* bottom: OnlineStatus.offSetHeight+'px', */
            height : 'auto',
            bottom : 0
        });
        
        if ($(OnlineStatus.Settings.ContainerIdBoxHeader)) {
	        if($(OnlineStatus.Settings.ContainerIdBoxHeader).hasClassName('pos1')) {
	            $(OnlineStatus.Settings.ContainerIdBoxHeader).removeClassName(
	                'pos1');
	        }
        	$(OnlineStatus.Settings.ContainerIdBoxHeader).addClassName('pos2');
        }
    }
};

OnlineStatus.buttonToggleBox = function() {
    
    if (OnlineStatus.boxOpen) {
        
        OnlineStatus.offSetHeight = '-'
                + ($(OnlineStatus.Settings.ContainerIdFull).getHeight() - 20);
        
        $(OnlineStatus.Settings.ContainerIdFull).setStyle({
            bottom : OnlineStatus.offSetHeight + 'px'
        });
        
        if ($(OnlineStatus.Settings.ContainerIdBoxHeader)) {
	        if ($(OnlineStatus.Settings.ContainerIdBoxHeader).hasClassName('pos2')) {
	            $(OnlineStatus.Settings.ContainerIdBoxHeader).removeClassName(
	                'pos2');
	        }
        	$(OnlineStatus.Settings.ContainerIdBoxHeader).addClassName('pos1');
        }
        
        OnlineStatus.boxOpen = false;
        
    } else {
        
        $(OnlineStatus.Settings.ContainerIdFull).setStyle({
            height : 'auto',
            bottom : 0
        });
        
        if($(OnlineStatus.Settings.ContainerIdBoxHeader)) {
	        if ($(OnlineStatus.Settings.ContainerIdBoxHeader).hasClassName('pos1')) {
	            $(OnlineStatus.Settings.ContainerIdBoxHeader).removeClassName(
	                'pos1');
	        }
        	$(OnlineStatus.Settings.ContainerIdBoxHeader).addClassName('pos2');
        }
        
        OnlineStatus.boxOpen = true;
    }
    
};

OnlineStatus.getOnlineStatusFull = function() {
    /*
     * Using jquery here as prototype does not allow cross platformm ajax calls
     * remember you wont see ajax call in firebug when using cross domain
     */

    $j.ajax({
                url : sCDNBaseUrl + "/ajax/utilities/online_status_full",
                dataType : "jsonp",
                type : 'GET',
                crossDomain : true,
                contentType : "application/json",
                jsonpCallback : 'online',
                cache : true,
                success : function(data) {
                    
                    setTimeout(function() {
                        OnlineStatus.getOnlineStatusFull();
                    }, 30000);
                    
                    oResponse = data.onlineData;
                    
                    if (oResponse == null) {
                        return;
                    }
                    OnlineStatus.displayResultFullJ(oResponse);
                    
                    /* lets set the online box now we know the elements exist */
                    OnlineStatus.positionOnlineBox();
                    
                    var bOrientationChange = "onorientationchange" in window, sListeningEvent = bOrientationChange ? "orientationchange"
                            : "resize";
                    
                    Event.observe(window, sListeningEvent, function() {
                        /*
                         * lets set the online box now we know the elements
                         * exist
                         */
                        OnlineStatus.positionOnlineBox();
                    });
                }
            });
    /*
     * $j.getJSON(sCDNBaseUrl+"/ajax/utilities/online_status_full?callback=?",
     * function(data) { alert(onlineData: " + data.onlineData); } );
     */
};

OnlineStatus.getOnlineStatus = function() {
    new Ajax.Request('/ajax/utilities/online_status', {
        onComplete : function(transport) {
            
            setTimeout(function() {
                OnlineStatus.getOnlineStatus();
            }, 30000);
            
            oResponse = transport.responseJSON;
            
            if (oResponse == null || Object.isUndefined(oResponse.Status)
                    || oResponse.Status < 1) {
                return;
            }
            OnlineStatus.displayResult(oResponse.OnlineStatusHTML);
        }
    });
};

/* slides down an element */
OnlineStatus.moveDown = function(element) {
    new Effect.BlindUp(element, {
        duration : 1
    });
};

OnlineStatus.moveUpBox = function(element) {
    new Effect.BlindDown(element, {
        duration : 1
    });
};

OnlineStatus.Hidden = true;

/* slides down an element */
OnlineStatus.moveUp = function(element) {
    new Effect.BlindDown(element, {
        duration : 1
    });
    if (OnlineStatus.Hidden) {
        setTimeout(function() {
            /* element.style.visibility = 'visible'; */
            OnlineStatus.Hidden = false;
        }, 1000);
    }
};

OnlineStatus.displayResult = function(sResultHTML) {
    /* console.log(sResultHTML); */
    Element.update(OnlineStatus.Settings.ContainerId, sResultHTML);
    Element.show(OnlineStatus.Settings.ContainerId);
    
    OnlineStatus.moveUp($(OnlineStatus.Settings.ContainerId));
    
    setTimeout(function() {
        OnlineStatus.moveDown($(OnlineStatus.Settings.ContainerId));
    }, 10000);
};

OnlineStatus.displayResultFull = function(sResultHTML) {
    Element.update(OnlineStatus.Settings.ContainerIdFull, sResultHTML);
    Element.show(OnlineStatus.Settings.ContainerIdFull);
};

/* New so done in jquery */
OnlineStatus.displayResultFullJ = function(sOnlineData) {
    
    // alert(sOnlineData.online);
    
    $j('#' + OnlineStatus.Settings.ContainerIdFull).empty();
    
    $iCount = 0;
    $j.each(sOnlineData.online, function(i, val) {
        $iCount++;
        
        $j('#' + OnlineStatus.Settings.ContainerIdFull).show();
        $j('#' + OnlineStatus.Settings.ContainerIdFull).append(
            "<div class='header'>" + sOnlineData.titles[i] + "</div>");
        
        if ($iCount == 1) {
            $j('div.header').attr('id', 'box_header');
        }
        ;
        
        $j.each(val,
            function(i, oOperatorData) {
                
                $j('#' + OnlineStatus.Settings.ContainerIdFull).append(
                    "<div id='online_box_full_" + oOperatorData.op_id
                            + "' class='box_style'></div>");
                
                $j("#online_box_full_" + oOperatorData.op_id).click(
                    function() {
                        window.location = sOnlineData.operator_page_url + "/"
                                + oOperatorData.pname;
                    });
                
                oContentDiv = $j("<div class='content'></div>");
                
                sImage = "<img class='image' src='" + sOnlineData.assets
                        + oOperatorData.picture + "' alt='' />";
                oStatusSpan = $j("<span class='icons " + oOperatorData.status
                        + "'></span>");
                oTextDiv = $j("<div class='text'>" + oOperatorData.pname
                        + "</div>");
                
                oContentDiv.append(sImage);
                oContentDiv.append(oStatusSpan);
                oContentDiv.append(oTextDiv);
                oContentDiv.append("<div class='clearb'>");
                
                $j("#online_box_full_" + oOperatorData.op_id).append(
                    oContentDiv);
            });
    });
};