/***********************************
* dom.js
*
* Performs all of the non-AJAX DOM 
* manipulations such as visual effects.
*
* Created By eculver
* Created On 08/25/08
************************************/

var inlineLoginFormActive = 0;

/***********************************
* toggleInlineLoginForm 
*
* Makes use of the jQuery fadeIn/fadeOut
* effects to show and hide the 
* inline login form. 
************************************/
function toggleInlineLoginForm() {
    // do fade in - jQuery
    if(inlineLoginFormActive == 0) {
        // magic
        $('#inline-login').fadeIn("def");
        
        // reset state
        inlineLoginFormActive = 1;
        
        // set login form username field to have focus
        $('#inline-login-form')[0].username.focus();
    }
    
    // do fade out - jQuery
    else {
        // magic
        $('#inline-login').fadeOut("def");

        // reset state
        inlineLoginFormActive = 0;
    }
}

/***********************************
* toggleFeedbackForm 
*
* Makes use of the jQuery slideIn/slideOut
* effects to show and hide the 
* feedback-form. 
************************************/
function toggleFeedbackForm() {
    $('#feedback-form-container').slideToggle(1000);
}

/***********************************
* toggleProductCommentForm
*
* Makes use of the jQuery slideIn/slideOut
* effects to show and hide the 
* comment-form.
************************************/
function toggleProductCommentForm() {
    $('#comment-form-container').slideToggle(1000);
}

/***********************************
* toggleFAQ
*
* Makes use of the jQuery slideIn/slideOut
* effects to show and hide a given 
* FAQ.
* 
* @param faq_num - which faq to toggle
************************************/
function toggleFAQ(faq_num) {
    $('#faq' + faq_num).slideToggle(1000);
}

/***********************************
* toggleVisitorAgreementInfo
*
* Makes use of the jQuery slideIn/slideOut
* effects to show and hide the visitor
* agreement info
* 
* @param faq_num - which faq to toggle
************************************/
function toggleVisitorAgreementInfo() {
    $('#va-info').slideToggle(1000);
}

/***********************************
* toggleById
*
* Makes use of the jQuery slideIn/slideOut
* effects to show and hide an element by
* its id.
************************************/
function toggleById(id) {
    $('#' + id).slideToggle(1000);
}

/***********************************
* showAlert
*
* Shows a custom alert as a
* modal dialog window.
* 
* @param message - the alert to display
* @param callback - an optional callback method to execute after closing
************************************/
function showAlert(message, callback) {
    if(callback)
        var data = "message=" + message + "&callback=" + callback;
    else
        var data = "message=" + message;
        
    openModalWindow(WEBROOT + "/alert.php", data, "CoolProducts Alert");
}

/***********************************
* showLoginAlert
*
* Shows the login alert in a modal window.
************************************/
function showLoginAlert() {
    openModalWindow(WEBROOT + "/html/modal/loginAlert.htm", null, "CoolProducts Alert");
}

/***********************************
* showChangeEmailForm
*
* Shows the change email form as a
* modal dialog window.
************************************/
function showChangeEmailForm() {
    openModalWindow(WEBROOT + "/html/modal/changeEmailForm.htm", null, "Change Email");
}

/***********************************
* showChangePasswordForm
*
* Shows the change password form as a
* modal dialog window.
************************************/
function showChangePasswordForm() {
    openModalWindow(WEBROOT + "/html/modal/changePasswordForm.htm", null, "Change Password");
}

/***********************************
* showLoginForm
*
* Shows the login form as a
* modal dialog window.
************************************/
function showLoginForm() {
    openModalWindow(WEBROOT + "/html/modal/loginForm.htm", null, "Please Login");
}

/***********************************
* showTellAFriendForm
*
* Shows the tell a friend form as a
* modal dialog window.
************************************/
function showTellAFriendForm() {
    openModalWindow(WEBROOT + "/html/modal/tellAFriendForm.htm", null, "Tell A Friend");
}

/***********************************
* showFeedbackForm
*
* Shows the feedback form as a
* modal dialog window.
************************************/
function showFeedbackForm() {
    openModalWindow(WEBROOT + "/html/modal/feedbackForm.htm", null, "Give Feedback");
}

/***********************************
* showSendToAFriendForm
*
* Shows the send to a friend form as a
* modal dialog window.
************************************/
function showSendToAFriendForm() {
    openModalWindow(WEBROOT + "/html/modal/sendToAFriendForm.htm", null, "Send This Product To A Friend");
}

/***********************************
* showCategorySelection
*
* Slides the category selction control
* into view.
************************************/
function showCategorySelection() {
    // slide the category-selection control into view
    $('#category-selection').slideDown("normal");
    
    // reset the category-name field
    $('#category-name').html("<i>Please Select A Category Below</i>");
}

/***********************************
* showSubnav 
*
* Shows the appropriate subnav div
* and hides all others.
************************************/
function showSubnav(toShow, hoverE) {
    //showAlert("I will show " + toShow + " subnav");
    
    // hide all subnav divs
    $('.main-nav-lower, .main-nav-lower-active, .main-nav-lower-left, .main-nav-lower-left-active, .main-nav-lower-right, .main-nav-lower-right-active').css("display", "none");
    
    // show the one we want
    $('#' + toShow).css("display", "block");
    $('#' + toShow + '-left').css("display", "block");
    $('#' + toShow + '-right').css("display", "block");
}

/***********************************
* showProductToolbar
*
* Shows the product toolbar for a 
* given product
************************************/
function showProductToolbar(product_id) {
    //$('#toolbar-' + product_id).animate({ opacity: 1 }, 1000);
    $('#toolbar-' + product_id).css("visibility", "visible");
}

/***********************************
* hideProductToolbar
*
* Hides the product toolbar for a 
* given product
************************************/
function hideProductToolbar(product_id) {
    //$('#toolbar-' + product_id).animate({ opacity: 0 }, 1000);
    $('#toolbar-' + product_id).css("visibility", "hidden");
}

/***********************************
* restoreActiveSubnav 
*
* Restore's the appropriate, active
* subnav to view.
************************************/
function restoreActiveSubnav() {
    // hide all subnav divs
    $('.main-nav-lower, .main-nav-lower-active, .main-nav-lower-left, .main-nav-lower-left-active, .main-nav-lower-right, .main-nav-lower-right-active').css("display", "none");
        
    // show the ones with 'active' in the class name
    $('.main-nav-lower-left-active, .main-nav-lower-active, .main-nav-lower-right-active').css("display", "block");
}

/***********************************
* addProductComment 
*
* Adds a product comment element to the DOM.
* Fades the new product comment in above others.
************************************/
function addProductComment() {
    var comment_text = $('#comment-form')[0].comment.value;
    var comment_id = "new_comment" + Math.floor(Math.random()*101);
    
    // parse out the number of comments
    var comments_re = /Comments \(([0-9]+)\)/
    var match_array = comments_re.exec($('#comments_tab_title').html());
    var num_comments = parseInt(match_array[1]);
    
    // create the new comment element
    var comment_e = document.createElement("div");
    comment_e.setAttribute("id", comment_id);
    comment_e.setAttribute("class", "comment new_comment");
    comment_e.setAttribute("style", "display:none");
    comment_e.innerHTML = "<div class=\"comment-header\"><div class=\"fleft\"><b>Me!</b></div><div class=\"fright\">just posted</div><div class=\"clear\"></div></div><div class=\"comment-content\">" + comment_text + "</div>";
    
    // an hr element to be appended/prepended depending on the case
    var hr_e = document.createElement("hr");
    hr_e.setAttribute("class", "clear");
    
    // there are currently no comments, so replace the content of #comments-content
    if(jQuery.trim($('#comments-content').html()) == "No comments were found for this product") {        
        // empty the contents of #comments-content
        $('#comments-content').empty();
        
        // append the comment element
        $('#comments-content').append(comment_e);
        
        // append an hr
        $('#comments-content').append(hr_e);
    }
    
    // there are comments already, so prepend the new comment element and fade it in.
    else {
        // prepend an hr
        $('#comments-content').prepend(hr_e);
        
        // prepend the actual content element
        $('#comments-content').prepend(comment_e);
    }
    
    // fade the new comment in
    $('#' + comment_id).fadeIn("def");
    $('#' + comment_id).animate({ backgroundColor: "#fff", opacity: 1 }, 2000);
    //$('#' + comment_id).fadeIn("def", function () { $('#' + comment_id).animate({ backgroundColor: "#fff", opacity: 1 }, 1500 ); });
    
    // increment the num_comments counter
    num_comments++;
    $('#comments_tab_title').html("Comments (" + num_comments + ")");
    
    // reset the captcha
    ///$('#captcha')[0].src = WEBROOT + "/include/captcha/securimage_show.php?" + Math.random();
}

/***********************************
* selectCategory
*
* Sets the lowest level category 
* for the category selection control
************************************/
function selectCategory(category_id, category_name, level) {
    // set the form field 
    $(".category-selection-form")[0].category_id.value = category_id;
    
    // unselect all other categories at this level
    $('#category-selection-level' + level + ' > ul > li').removeClass();
    
    // add the selected class to this particular element
    $('#category-' + category_id).addClass("selected-category");
    
    // update the category-name div
    $('#category-name').html(category_name);
    
    // highlight the go-to-category button
    $('#go-to-category').css('background-color', '#ff019a');
    $('#go-to-category').css('color', '#fff');
    
    // un-highlight surprise me button
    $('#surprise-me').css('background-color', '#dcddde');
    $('#surprise-me').css('color', '#333133');
}

/***********************************
* resetSuggestForm
*
* Resets the suggest form (including 
* category selection)
************************************/
function resetSuggestForm(id) {
    var frm = $('#' + id)[0];
    frm.reset();
    //resetCategorySelection();
}

/***********************************
* resetVoteChooseForm
*
* Resets the category selection tool
* on the vote choose form.
************************************/
function resetVoteChooseForm(id) {
    resetCategorySelection();
}

/***********************************
* resetCategorySelection
*
* Resets the category selection control
************************************/
function resetCategorySelection() {
    // remove the content from 2nd and 3rd category selection levels
    $('#category-selection-level2').html("");
    $('#category-selection-level3').html("");
    
    // remove "selected-category" class from all elements in the first level
    $('#category-selection-level1 > ul > li').removeClass();
    
    // reset the category_id form value and label
    $('#suggest-form')[0].category_id.value = 0;
    $('#category-name').html("<i>Please Select A Category Below</i>");
}

/***********************************
* updateVoteButton
*
* updates the vote button based on 
* which vote was submited, up or down
************************************/
function updateVoteButton(product_id, variable_id, vote_value) {
    //alert("trying to update vote button, value: " + vote_value);
    
    if(vote_value == 1) {
        // change voting image the "on" state
        $('#vote-up-button').css("display", "none");
        $('#vote-up-button').html("<img src='" + WEBROOT +"/images/cool_button_on.gif' alt='This product is cool' />");
        $('#vote-up-button').fadeIn("def");
        
        // make sure that the vote down button is on the "off" state.
        $('#vote-down-button').css("display", "none");
        $('#vote-down-button').html("<a href='javascript:submitProductVote(\""+product_id+"\", \""+variable_id+"\", 0);'><img src='" + WEBROOT +"/images/not_cool_button_off.gif' alt='This product is not cool' /></a>");
        $('#vote-down-button').fadeIn("def");
        
    }
    
    else if(vote_value == 0) {
        // change voting image to "on" state
        $('#vote-down-button').css("display", "none");
        $('#vote-down-button').html("<img src='" + WEBROOT +"/images/not_cool_button_on.gif' alt='This product is not cool' />");
        $('#vote-down-button').fadeIn("def");
        
        // make sure that the vote up button is on the "off" state.
        $('#vote-up-button').css("display", "none");
        $('#vote-up-button').html("<a href='javascript:submitProductVote(\""+product_id+"\", \""+variable_id+"\", 1);'><img src='" + WEBROOT +"/images/cool_button_off.gif' alt='This product is cool' /></a>");
        $('#vote-up-button').fadeIn("def");
    }
}