/**
 * Fonts
 * By Raphael Rouvinov-Kats
 * This program displays browser safe fonts that almost every web surfer will have, 
 * based on this list: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
 * 
 * Note: If running from a mac change the line 
 *  fonts = windowsFonts; to 
 *  fonts = macFonts;
 * 
 * The standard KhanAcademy font is "sans-serif"
 * */

var windowsFonts = ["sans-serif", "serif", "monospace", "fantasy", "cursive", "arial", "arial black", "comic sans ms", "Courier New", "Georgia", "Impact", "Lucida Console", "Lucida Sans Unicode", "Palatino Linotype", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana", "Symbol", "Webdings", "Wingdings", "MS Sans Serif", "MS Serif"];

var macFonts = ["sans-serif", "serif", "monospace", "fantasy", "cursive", "arial", "arial black", "comic sans ms", "Courier New", "Georgia", "Impact", "Monaco", "Lucida Grande", "Book Antiqua", "Geneva", "Times New Roman", "Trebuchet MS", "Verdana", "Symbol", "Webdings", "Zapf Dingbats", "Geneva", "New York"];

var fonts = windowsFonts;

var fontColor = color(0, 0, 0);
var fontSize = 36;
var scrollSpeed = 10;

// scroll box variables
var boxX = 350;
var boxW = 40;
var boxH = 40;
var upBoxY = 20;
var downBoxY = 80;
var upBoxColor = color(0, 100, 0, 100);
var upBoxHoverColor = color(0, 100, 0, 150);
var upBoxPressedColor = color(0, 100, 0, 200);
var downBoxColor = color(100, 0, 0, 100);
var downBoxHoverColor = color(100, 0, 0, 150);
var downBoxPressedColor = color(100, 0, 0, 200);
var arrowColor = color(0, 0, 0, 200);

var yOffset = 0;
var overUpArrow = false;
var overDownArrow = false;

var drawText = function(font, x, y) {
    var f = createFont(font);
    textFont(f, fontSize);
    text(font, x, y);
};

var draw = function() {
    background(255, 255, 255);
    
    // draw fonts
    fill(fontColor);
    for(var font = 0; font < fonts.length; font++) {
        var fontName = fonts[font];
        drawText(fontName, 10, 30 + font * fontSize + yOffset);
    }
    
    // check if you're over the up/down arrows
    overUpArrow = false;
    overDownArrow = false;
    if(mouseX>=boxX && mouseX<=boxX+boxW && mouseY>=upBoxY && mouseY<=downBoxY+boxH) {
        if(mouseY <= upBoxY + boxH) {
            overUpArrow = true;
        } else if(mouseY >= downBoxY) {
            overDownArrow = true;
        }
    }
    
    // draw up arrow
    noStroke();
    fill(upBoxColor);
    if(overUpArrow) {
        fill(upBoxHoverColor);
        if(mouseIsPressed) {
            fill(upBoxPressedColor);
        }
    }
    rect(boxX, upBoxY, boxW, boxH); // box
    fill(arrowColor);
    rect(boxX + boxW*3/8, upBoxY+boxH/2, boxW/4, boxH*3/8); // arrow base
    triangle(boxX + boxW/8,   upBoxY + boxH/2, // arrow head
             boxX + boxW*7/8, upBoxY + boxH/2, 
             boxX + boxW/2,   upBoxY + boxH/8);
    
    // draw down arrow
    noStroke();
    fill(downBoxColor);
    if(overDownArrow) {
        fill(downBoxHoverColor);
        if(mouseIsPressed) {
            fill(downBoxPressedColor);
        }
    }
    rect(boxX, downBoxY, boxW, boxH); // box
    fill(arrowColor);
    rect(boxX + boxW*3/8, downBoxY + boxH/2-15, boxW/4, boxH*3/8); // arrow base
    triangle(boxX + boxW/8,   downBoxY + boxH/2, // arrow head
             boxX + boxW*7/8, downBoxY + boxH/2, 
             boxX + boxW/2,   downBoxY + boxH*7/8);
   
    // scroll
    if(mouseIsPressed) {
        if(overUpArrow) {
            yOffset += scrollSpeed;
        } else if(overDownArrow) {
            yOffset -= scrollSpeed;
        }
    }
};