/*----------------------------------------------------------------*\
Name:   popup_manager.js
Date:   8/25/2009
Author: Jonathan Taylor

This script is used to:
    1. Move the pop-up product box
    2. Fill the product box with product specific info
    3. Display or hide the product box

Alternately the script can be used purely to show/hide a box
by sending a boolean value in place of the product_id.

Parameters:
    event           = um, the event that triggers the script
    container_id    = the outter element that surrounds the
                        pop-up window - it can be the same
                        as the content_id - the container
                        is toggled on and off
    content_id      = element that receives the AJAX data
    product_id      = specific id of the product whose info should be
                        displayed OR a boolean value to signify if
                        the box should be on or off
    state           = two letter upper-case state designation
    offset_x        = value to move target div by along x axis
    offset_y        = value to move target div by along y axis
   
                    
Possible future enhancements (yeah right, like that will happen)
would include turning this script into a JS Class, allowing for
alternate methods to populate data in the box, allowing for
on-the-fly changes to box style and display, etc.

Until then, it remains as it is.                    
\*----------------------------------------------------------------*/

/* 
manage_info_box and manage_product_box are two different interfaces using
the utility function below them.  once a few more cases are seen this
whole mess needs to be pushed into an object

manage_info_box:
    calling_elmement        = used to determine what type of element called
                            the pop-up, if it's a checkbox then looks
                            to see if it's checked or not.
    type                    = which doc type is needed
    state                   = which state is selected
    element_width           = used to determine positioning
*/

function findElementByClassName(class_name_to_find)
{
    elements = document.getElementsByTagName('*');
    for(i=0;i<elements.length;i++)
    {
        if(elements[i].className == class_name_to_find)
            return elements[i];
    }
    return false;
}

function manage_info_box(calling_element, container_id, content_id, type, state, element_width)
{
    element = document.getElementById(container_id);
    if(!hasValue(element))
    {
        container_id = findElementByClassName(container_id); 
        container_id = container_id.id;
        element = document.getElementById(container_id);
    }
    
    if(element === false) return;

    if(content_id === false || content_id === true)
    {
        if(content_id === false && IcanSeeYou(element))
        {
            display_element(element);
        }
        else if (content_id === true && !IcanSeeYou(element))
        {
            display_element(element);
        }
    }
    else if(calling_element.nodeName == "INPUT")
    {
        
        test_element = document.getElementById(content_id);
        if(!hasValue(test_element))
        {
            content_id = findElementByClassName(content_id); 
            content_id = content_id.id;
        }
        
        if(calling_element.checked === true)
        {
            page = "includes/" + state + "_" + type + "_notice.htm";
            ajax_fill_element(content_id,page);
            display_element(element);
            middle = findMiddle(element_width);
            element.style.left = middle + "px";
        }
    }
}

function manage_page_load_info(container_id,content_id,state,element_width)
{
    element = document.getElementById(container_id);
    if(!hasValue(element))
    {
        container_id = findElementByClassName(container_id); 
        container_id = container_id.id;
        element = document.getElementById(container_id);
        
        if(content_id != true && content_id != false)
        {
            content_id = findElementByClassName(content_id); 
            content_id = content_id.id;        
        }
    }    
    
    //alert(element);
    //alert(container_id);
    //alert(content_id);

    if(content_id === false || content_id === true)
    {
        if(content_id === false && IcanSeeYou(element))
        {
            display_element(element);
        }
        else if (content_id === true && !IcanSeeYou(element))
        {
            display_element(element);
        }
    }
    else
    {
        var states_with_notices = new Array();
        //states_with_notices[0] = "IL";
        //alert('here atleast' + state);
        for(i=0;i<states_with_notices.length;i++)
        {
            if(states_with_notices[i] == state)
            {
                //alert('found the state');
                page = "includes/" + state + "_notice.htm";
                ajax_fill_element(content_id,page);
                display_element(element);
                middle = findMiddle(element_width);
                element.style.left = middle + "px";            
            }
        }
    }
}

function manage_product_box(event,container_id,content_id,product_id,product_type,state,offset_x,offset_y)
{
    element = document.getElementById(container_id);
    if(!hasValue(element))
    {
        container_id = findElementByClassName(container_id); 
        container_id = container_id.id;
        element = document.getElementById(container_id);
        
        if(content_id != true && content_id != false)
        {
            content_id = findElementByClassName(content_id); 
            content_id = content_id.id;        
        }
    }        
    
    if(product_id === false || product_id === true)
    {
        if(product_id === false && IcanSeeYou(element))
        {
            display_element(element);
        }
        else if (product_id === true && !IcanSeeYou(element))
        {
            display_element(element);
        }
    }
    else
    {
        /*test to see if the box is visible, if not move and fill*/
        if(!IcanSeeYou(element)) 
        {
            /*fill box with product info from DB*/
            document.getElementById(content_id).innerHTML = "<b>Loading Product Description</b> <img src='images/ajax-loader-3.gif' />";
            
            page = "product_description.ashx";
            parameters = new Array("product_id",product_id,"state",state,"product_type",product_type);
            
            ajax_fill_element(content_id,page,parameters); 
            
            /*move element to cursor location*/
            temp_x = 50;
            temp_y = -150;
            if(hasValue(offset_x)) temp_x = offset_x;
            if(hasValue(offset_y)) temp_y = offset_y;
            move_element(element,(mouseX(event)+temp_x),(mouseY(event)+temp_y));  
        }   
         
        /*show/hide box*/
        display_element(element);  
    }
}

/*
this function calls the specified page along with a list of parameters 
and populates the indicated HTML element with the results

parameters is a simple array.  items in the array should be listed in
a key1, value1, key2, value2 ... pattern.
*/
function ajax_fill_element(box_id,page,parameters)
{
    var url = page + "?";
    if(hasValue(parameters)) {
    for(i=0;i<parameters.length;i = i + 2)
    {
        if(i === 0)
        {
            url += parameters[i] + "=" + parameters[i+1];
        }
        else
        {
            url += "&" + parameters[i] + "=" + parameters[i+1];
        }
    }
    }
    
    //alert(url);
    //return;

    http = new XMLHttpRequest();
    
    //product_id = 2014;
    //state = "KS";
   
    http.open('GET',url,true);
    http.onreadystatechange = 
        function() 
        {
            if(http.readyState == 4) 
            {
                if(http.responseText.indexOf('HTTP 404') != -1 || http.responseText.indexOf('The page cannot be found') != -1)
                {
                    //if the page doesn't exist it won't show up - which I guess is kinda obvious
                    var htmlResponse = " <html> ";
                    htmlResponse += " <head> ";
                    htmlResponse += " </head> ";
                    htmlResponse += " <body> ";                    
                    htmlResponse += " <div id='info_container' width='100%' style='float:right; padding:20px;'> ";
                    htmlResponse += " <table cellpadding='5' width='100%' cellspacing='0' border='0' id='info_table'> ";
                    htmlResponse += " <tr><td colspan='3' style='text-align:right'>Unable to locate requested page. <span class='close_button' onclick=\"manage_info_box(this,'product_box',false);\">close</span></td></tr> ";
                    htmlResponse += " </table> ";
                    htmlResponse += " </div> ";       
                    htmlResponse += " </body> ";
                    htmlResponse += " </html> ";         
                    document.getElementById(box_id).innerHTML = htmlResponse;
                }
                else
                {
                    document.getElementById(box_id).innerHTML = http.responseText;
                }
            }
        }
    http.send(null);
}

/*simple function to test a variable for value*/
function hasValue(var_to_test)
{
    if(typeof(var_to_test) === 'undefined' || var_to_test === null || var_to_test === "")
        return false;
    else
        return true;
}            

/*simple test of whether an element is hidden or not*/
function IcanSeeYou(element)
{
    returnValue = false;
    if(element.style.display === 'inline' || element.style.display === 'block') returnValue = true;
    if(element.style.visibility === 'visible') returnValue = true;
    return returnValue;
}

/*move an element to selected coordinates*/
function move_element(element,newX,newY)
{
    element.style.left = newX + "px";
    element.style.top = newY + "px";
}    

/*toggle element display*/
function display_element(element)
{
    /*change display of element*/
    if(IcanSeeYou(element))
    {
        element.style.display = 'none';
    }
    else
    {
        element.style.display = 'inline';
    }
}

/* there are a few extra values being found here incase we need them in the future */
function findMiddle(element_width)
{
    return_value = 0;
    scroll_value = 0;
    doc_width = 0;
    
    // first find if we're scrolled or not
    if(document.documentElement.scrollLeft)
        scroll_value = document.documentElement.scrollLeft;
    else
        scroll_value = document.body.scrollLeft;
    
    //next find overall size of document
    if (window.innerWidth || window.innerHeight)
    { 
        doc_width = window.innerWidth; 
        doc_height = window.innerHeight; 
    } 
    if (document.body.clientWidth || document.body.clientHeight)
    { 
        doc_width = document.body.clientWidth; 
        doc_height = document.body.clientHeight; 
    } 
    
    // now take half the scroll, add to half the doc width and we have the middle
    return_value = (scroll_value/2) + (doc_width/2) - (element_width/2);
    
    // test to make sure we're not passing a negative number back
    if(return_value < scroll_value) return scroll_value;
    return return_value;
}

/*find the x coordinate of the mouse*/
function mouseX(evt)
{
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}

/*find the y coordinate of the mouse*/
function mouseY(evt) 
{
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY + (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}