/**
 * This array will be populated for each product as $product_list_thumb[$product_id] = array('nterval' => setInterval,  'number' => '2');
 */
var $product_list_thumb = new Array();

/**
 * This function will start the roll over function that displays the multiple images for a product
 * @param The Number of the current image (1 for the first, 2 for the second)
 */
function product_list_thumb_start($product_id, $element_id){
    // If there isn't an array set for this product in the list yet, set one with the element_id
    if(!$product_list_thumb[$product_id]){ $product_list_thumb[$product_id] = new Array(); $product_list_thumb[$product_id]['element_id'] = $element_id; }

    // Calling this function for the first time
    product_list_thumb_request($product_id);

    // Creating the Interval for this product
    $product_list_thumb[$product_id]['interval'] = setInterval( function(){ product_list_thumb_request($product_id); }, 1000);
}

/**
 * This function will request the next image for the {@link product_list_thumb_start} function
 * @param The ID of the product we need to count
 */
function product_list_thumb_request($product_id){
    // If there is no number set for this product, make it one
    if(!$product_list_thumb[$product_id]['number']) $product_list_thumb[$product_id]['number'] = 1;

    // Making the Ajax Call
    var params = new Array();
    params[0] = $product_id;
    params[1] = $product_list_thumb[$product_id]['number'];
    var json = new JSON;
    json.request('product_list_thumb', params, product_list_thumb_callback);
}

/**
 * This function will replace the products thumbnail image and set the current image variable for this product for the {@link product_list_thumb_request} function
 */
function product_list_thumb_callback($responce){
    // Writing the src to the product image
    $($product_list_thumb[$responce['product_id']]['element_id']).src = $responce['src'];

    // Determining if this should keep going (should only not if there is only one image)
    $product_list_thumb[$responce['product_id']]['number'] = $responce['number'];

    // if($product_list_thumb[$responce['product_id']]['number'] == $responce['number'])
}

/**
 * This function will stop the Interval for a specific products rotating thumbnails
 * @param The HTML element that will have the display text set into it
 */
function product_list_thumb_stop($product_id){
    // This removes the Interval completely
    clearInterval($product_list_thumb[$product_id]['interval']);
    $product_list_thumb[$product_id]['interval'] = null;
}

/**
 * This function provides the AJAX call for a user to vote for a product
 * @param integer The product ID
 * @param HTLMElement The element whose ID will be returned 
 * @param altImage The image that will replace the current one if there is a success
 */
function vucd_vote($product_id, $htmlElement, $altImage){
    var params = new Array();
    params[0] = $product_id;
    params[1] = $htmlElement.id;
    params[2] = $altImage;
    var json = new JSON;
    json.request('vucd_vote', params, vucd_vote_callback);
}
/**
 * Call back for vucd_vote
 */ 
function vucd_vote_callback($responce){
    if($responce['sucess']){
        $htmlElement = $($responce['htmlElement']);
        $htmlElement.src = $responce['altImage'];
        $htmlElement.style.cursor = "default";
        $htmlElement.title = "You have already voted for this product.";
        $htmlElement.onclick = null;
    }else{
        alert($responce['error']);
    }
}

/**
 * This array is here to hold all the active animation_slide_y targets.
 * The target is the pixle value as a integer. 
 */ 
var animation_slide_y_targets = new Array();
/**
 * This array holds all the setInterval IDs so that they can be cleared based on the elements ID
 */ 
var animation_slide_y_intervals = new Array();
/**
 * This function actuly starts the div slide animation.
 * It clears any existing Intervals for this elements ID. 
 * Then it invokes the {@link animation_slide_y_step()} function as a Interval.
 */ 
function animation_slide_y($element, $target){
    animation_slide_y_targets[$element.id] = $target;
    window.clearInterval(animation_slide_y_intervals[$element.id]);
    animation_slide_y_intervals[$element.id] == false;
    animation_slide_y_intervals[$element.id] = setInterval(function(){ animation_slide_y_step($element); }, 50);
}
/**
 * This function preforms each step as a Interval set by {@link animation_slide_y()}.
 * It only stops once its reached its goal (Stored in animation_slide_y_targets[$element.id]) .
 * Once its complete will either become display none, or height 100%.
 * In order to deal with the height 100% in IE some elements will need to be places in table cells.
 */ 
function animation_slide_y_step($element){
    var curY = ($element.style.top.slice(0,-2))*1;
    var diff = animation_slide_y_targets[$element.id]-curY;
    var step = Math.round((diff)/5);
    if(step != 0 ){
        $element.style.top = (curY+step)+'px';
    }else{
        $element.style.top = animation_slide_y_targets[$element.id]+'px';
        window.clearInterval(animation_slide_y_intervals[$element.id]);
        animation_slide_y_intervals[$element.id] = false;
    }
}

/**
 * This function opens a popup window for a image enlarge (specific for design diva)
 */ 
function DD_enlarge_popUp(URL) {
    window.open(URL, 'productEnlarge', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=770,height=600');
}