var petStyles = {
    threeColumn : [
        {
            preview: 'simple-purple-3.jpg',
            name: 'Standard Purple',
            number: 4
        },
        {
            preview: 'simple-green-3.jpg',
            name: 'Simple Green',
            number: 5
        },
        {
            preview: 'adopt-dog-3.jpg',
            name: 'Adopt a Dog',
            number: 6
        },
        {
            preview: 'adopt-cat-3.jpg',
            name: 'Adopt A Cat',
            number: 7
        },
        {
            preview: 'best-frienda-3.jpg',
            name: 'Best Friend (Green)',
            number: 8
        },
        {
            preview: 'best-friendb-3.jpg',
            name: 'Best Friend (Purple)',
            number: 9
        }
    ],
    fourColumn : [
        {
            preview: 'simple-purple-4.jpg',
            name: 'Standard Purple',
            number: 10
        },
        {
            preview: 'simple-green-4.jpg',
            name: 'Simple Green',
            number: 11
        },
        {
            preview: 'adopt-dog-4.jpg',
            name: 'Adopt a Dog',
            number: 12
        },
        {
            preview: 'adopt-cat-4.jpg',
            name: 'Adopt A Cat',
            number: 13
        },
        {
            preview: 'best-frienda-4.jpg',
            name: 'Best Friend (Green)',
            number: 14
        },
        {
            preview: 'best-friendb-4.jpg',
            name: 'Best Friend (Purple)',
            number: 15
        }
    ],
    horizontal : [
        {
            preview: 'horizontal-simple-purple.jpg',
            name: 'Standard Purple',
            number: 16
        },
        {
            preview: 'horizontal-best-friend-a.jpg',
            name: 'Best Friend (Green 1)',
            number: 17
        },
        {
            preview: 'horizontal-adopt-a.jpg',
            name: 'Best Friend (Green 2)',
            number: 20
        },
        {
            preview: 'horizontal-best-friend-b.jpg',
            name: 'Best Friend (Dog)',
            number: 18
        },
        {
            preview: 'horizontal-best-friend-c.jpg',
            name: 'Best Friend (Cat)',
            number: 19
        },
        {
            preview: 'horizontal-adopt-b.jpg',
            name: 'Best Friend (Purple)',
            number: 21
        }
    ]
}
var format1Id = 'format1';
var format2Id = 'format2';
var format3Id = 'format3';
var previewId = 'preview_img';
var styleSelectId = 'banner-style';
var preloadDivId = 'preload-area';
var previewDivId = 'pet_list_preview';
var previewBoxId = 'preview_box';
var keyId = 'scroller_key';
var defaultScrollerTitleId = 'scroller_title';
var statusId = 'status';

function updateStyleSelect(styles) {

    // remove all options from the select tag
    var len = document.getElementById(styleSelectId).length;
    for( i = 0; i < len; i++ ) {
        document.getElementById(styleSelectId).remove(0);
    }
           
    // add options using the json object
    var style = 0;
    var i = 0;
    for( style in styles ) {
        styleObj = styles[style];
        document.getElementById(styleSelectId).options[i] = new Option(styleObj.name, styleObj.number);
        i++;
    }
    
    document.getElementById(styleSelectId).selectedIndex = 0;
    document.getElementById(styleSelectId).focus();
}
        
// updates the contents of the select box on the pet list scroller page
function refreshStyle(baseUrlImages) {
    if (document.getElementById(format1Id).checked) {
        updateStyleSelect(petStyles.threeColumn);
    }
    else if (document.getElementById(format2Id).checked) {
        updateStyleSelect(petStyles.fourColumn);
    }
    else {
        updateStyleSelect(petStyles.horizontal);
    }
    updateStylePreview(baseUrlImages);
}

// updates the preview graphic on the pet list scroller page
function updateStylePreview(baseUrlImages) {

    var scrollerStyles = 0;
    var styleSelect = document.getElementById(styleSelectId);
    var scrollerStyle = styleSelect.options[styleSelect.selectedIndex].value;
    
    if (document.getElementById(format1Id).checked) {
        scrollerStyles = petStyles.threeColumn;
    }
    else if (document.getElementById(format2Id).checked) {
        scrollerStyles = petStyles.fourColumn;
    }
    else {
        scrollerStyles = petStyles.horizontal;
    }
    
    for(styleIndex in scrollerStyles) {
        style = scrollerStyles[styleIndex];
        if (scrollerStyle == style.number) {
            document.getElementById(previewId).src = baseUrlImages + 'petlist/samples/' + style.preview;
            break;
        }
    }
}

// puts all of the preview images in a hidden div so the browser will load them early and 
// the style preview image update will appear sharper
function preloadImages(baseUrlImages) {
    var preloadDiv = document.getElementById(preloadDivId);
    
    for(format in petStyles) {
        for(style in petStyles[format]) {
            preloadDiv.innerHTML += '<img src="' + baseUrlImages + 'petlist/samples/' + petStyles[format][style].preview + '" alt="" />';
        }
    }
}

function checkForm() {
    // user must enter at least one shelter ID
    if (document.scroller.shelter.value.length<4) {
      alert("Please enter a Petfinder Shelter ID.");
      document.scroller.shelter.focus();
      return false; 
    }
    
    // user must enter a valid email address
    var emailString = new String(document.scroller.email.value);
    if(!emailString.match(/^[^@]+@([-\w]+\.)+[A-Za-z]{2,4}$/)) {
        alert("You must enter a valid email address for yourself.");
         document.scroller.email.focus();
         return false;
    }
    
    // user must enter the web site where they're putting the scroller
    if (document.scroller.website.value.length<6) {
        alert("Please tell us the website where you are placing your scroller!");
        document.scroller.website.focus();
        return false; 
    }
    return true;
}

// form validation
function checkScrollerGeneratorForm(baseUrl) {
    if (!checkForm()) {
        return false;
    }
    generateScrollerCode(baseUrl);
    return false;
}

function generateScrollerCode(baseUrl) {
    // todo: call an AJAX function to generate the random key and log the user's request
    var email   = document.getElementById('email').value;
    var website = document.getElementById('website').value;
    var notify  = (document.getElementById('notify').checked) ? document.getElementById('notify').value : 0;
    var name    = document.getElementById('name').value;
	
    var url = baseUrl + "common/ajax/generate-scroller-key.cgi?email=" + email + "&amp;website=" + website + "&amp;notify=" + notify + "&amp;name=" + name;

    var request = createXMLHttpRequest();
    request.open( "GET", url, true );
    request.onreadystatechange = function() {
        if (request.readyState != 4)  { return; }
        var randomKey = "abc";
        try {
            var keyObj = eval( '(' + request.responseText + ')' );
            randomKey = keyObj.scrollerkey;
        } catch(e) {}
        var shelter = document.getElementById('shelter').value;
		var shelter = shelter.replace(" ", "");
        var status  = document.getElementById('status').value;
        var age     = document.getElementById('age').value;
		var limit   = document.getElementById('limit').value;
		var offset  = document.getElementById('offset').value;
        var animal  = document.getElementById('animal').value;
        var title   = document.getElementById('title').value;
        var height  = document.getElementById('height').value;
        var style   = document.getElementById(styleSelectId).options[document.getElementById(styleSelectId).selectedIndex].value;
        var format = 1;
        if (document.getElementById(format2Id).checked) {
            format = 2;
        }
        else if (document.getElementById(format3Id).checked) {
            format = 3;
        }

        code = getScrollerCode(shelter.toUpperCase(), status, age, limit, offset, animal, title, height, style, format, randomKey);
        codeObj = document.getElementById('generated_code');
        
        // don't use innerHTML - innerHTML within a textarea won't work in Opera
        codeObj.value = unescapeHTML(code);
    };
    request.send(null);
}

function openScrollerPreview(baseUrl) {

    // require form info to generate the key
    if (!checkForm()) {
        return false;
    }
	
    var url = "/tools/petlist/index.cgi?preview=1";
    var boxWidth = 585;
    if (document.getElementById(format2Id).checked || document.getElementById(format3Id).checked) {
        boxWidth = 785;
    }

    newwin = window.open(url,'ScrollerPreviewWindow','top=150,left=150,width='+boxWidth+',height=585,scrollbars=yes,resize=yes');
    setTimeout('showScrollerCode(newwin);', 2000);

    // bring the new window to the front, just in case it was opened earlier and it's hidden
    if (window.focus) {
        newwin.focus();
    }    
    logUser(baseUrl);
}

function showScrollerCode(newwin) {
    var shelter = document.getElementById('shelter').value;
	var shelter = shelter.replace(" ", "");
    var status  = document.getElementById('status').value;
    var age     = document.getElementById('age').value;
	var limit   = document.getElementById('limit').value;
	var offset  = document.getElementById('offset').value;
    var animal  = document.getElementById('animal').value;
    var title   = document.getElementById('title').value;
    var height  = document.getElementById('height').value;
    var style   = document.getElementById(styleSelectId).options[document.getElementById(styleSelectId).selectedIndex].value;
    var randomKey = 0;
    
    var format = 1;
    var boxWidth = 520;
    if (document.getElementById(format2Id).checked) {
        format = 2;
        boxWidth = 720;
    }
    else if (document.getElementById(format3Id).checked) {
        format = 3;
        boxWidth = 720;
    }
    
    code = getScrollerCode(shelter.toUpperCase(), status, age, limit, offset, animal, title, height, style, format, randomKey);
    code = code.replace(/\n/g, " ");
    
    if (boxWidth == 720) {
        newwin.document.getElementById(previewBoxId).className = 'wide_box';
    }
    newwin.document.getElementById(previewDivId).innerHTML = unescapeHTML(code);
}

function getScrollerCode(shelter, status, age, limit, offset, animal, title, height, style, format, randomKey) {
    var width = 700;
    if (format == 1) { // threeColumn
        width=500;
    }
    else { // format: 2 - fourColumn or format: 3 - horizontal
        width=700;
    }
	if (limit > 1) {
		var limit = "&amp;amp;limit=" + limit;
		var offset = "&amp;amp;offset=" + offset;
	}
	else {
		var limit = "";
        var offset = "";
	}
		
    var str = '&lt;iframe style="width: ' + width + 'px; height: ' + height + 'px; margin: 0;"' + " " + 'src="http://fpm.petfinder.com/petlist/petlist.cgi?shelter=' + shelter + '&amp;amp;status=' + status + '&amp;amp;age=' + age + limit + offset + '&amp;amp;animal=' + animal + '&amp;amp;title=' + title +  '&amp;amp;style=' + style + '&amp;amp;ref=' + randomKey + '"' + " " + 'width="' + width + 'px" height="' + height + 'px" hspace="0" vspace="0" ' + " " + 'frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" bordercolor="#000000"&gt;&lt;/iframe&gt;';
    return str;
}

function logUser(baseUrl) {
    var email   = document.getElementById('email').value;
    var website = document.getElementById('website').value;
    var notify  = (document.getElementById('notify').checked) ? document.getElementById('notify').value : 0;
    var name    = document.getElementById('name').value;
	
    var url = baseUrl + "common/ajax/generate-scroller-key.cgi?email=" + email + "&amp;website=" + website + "&amp;notify=" + notify + "&amp;name=" + name;

    var request = createXMLHttpRequest();
    request.open( "GET", url, true );
    request.onreadystatechange = function() {
        if (request.readyState != 4)  { return; }
        if (document.getElementById(keyId)) {
            document.getElementById(keyId).value = "received";
        }
    };
    request.send(null);
}

function escapeHTML(str) {
    str = str.replace(/&/g,'&amp;').
        replace(/>/g,'&gt;').
        replace(/</g,'&lt;');
    return str;
}

function unescapeHTML(str) {
    str = str.replace(/&amp;/g,'&').
        replace(/&gt;/g,'>').
        replace(/&lt;/g,'<');
    return str;
}

function updateDefaultScrollerTitle() {
    var status = document.getElementById(statusId).options[document.getElementById(statusId).selectedIndex].value;
    var defaultTitle = 'Pets from [your shelter name]';
    if (status == "A") {
        defaultTitle = 'Adoptable Pets from [your shelter name]';
    }
    else if (status == "H") {
        defaultTitle = 'Stray/Wait Pets from [your shelter name]';
    }
    else if (status == "X") {
        defaultTitle = 'Happy Tails from [your shelter name]';
    }
    document.getElementById(defaultScrollerTitleId).innerHTML = defaultTitle;
}