if (typeof OnpageUtil == "undefined") {
    var OnpageUtil = {
        random: function(){
            return Math.floor(Math.random() * 1000000 + 1);
        },
        bindEvent: function(functionPoint, bindObject){
            return function(event){
                return functionPoint.call(bindObject, window.event ? window.event : event)
            }
        },
        getWindowSize: function(){
            var size;
            if (window.opera) {
                size = {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            }
            else 
                if (document.childNodes && !document.all && !navigator.taintEnabled && !window.xpath) {
                    size = {
                        width: window.innerWidth,
                        height: window.innerHeight
                    }
                }
                else {
                    var clientHeight = (document.documentElement.clientHeight && document.documentElement.clientHeight < document.body.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
                    var clientWidth = (document.documentElement.clientWidth && document.documentElement.clientWidth < document.body.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth;
                    size = {
                        width: clientWidth - (window.pageXOffset || 0),
                        height: clientHeight - (window.pageYOffset || 0)
                    }
                }
            
            return size;
            
        },
        createContent: function(menu){
            var serviceDomain = this.getServiceDomain();
            var content;
            //  dyna generate content
            if (menu.options.sid)
            {	
            	var width;
            	var height;
            	var theme;
            	if(typeof menu.options.theme == "undefined" || "default" == menu.options.theme || "" == menu.options.theme){
            		width = menu.options.menuWidth;
            		height = menu.options.menuHeight;
            		theme = "default";
            	}else{
            		theme = menu.options.theme;
            		
            		if(typeof menu.options.width == "undefined" || "" == menu.options.width){
            			width = menu.options.theme1Width;
            		}else{
            			width = menu.options.width;
            		}
            		if(typeof menu.options.height == "undefined" || "" == menu.options.height){
            			height = menu.options.theme1Height;
            		}else{
            			height = menu.options.height;
            		}
            		
            	}
            
                content = "<script type='text/javascript' src='http://"+serviceDomain+"/api/showmenu/"+width+"/"+height+"/"+theme+"/"+menu.options.sid+".js'></script>";
            }
            else
            {
            	content = "Invalid Arguments: invalid sid provided.";
            }
            
            return content;
        },
        addEvent: function(target, eventType, functionPoint){
            if (target.addEventListener) {
                target.addEventListener(eventType, functionPoint, false);
            }
            else {
                target.attachEvent("on" + eventType, functionPoint);
            }
            return target;
        },
        setOptions: function(object, settings){
            for (var i in settings) {
                object[i] = settings[i]
            }
            return object;
        },
        getServiceParams: function(serviceArray, serviceName){
            if (serviceArray && serviceArray instanceof Array) {
                var tmp = [];
                for (var i = 0; i < serviceArray.length; i++) {
                    tmp.push(i + '=' + serviceArray[i]);
                }
                return '&' + serviceName + '=' + encodeURIComponent(tmp.join('&'));
            }
            else {
                return '';
            }
        },
        getServiceDomain: function(){
        	return 'www.spinletslab.com';
        }
    }
}

if (typeof $Onpage == "undefined") {
    var $Onpage = new Onpage();
}

function Onpage(){
}

Onpage.prototype.ShowMenu = function(settings){
    var menu = new Menu(settings);
    menu.show();
    
    return menu;
}

Onpage.prototype.ShowButton = function(settings){
    return new Button(settings);
}

Onpage.prototype.CreateMenu = function(settings){
    var errorMessage = 'Incorrect Onpage Usage: ' + 'If you use actionElement then you need to ensure that the setting is correct.';
    var actionElement = document.getElementById(settings.actionElement);
    
    if (!settings.actionElement || '' == settings.actionElement) {
        return new Menu(settings);
    }
    else
        if (!actionElement) 
        {
            return {
                error: errorMessage,
                toggle: function()
                {
                    alert(this.error);
                    return false;
                },
                show: function()
                {
                    alert(this.error);
                    return false;
                },
                hide: function()
                {
                    alert(this.error);
                    return false;
                }
            };

        }
        else 
            if (actionElement) 
            {
                return new Button(settings);
            }
    
    return false;
}



function Menu(settings){
    this.options = OnpageUtil.setOptions({
        menuWidth: 160,
        menuHeight: 270,
        theme1Width: 488,
        theme1Height: 323
    }, settings);
    
    // add begin ---------------------
    
    this.menuId = "SPLT_MENU_"+settings.sid;
    var flashContent = OnpageUtil.createContent(this);
    var code = "<div id='"+this.menuId+"' style='z-index: 1001'>"+flashContent+"</div>";
    this.flashCode = code;
    // add end   ---------------------
    //this.flashElement = document.createElement("DIV");
    //this.flashElement.innerHTML = OnpageUtil.createContent(this);
    //this.flashElement.style.position = 'absolute';
    //this.flashElement.style.zIndex = "1001";
    
    this.isAppend = false;
    this.display = false;
}

Menu.prototype.show = function(){
    if (document.getElementById(this.options.actionElement)) {
        this.setPosition(document.getElementById(this.options.actionElement));
    }
    if (!this.isAppend) {
        // document.body.appendChild(this.flashElement);
    	// add begin ---------------------
    	document.write(this.flashCode);
    	// add end   ---------------------
        this.isAppend = true;
    }
    // document.getElementById(this.menuId).style.marginTop = "0";
    document.getElementById(this.menuId).style.display = "block";
    // this.flashElement.style.marginTop = "0pt";
    this.display = true;
}

Menu.prototype.hide = function(){
    // this.flashElement.style.marginTop = "-1000000px";
	// document.getElementById(this.menuId).style.display = "-1000000000px";
	document.getElementById(this.menuId).style.display = "none";
    this.display = false;
}

Menu.prototype.toggle = function(){
    this.display ? this.hide() : this.show();
}

Menu.prototype.setPosition = function(actionElement){
    var firstDiv = actionElement;
    if (firstDiv.parentNode === null || firstDiv.style.display == 'none') {
        return false;
    }
    
    var box = firstDiv.getBoundingClientRect();
    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    
    document.getElementById(this.menuId).style.left = ((box.left + scrollLeft + this.options.menuWidth) > OnpageUtil.getWindowSize().width ? box.left + scrollLeft - this.options.menuWidth + firstDiv.offsetWidth : box.left + scrollLeft) + 'px';
    document.getElementById(this.menuId).style.top = (box.top + scrollTop + firstDiv.offsetHeight) + 'px';
    
    return true;
}



function Button(settings){
    this.options = OnpageUtil.setOptions({}, settings);
    if (document.getElementById(this.options.actionElement)) {
        this.Button = document.getElementById(this.options.actionElement);
    }
    else {
        this.createButton();
    }
    
    settings.actionElement = this.Button.id;
    this.Menu = new Menu(settings);
    
    OnpageUtil.addEvent(this.Button, "click", OnpageUtil.bindEvent(this.Menu.toggle, this.Menu));
}

Button.prototype.createButton = function(){
    var buttonId = "button" + OnpageUtil.random();
    var buttonContent = "<img id=\"" + buttonId + "\"  src=\"http://" + OnpageUtil.getServiceDomain() + "/img/api/geddit-button-off.png\" />";
    
    // var div = document.createElement("DIV");
    // div.innerHTML = buttonContent;
    // document.body.appendChild(div);
    
    // add begin------------
    
    var buttonCode = "<div >"+buttonContent+"</div>";
    
    document.write(buttonCode);
    
    // add end------------
    
    
    
    this.Button = document.getElementById(buttonId);
    
    this.addEvents();
}

Button.prototype.addEvents = function(){
    OnpageUtil.addEvent(this.Button, "mouseover", OnpageUtil.bindEvent(this.onMouseover, this));
    OnpageUtil.addEvent(this.Button, "mouseout", OnpageUtil.bindEvent(this.onMouseout, this));
    OnpageUtil.addEvent(this.Button, "mousedown", OnpageUtil.bindEvent(this.onDown, this))
}

Button.prototype.onMouseover = function(){
    if (this.Menu.display) {
        this.Button.src = "http://" + OnpageUtil.getServiceDomain() + "/img/api/close-geddit-rollover.png";
    }
    else {
        this.Button.src = "http://" + OnpageUtil.getServiceDomain() + "/img/api/geddit-button-rollover.png";
    }
}

Button.prototype.onMouseout = function(){
    if (this.Menu.display) {
        this.Button.src = "http://" + OnpageUtil.getServiceDomain() + "/img/api/close-geddit-off.png";
    }
    else {
        this.Button.src = "http://" + OnpageUtil.getServiceDomain() + "/img/api/geddit-button-off.png";
    }
}

Button.prototype.onDown = function(){
    if (this.Menu.display) {
        this.Button.src = "http://" + OnpageUtil.getServiceDomain() + "/img/api/geddit-button-rollover.png";
    }
    else {
        this.Button.src = "http://" + OnpageUtil.getServiceDomain() + "/img/api/close-geddit-rollover.png";
    }
}