var frogsArray = new Array();


    function Frog(display) {
    
        this.id = getRandomInt(1, 4000);
        this.divId = this.id + "frog";
        this.top = getRandomInt(50, 500);
        this.left = getRandomInt(50, 500);
        this.color = getRandomInt(0, 9);
        this.editable = true;
        this.automatic = false;
        this.initialDelay = 0;
        this.repeatDelay = 0;
        this.persistBalloon = 1000;
        this.words = "Ribbit!";

        this.soundNumber = 1;
        this.colorName = "green";
        if (this.color >= 6 && this.color <= 8) {
            this.colorName = "blue";
        } else if (this.color == 9) {
            this.colorName = "pink";
            this.soundNumber = 2;
        }
    
        this.openMouthImage = "/images/frog_open_small_" + this.colorName + ".png";
        this.closedMouthImage = "/images/frog_closed_small_" + this.colorName + ".png";
        this.sound = "/sounds/frog_" + this.soundNumber + ".wav";

        if (display) {
            this.addToPage();
        }
        
    }
    
    Frog.prototype.addToPage = function() {

        document.body.appendChild(this.getDiv());
        document.body.appendChild(this.getSpeechDiv());
        document.body.appendChild(this.getSoundSpan());
        
        if (this.automatic && this.initialDelay > 0) {
            window.setTimeout("speak(" + this.id + ")", this.initialDelay);
        }

    }
    
    Frog.prototype.reset = function() {

        var x = document.getElementById(this.divId);
        x.innerHTML = this.getImageHTML() + this.getFormHTML();

        if (this.automatic && this.initialDelay > 0) {
            window.setTimeout("speak(" + this.id + ")", this.initialDelay);
        }
    
    }
    
    Frog.prototype.getOpenMouthImage = function() {
        return "/images/frog_open_small_" + this.colorName + ".png";
    }
        
    Frog.prototype.getClosedMouthImage = function() {
        return "/images/frog_closed_small_" + this.colorName + ".png";
    }
        
    Frog.prototype.getSound = function() {
        return "/sounds/frog_" + this.soundNumber + ".wav";
    }
        
    Frog.prototype.setWords = function(w) {
        
        this.words = w;
        var s = document.getElementById(this.divId + "_frogtalk");
        s.innerHTML = this.words;
        
    }
    
    Frog.prototype.setSoundNumber = function(n) {
        
        this.soundNumber = n;
        var rspan = document.getElementById(this.divId + "_soundcontainer");
        rspan.innerHTML = "<object type=\"audio-wav\" data=\"" + this.getSound() + "\" autostart=\"false\" width=\"0\" height=\"0\" id=\"" + this.divId + "_ribbit\" enablejavascript=\"true\"></object>";
        
    }
        
    Frog.prototype.setColor = function(c) {
        
        this.colorName = c;
        var p = document.getElementById(this.divId + "_pic");
        p.src = this.getClosedMouthImage();
        
    }
        
    Frog.prototype.ribbit = function() {
  
    	if (this.soundNumber == 1) {
    		frogSound1.play();
    	} else {
    		frogSound2.play();
    	}
    	
//        try {
//            var thissound = document.getElementById(this.divId + "_ribbit");
//            thissound.Play();
//        } catch (exceptione) {
//            // ignore
//        }
        
    }
    
    Frog.prototype.positionBalloon = function() {
      
        var e = document.getElementById(this.divId + "_pic");
        if (e) {
          
            var leftTail = false;
          
            var newTop = DL_GetElementTop(e) - 50;
            var newLeft = DL_GetElementLeft(e) - 200;
              
            if (newTop < 15) {
                newTop = 15;
            }
              
            if (newLeft < 15) {
                newLeft = (newLeft + 200) + 125;
                leftTail = true;
            }
              
            var t = document.getElementById(this.divId + "_btail");
            var c = document.getElementById(this.divId + "_bbottom");
            if (leftTail) {
                t.src = "/images/balloon_tail_left.gif";
                c.style.textAlign = "left";
            } else {
                t.src = "/images/balloon_tail_right.gif";
                c.style.textAlign = "right";
            }
              
            var s = document.getElementById(this.divId + "_speech");
            s.style.top = newTop + "px";
            s.style.left = newLeft + "px";
                
        }
      
    }
    
    Frog.prototype.openMouth = function() {
      
        this.positionBalloon();
          
        var s = document.getElementById(this.divId + "_speech");
        s.style.display = "block";
        var obj = document.getElementById(this.divId + "_pic");
        obj.src = this.getOpenMouthImage();
        window.setTimeout("frogsArray[" + this.id + "].closeMouth()", this.persistBalloon);
          
    }
    
    Frog.prototype.closeMouth = function() {
        
        var s = document.getElementById(this.divId + "_speech");
        s.style.display = "none";
        var obj = document.getElementById(this.divId + "_pic");
        obj.src = this.getClosedMouthImage();
        if (this.automatic && this.repeatDelay > 0) {
            window.setTimeout("speak(" + this.id + ")", this.repeatDelay);
        }
          
    }

    Frog.prototype.getImageHTML = function() {
      
        var s = "<img id=\"" + this.divId + "_pic\" ontouchmove=\"iphoneMove(event, '" + this.divId + "', " + this.id + ")\" onmousedown=\"dragStart(event, '" + this.divId + "', " + this.id + ")\" src=\"" + this.getClosedMouthImage() + "\" />";
        return s;
      
    }

    Frog.prototype.getFormHTML = function() {
      
        var s = "";
      
        s += "<form>";
        s += "<p style=\"text-align: center;\">";
        if (!this.automatic) {
            s += "<input type=\"button\" onclick=\"speak(" + this.id + ");\" value=\"Speak\" />";
        }
        if (this.editable) {
            s += "<input type=\"button\" onclick=\"editFrog(" + this.id + ");\" value=\"Edit\" />";
        }
        s += "</p>";
        s += "</form>";
        
          
        return s;
      
    }
    
    Frog.prototype.getDiv = function() {
    
        var newFrogDiv = document.createElement("div");
        newFrogDiv.id = this.divId;
        newFrogDiv.className = "frog";
        newFrogDiv.style.top = this.top + "px";
        newFrogDiv.style.left = this.left + "px";
          
        newFrogDiv.innerHTML = this.getImageHTML() + this.getFormHTML();
        
        return newFrogDiv;
    
    }
    
    Frog.prototype.getSpeechDiv = function() {
    
        var newSpeechDiv = document.createElement("div");
        newSpeechDiv.id = this.divId + "_speech";
        newSpeechDiv.className = "speech";
        newSpeechDiv.style.zIndex = 9999;
        newSpeechDiv.innerHTML = this.getBalloonHTML();
        
        return newSpeechDiv;
    
    }
    
    Frog.prototype.getSoundSpan = function() {
    
        var newSoundSpan = document.createElement("span");
        newSoundSpan.id = this.divId + "_soundcontainer";
        newSoundSpan.innerHTML = "<object data=\"" + this.getSound() + "\" autostart=\"false\" width=\"0\" height=\"0\" id=\"" + this.divId + "_ribbit\" enablejavascript=\"true\"></object>";
        
        return newSoundSpan;
    
    }
    
    Frog.prototype.getBalloonHTML = function() {
      
        var s = "<table width=\"200\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">";
        s += "<tr>";
        s += "<td class=\"topleft corner\"></td>"
        s += "<td class=\"top\"></td>";
        s += "<td class=\"topright corner\"></td>";
        s += "</tr>";
        s += "<tr>";
        s += "<td class=\"left\"></td>";
        s += "<td class=\"middle\"><p id=\"" + this.divId + "_frogtalk\" class=\"frogtalk\">" + this.words + "</p></td>";
        s += "<td class=\"right\"></td>";
        s += "</tr>";
        s += "<tr>";
        s += "<td class=\"bottomleft corner\"></td>";
        s += "<td id=\"" + this.divId + "_bbottom\" class=\"bottom\"><img id=\"" + this.divId + "_btail\" src=\"/images/balloon_tail_right.gif\" /></td>";
        s += "<td class=\"bottomright corner\"></td>";
        s += "</tr>";
        s += "</table>";
          
        return s;
      
    }
    
    Frog.prototype.updatePosition = function(t, l) {
    
        this.top = t.replace(/[^0-9]/g, "");
        this.left = l.replace(/[^0-9]/g, "");
        //this.save();
    
    }
    
    Frog.prototype.save = function() {
    
        var httpRequest = getHttpRequest();
        if (httpRequest) {
            var url = "http://www.amphibian.com/manageFrogs.do";
            httpRequest.onreadystatechange = function() { processResponse(httpRequest); };
            httpRequest.open('POST', url, true);
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            httpRequest.send("command=save&id=" + this.id + "&color=" + this.colorName +
                "&sound=" + this.soundNumber + "&words=" + escape(this.words) +
                "&x=" + this.top + "&y=" + this.left + "&automatic=" + this.automatic +
                "&initialDelay=" + this.initialDelay + "&repeatDelay=" + this.repeatDelay);
        }
    
    }

    Frog.prototype.remove = function() {

        var d = document.getElementById(this.divId);
        d.id = "";
        d.className = "";
        d.innerHTML = "";
        
        var b = document.getElementById(this.divId + "_speech");
        b.id = "";
        b.className = "";
        b.innerHTML = "";
        
        var s = document.getElementById(this.divId + "_soundcontainer");
        s.id = "";
        s.innerHTML = "";

        frogsArray[this.id] = null;
    
        var httpRequest = getHttpRequest();
        if (httpRequest) {
            var url = "http://www.amphibian.com/manageFrogs.do";
            httpRequest.onreadystatechange = function() { processResponse(httpRequest); };
            httpRequest.open('POST', url, true);
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            httpRequest.send("command=delete&id=" + this.id);
        }
    
    }



    function speak(id) {
        var frog = frogsArray[id];
        if (frog != null) {
            frog.ribbit();
            frog.openMouth();
        }
    }
      
      
    function addFrog() {
        var frog = new Frog(true);
        frogsArray[frog.id] = frog;
        //frog.save();
    }
      
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
      
    function loadFrogs() {
    
        var httpRequest = getHttpRequest();
        if (httpRequest) {
            var url = "http://www.amphibian.com/manageFrogs.do?command=loadAll";
            httpRequest.onreadystatechange = function() { processFrogs(httpRequest); };
            httpRequest.open('GET', url, true);
            httpRequest.send(null);
        }
    
    }
    
    function processFrogs(httpRequest) {
    
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {

                var xmldoc = httpRequest.responseXML;
                var rootNode = xmldoc.getElementsByTagName("frogs")[0];

                for (var i = 0; i < rootNode.childNodes.length; i++) {
                    
                    var frog = new Frog(false);
                    
                    var frogNode = rootNode.childNodes[i];

                    var x = frogNode.getAttribute("x");
                    var y = frogNode.getAttribute("y");
                    
                    frog.top = x;
                    frog.left = y;

                    var idNode = frogNode.getElementsByTagName("id")[0].firstChild;
                    if (idNode) {
                        frog.id = idNode.nodeValue;
                        frog.divId = frog.id + "frog";
                    }

                    var colorNode = frogNode.getElementsByTagName("color")[0].firstChild;
                    if (colorNode) {
                        frog.colorName = colorNode.nodeValue;
                    }
                    
                    var soundNode = frogNode.getElementsByTagName("sound")[0].firstChild;
                    if (soundNode) {
                        frog.soundNumber = soundNode.nodeValue;
                    }

                    var wordsNode = frogNode.getElementsByTagName("words")[0].firstChild;
                    if (wordsNode) {
                        frog.words = wordsNode.nodeValue;
                    }
                    
                    var editableNode = frogNode.getElementsByTagName("editable")[0].firstChild;
                    if (editableNode) {
                        if (editableNode.nodeValue != "true") {
                            frog.editable = false;
                        }
                    }
                    
                    var autoNode = frogNode.getElementsByTagName("automatic")[0].firstChild;
                    if (autoNode) {
                        if (autoNode.nodeValue != "false") {
                            frog.automatic = true;
                        }
                    }

                    var idelayNode = frogNode.getElementsByTagName("initialDelay")[0].firstChild;
                    if (idelayNode) {
                        frog.initialDelay = idelayNode.nodeValue;
                    }
                    
                    var rdelayNode = frogNode.getElementsByTagName("repeatDelay")[0].firstChild;
                    if (rdelayNode) {
                        frog.repeatDelay = rdelayNode.nodeValue;
                    }

                    if (!frogsArray[frog.id]) {
                        frogsArray[frog.id] = frog;
                        frog.addToPage();
                    }

                }

            } else {
                alert("There was a problem with the request!");
            }
        }
    
    }
    
    var nowEditing = -1;
    
    function positionEditor(frog) {
      
            var e = document.getElementById(frog.divId + "_pic");
            if (e) {
          
                var newTop = DL_GetElementTop(e) - 50;
                var newLeft = DL_GetElementLeft(e) - 200;
              
                if (newTop < 15) {
                    newTop = 15;
                }
              
                if (newLeft < 15) {
                    newLeft = (newLeft + 200) + 125;
                }
              
                var s = document.getElementById("frogEditor");
                s.style.top = newTop + "px";
                s.style.left = newLeft + "px";
                s.style.zIndex = 9999;
                
            }
      
        }

    function editFrog(id) {
    
        
        var frog = frogsArray[id];
        if (frog) {

            positionEditor(frog);
            var editor = document.getElementById("frogEditor");
            editor.style.display = "block";
        
            nowEditing = id;
        
            if (frog.colorName == "green") {
                var s = document.getElementById("colorSettingGreen");
                s.checked = true;
            } else if (frog.colorName == "blue") {
                var s = document.getElementById("colorSettingBlue");
                s.checked = true;
            } else if (frog.colorName == "pink") {
                var s = document.getElementById("colorSettingPink");
                s.checked = true;
            }
        
            if (frog.soundNumber == 1) {
                var s = document.getElementById("soundSetting1");
                s.checked = true;
            } else if (frog.soundNumber == 2) {
                var s = document.getElementById("soundSetting2");
                s.checked = true;
            }
        
            var w = document.getElementById("wordsSetting");
            w.value = frog.words;

            var as = document.getElementById("autoSetting");
            var ids = document.getElementById("initDelaySetting");
            var rs = document.getElementById("repeatSetting");

            if (frog.automatic) {
                as.checked = true;
            } else {
                as.checked = false;
            }
            
            ids.value = frog.initialDelay;
            rs.value = frog.repeatDelay;
            
        }
    
    
    }
    
    function removeFrog() {
    
        if (confirm("Are you sure you want to delete this frog?")) {
        
            var frog = frogsArray[nowEditing];
            if (frog) {
                frog.remove();
            }    
        
        }
        
        var editor = document.getElementById("frogEditor");
        editor.style.display = "none";
    
    }
    
    function saveSettings() {
    
        var frog = frogsArray[nowEditing];
        if (frog) {

            var scg = document.getElementById("colorSettingGreen");
            var scb = document.getElementById("colorSettingBlue");
            var scp = document.getElementById("colorSettingPink");
            
            var ss1 = document.getElementById("soundSetting1");
            var ss2 = document.getElementById("soundSetting2");
            
            var sw = document.getElementById("wordsSetting");

            var auto = document.getElementById("autoSetting");
            var ids = document.getElementById("initDelaySetting");
            var rs = document.getElementById("repeatSetting");
            
            if (scg.checked) {
                frog.setColor("green");
            } else if (scb.checked) {
                frog.setColor("blue");
            } else if (scp.checked) {
                frog.setColor("pink");
            }
            
            if (ss1.checked) {
                frog.setSoundNumber(1);
            } else if (ss2.checked) {
                frog.setSoundNumber(2);
            }
            
            frog.setWords(sw.value);

            frog.initialDelay = ids.value;
            frog.repeatDelay = rs.value;

            if (auto.checked) {
                if (!frog.automatic) {
                    frog.automatic = true;
                    frog.reset();
                }
            } else {
                if (frog.automatic) {
                    frog.automatic = false;
                    frog.reset();
                }
            }

            frog.save();

        }

        var editor = document.getElementById("frogEditor");
        editor.style.display = "none";
    
    }
    
    function cancelSettings() {

        var editor = document.getElementById("frogEditor");
        editor.style.display = "none";

    }
    
    function toggleDisplay(d, id) {
    
        var obj = document.getElementById(id);
        if (obj) {
            if (obj.style.display == "block") {
                obj.style.display = "none";
                d.style.backgroundImage = "url(/images/plus.gif)";
            } else {
                obj.style.display = "block";
                d.style.backgroundImage = "url(/images/minus.gif)";
            }
        }
    
    }