/**
 *  Carousel Tabs list
 */
var carouselPages = [
            "widget-type",
            "embedding-option",
            "customize-skin",
            "configuration"
            ];

var colorpickers_info = { 'new_look_colorpicker':{width:'686px',height:'364px'},
                          'old_look_colorpicker':{width:'768px',height:'450px'},
                          'shoutbox_colorpicker':{width:'686px',height:'364px'}
                        };
                        
var colorpicker_carousel = null;
var checkout_carousel    = null;
/**
 *  Widget Configuration variables with their default values
 */
var widget_type             = "new-shoutbox";
var placement_option        = "w-bottom";
var color_string            = "";
var color_theme             = "default";
var widget_title            = "My Shoutbox";
var height                  = "300";
var width                   = "200";
var language                = "english";
var enable_login            = false;
var enable_guest_login      = false;
var show_people_list        = true;
var bumpin_policy           = 'page';
var bumpin_url              = "";
var enable_sound            = false;

var widget_type_label = "Javascript Shoutbox";
var placement_label = "Facebook Style Chat";

var process_for = "client-checkout";

var new_colorpicker_loaded = false;
var shoutbox_colorpicker_loaded = false;
var oldlook_colorpicker_loaded = false;

function validateAndLoadAllParameters() {    
    height       = $("#txt-height").val();
    width        = $("#txt-width").val();    

    if( isNaN(height) || isNaN(width) || height < 250 || height > 600 || width < 175 || width > 600 ){
        $("#notice").html('<span id="notice-span">Specify correct height (between 250 & 600) and width (between 175 and 600).</span>');
        $("#notice").show("slow");
        //checkout_carousel.scroll(4);
        checkout_carousel_scroll(checkout_carousel,4,'-2700px');
        return false;
    }

    // for websites which really require bumpin_url and we manually enter it for them
    bumpin_url    = $("#txt-bumpin-url").val();
    /* removing bumpin_url from checkout process
    bumpin_url    = $("#txt-bumpin-url").val();
    if( bumpin_url != "" ){
        if( bumpin_url.indexOf(" ") >= 0 || bumpin_url.indexOf(",") >= 0 || bumpin_url.indexOf("\\") >= 0 || bumpin_url.indexOf(";") >= 0 ){
            $("#notice").html('<span id="notice-span">Website URL is incorrect, URL cannot contain space, comma(,), back-slash(\\), or semi-colon(;)</span>');
            $("#notice").show("slow");
            //checkout_carousel.scroll(4);
            checkout_carousel_scroll(checkout_carousel,4,'-2700px');
            return false;
        }
        // *** start sanitize bumpin_url  ***
        bumpin_url = bumpin_url.split("://").pop();
        bumpin_url = bumpin_url.split("?")[0].split("#")[0];
        if (bumpin_url[bumpin_url.length - 1] == "/"){
            bumpin_url = bumpin_url.substring(0,bumpin_url.length-1);
        }
        var www_index = bumpin_url.indexOf('www.');
        if( www_index != -1 && www_index < 5 ){
            bumpin_url = bumpin_url.split('www.')[0] + bumpin_url.split('www.')[1];
        }
        bumpin_url = 'http://' + bumpin_url;
        // *** end sanitize bumpin_url  ***
    }
    */
   
    widget_title  = $("#txt-widget-title").val();
    language      = $("#slct-language").val();
    bumpin_policy = $("input[name='bumpin_policy']:checked").val();    

    enable_login = $("#chk-enable-login").is(':checked');
    enable_guest_login = $("#chk-enable-guest-login").is(':checked');
    //show_people_list = $("#chk-show-people-list").is(':checked');    
    enable_sound = $("#chk-enable-sound").is(':checked');
    
    if( widget_type == 'old' ){
        color_theme = getOldLookColorTheme();
        color_string = getOldLookColorString();
    }
    else if( widget_type == 'new' ){
        color_theme = getNewColorTheme();
        color_string = getNewColorString();
    }
    else if( widget_type == 'new-shoutbox' ){
        color_theme = getShoutboxColorTheme();
        color_string = getShoutboxColorString();
    }
    else if( widget_type == 'new-js-shoutbox' ){
        //js_shoutbox_skin = "";
    }
    else if( widget_type == 'new-js-tagboard' ){
        //js_tagboard_skin = "";
        //only default, green and blue themes supported
        if( color_theme != "default" && color_theme != "green" && color_theme != "blue"){
            color_theme = "default";
        }
    }

    return true;
}

/**
 *  This function is called when suer changes tab of carousel
 */
function changeCssClass(selected) { 
    for(var i=0 ; i<carouselPages.length ; i++){
        if(carouselPages[i]==selected) {
            $("#" + carouselPages[i]).addClass("add-selection-background");
        }
        else {
            $("#" + carouselPages[i]).removeClass("add-selection-background");
        }
    }
}

function hideDivsContainingFlashObj() {
   $("#color-picker-1-div").css('visibility', 'hidden');
   $("#color-picker-2-div").css('visibility', 'hidden');
   $("#color-picker-3-div").css('visibility', 'hidden');
   $("#js-color-picker-div").css('visibility', 'hidden');
   $("#js-tagboard-color-picker-div").css('visibility', 'hidden');
}

function hideDemos(){
   $("#embedded-widget-demo").css('visibility', 'hidden');
   $("#widget-demo").css('visibility', 'hidden');
   $("#embedded-widget-demo").html('');
   $("#widget-demo").html('');
}

function changeWidgetType(){
    $("#widget-type-link").click();
}

function changePlacementOption(){
    $("#embedding-option-link").click();
}

function changeColor(){
    $("#customize-skin-link").click();
}

function changeConfiguration(paramId){
    $("#configuration-link").click();
}

function getWidgetParamsDemoHtml(){
    var demoHtml = "";
    demoHtml += "<table id='one-column-emphasis' summary='Wordpress Plugin Parameters'>";
	demoHtml += "<colgroup>";
	demoHtml += "<col class='oce-first' />";
	demoHtml += "</colgroup>";
    demoHtml += "<tbody>";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Widget:</td>";
    demoHtml += "<td><a href='#' onclick=changeWidgetType()>" + widget_type_label + " (edit)</a></td>";
    demoHtml += "</tr>";
    //demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Placement:</td>";
    demoHtml += "<td><a href='#' onclick=changePlacementOption()>" + placement_label + " (edit)</a></td>";
    demoHtml += "</tr>";
    //demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Widget Title:</td>";
    demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + widget_title + " (edit)</a></td>";
    demoHtml += "</tr>";
    //demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Widget Height:</td>";
    demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + height + " (edit)</a></td>";
    demoHtml += "</tr>";
    //demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Widget Width:</td>";
    demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + width + " (edit)</a></td>";
    demoHtml += "</tr>";
    //demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Language:</td>";
    demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + language + " (edit)</a></td>";
    demoHtml += "</tr>";
    //demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Color Theme:</td>";
	demoHtml += "<td><a href='#' onclick=changeColor()>" + color_theme + " (edit)</a></td>";
	demoHtml += "</tr>";
	//demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Login Policy:</td>";
	demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + getLoginPolicy() + " (edit)</a></td>";
	demoHtml += "</tr>";
	//demoHtml += "<br />";
    if( enable_login ){
        demoHtml += "<td class='oce'>Guest Login:</td>";
        demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + getGuestLoginPolicy() + " (edit)</a></td>";
        demoHtml += "</tr>";
        //demoHtml += "<br />";
    }
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>Sound:</td>";
	demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + getSoundPolicy() + " (edit)</a></td>";
	demoHtml += "</tr>";
	//demoHtml += "<br />";
    demoHtml += "<tr>";
    demoHtml += "<td class='oce'>BumpIn Policy:</td>";
	demoHtml += "<td><a href='#' onclick=changeConfiguration()>" + getBumpinPolicy() + " (edit)</a></td>";
	demoHtml += "</tr>";
	//demoHtml += "<br />";
    demoHtml += "</tbody>";
	demoHtml += "</table>";

    return demoHtml;
}

function getLoginPolicy(){
    var strLoginPolicy = "";
    if( enable_login == true ){
        strLoginPolicy = "Login/Signup enabled";
    }
    else{
        strLoginPolicy = "No need for Login";
    }
    return strLoginPolicy;
}

function getGuestLoginPolicy(){
    var strGuestLoginPolicy = "";
    if( enable_guest_login == true ){
        //strGuestLoginPolicy = "Guests are automatically logged in";
        strGuestLoginPolicy = "enabled";
    }
    else{
        //strGuestLoginPolicy = "Only registered users can chat";
        strGuestLoginPolicy = "disabled";
    }
    return strGuestLoginPolicy;
}

function getSoundPolicy(){
    var strSoundPolicy = "";
    if( enable_sound == true){
        //strSoundPolicy = "Beep on new message arrival enabled";
        strSoundPolicy = "enabled";
    }
    else{
        //strSoundPolicy = "Beep on new message arrival disabled";
        strSoundPolicy = "disabled";
    }
    return strSoundPolicy;
}

function getBumpinPolicy(){
    var strBumpinPolicy = "";
    if( bumpin_policy == "domain"){
        //strBumpinPolicy = "Share shoutbox messages on all the pages shoutbox is placed on";
        strBumpinPolicy = "Domain Level";
    }
    else{
        //strBumpinPolicy = "Shoutbox on every page has its own history and messages";
        strBumpinPolicy = "Page Level";
    }
    return strBumpinPolicy;
}

function checkout_carousel_scroll(carousel,page_no,position) {
    if(BrowserDetect.browser == "Safari" || BrowserDetect.browser == "Chrome"){
        $("#checkout-carousel").css('left', position);
    }
    else{
        carousel.scroll(page_no);
    }
}

/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function widget_carousel_initCallback(carousel) {
    checkout_carousel = carousel;
    $("#checkout-carousel").css('visibility', 'visible');
    $("#widget-type-link").click(function(){
                hideDivsContainingFlashObj();
                hideDemos();
                //changeCssClass("widget-type");
                if( process_for == "client-checkout" ){
                    $("#navigation-content").css("background-position","0px 0px");
                    //carousel.scroll(1);
                    //$("#checkout-carousel").css('left', '0px');
                    checkout_carousel_scroll(carousel,1,'0px');
                }
                else{
                    $("#admin-navigation-content").css("background-position","0px -34px");
                    //carousel.scroll(2);
                    checkout_carousel_scroll(carousel,2,'-900px');
                }                
        });
    $("#embedding-option-link").click(function(){
               hideDivsContainingFlashObj();
               hideDemos();
               //changeCssClass("embedding-option");
               if( process_for == "client-checkout" ){
                    $("#navigation-content").css("background-position","0px -34px");
                    //carousel.scroll(2);
                    //$("#checkout-carousel").css('left', '-900px');
                    checkout_carousel_scroll(carousel,2,'-900px');
               }
               else{
                    $("#admin-navigation-content").css("background-position","0px -68px");
                    //carousel.scroll(3);
                    checkout_carousel_scroll(carousel,3,'-1800px');
               }
            });
    $("#customize-skin-link").click(function(){
               hideDemos();
               if( process_for == "client-checkout" ){
                    $("#navigation-content").css("background-position","0px -68px");
                    //carousel.scroll(3);
                    //$("#checkout-carousel").css('left', '-1800px');
                    checkout_carousel_scroll(carousel,3,'-1800px');
               }
               else{
                    $("#admin-navigation-content").css("background-position","0px -102px");
                    //carousel.scroll(4);
                    checkout_carousel_scroll(carousel,4,'-2700px');
               }

               if( widget_type == "old") {
                   //colorpicker_carousel.scroll(1);
                   $("#colorpicker-carousel").css('left', '0px');
                   $("#color-picker-1-div").css('visibility', 'visible');

                   if( !oldlook_colorpicker_loaded ){                       
                       load_new_color_picker_old_look(color_theme,color_string);
                   }
               }
               else if( widget_type == "new") {
                   //colorpicker_carousel.scroll(2);
                   $("#colorpicker-carousel").css('left', '-860px');
                   $("#color-picker-2-div").css('visibility', 'visible');

                   if( !new_colorpicker_loaded ){
                       load_new_color_picker(color_theme,color_string);
                   }
               }
               else if( widget_type == "new-shoutbox") {
                   //colorpicker_carousel.scroll(3);
                   $("#colorpicker-carousel").css('left', '-1720px');
                   $("#color-picker-3-div").css('visibility', 'visible');

                   if( !shoutbox_colorpicker_loaded){
                       load_new_shoutbox_color_picker(color_theme,color_string);
                   }
               }
               else if( widget_type == "new-js-shoutbox") {
                   //colorpicker_carousel.scroll(4);
                   $("#colorpicker-carousel").css('left', '-2580px');
                   $("#js-color-picker-div").css('visibility', 'visible');
               }
               else if( widget_type == "new-js-tagboard") {
                   //colorpicker_carousel.scroll(5);
                   $("#colorpicker-carousel").css('left', '-3440px');
                   $("#js-tagboard-color-picker-div").css('visibility', 'visible');
               }
            });
    $("#configuration-link").click(function(){
               hideDivsContainingFlashObj();
               hideDemos();
               //changeCssClass("configuration");
               if( process_for == "client-checkout" ){
                    $("#navigation-content").css("background-position","0px -102px");
                    //carousel.scroll(4);
                    //$("#checkout-carousel").css('left', '-2700px');
                    checkout_carousel_scroll(carousel,4,'-2700px');
               }
               else{
                    $("#admin-navigation-content").css("background-position","0px -136px");
                    //carousel.scroll(5);
                    checkout_carousel_scroll(carousel,5,'-3600px');
               }
            });
    if( process_for == "client-admin" ) {        
        $("#code-link").click(function(){
                   hideDivsContainingFlashObj();
                   hideDemos();
                   $("#admin-navigation-content").css("background-position","0px -170px");
                   //carousel.scroll(6);
                   checkout_carousel_scroll(carousel,6,'-4500px');
                });
        $("#moderate-chat-link").click(function(){
                   hideDivsContainingFlashObj();
                   hideDemos();
                   $("#admin-navigation-content").css("background-position","0px 0px");
                   //carousel.scroll(1);
                   checkout_carousel_scroll(carousel,1,'0px');
                });
    }
    

    /*
    jQuery('#mycarousel-next').bind('click', function() {
    carousel.next();
    return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
    carousel.prev();
    return false;
    });
    */
}

/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function colorpicker_carousel_initCallback(carousel) {
    $("#colorpicker-carousel").css('visibility', 'visible');
    colorpicker_carousel = carousel;
}

jQuery(document).ready(function() {

    process_for = $("#process_for").val();

    jQuery('#checkout-carousel').jcarousel({
        // Configuration goes here
        scroll: 1,
        initCallback: widget_carousel_initCallback,
        //animation: 0,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

    jQuery('#colorpicker-carousel').jcarousel({
        // Configuration goes here
        scroll: 1,
        initCallback: colorpicker_carousel_initCallback,
        animation: 0,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });


    $("#btn-select-bottom-bar").click(function(){
           selectPlacementOption("w-bottom");
        });
    $("#btn-select-side-bar").click(function(){
           selectPlacementOption("w-sidebar");
        });
    $("#btn-select-embedded").click(function(){
           selectPlacementOption("w-embed");
        });

    $("#demo-div1").click(function(){
           selectPlacementOption("w-bottom");
        });
    $("#demo-div2").click(function(){
           selectPlacementOption("w-sidebar");
        });
    $("#demo-div3").click(function(){
           selectPlacementOption("w-embed");
        });

    $("#chk-enable-login").click(function(){
           if($("#chk-enable-login").is(':checked')){
                $("#enable-guest-login-box").show("slow");
                enable_login = true;
           }
           else{
               $("#enable-guest-login-box").hide("slow");
               $("#chk-enable-guest-login").attr('checked',false);
               enable_login = false;
               enable_guest_login = false;
           }
        });
    $("#chk-enable-guest-login").click(function(){
           enable_guest_login = $("#chk-enable-login").is(':checked');
        });
    /*$("#chk-show-people-list").click(function(){
           show_people_list = $("#chk-show-people-list").is(':checked');
        });*/
    $("#chk-enable-sound").click(function(){
           enable_sound = $("#chk-enable-sound").is(':checked')
        });

    $("#rad-bumpin-policy-domain").click(function(){
           bumpin_policy = "domain";
           //$("#bumpin-url-box").show("slow");

        });
    $("#rad-bumpin-policy-page").click(function(){
           bumpin_policy = "page";
           //$("#bumpin-url-box").hide("slow");
        });

    $("#btn-demo").click(function(){
           btnDemoClicked();
        });
    $("#btn-checkout").click(function(){
           btnCheckoutClicked();
        });
    $("#btn-demo-register").click(function(){
           btnCheckoutClicked();
        });    

    if( process_for == "client-admin" ) {
        $("#btn-generate-code").click(function(){
               btnGenerateCodeClicked();
            });
        $("#btn-demo-generate-code").click(function(){
               btnGenerateCodeClicked();
            });

        if( color_theme == "default"){
            $("#js-theme-image-div").html("<img src='../../images/widget/jsdefault.png' >");
            $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-default.png' >");
        }
        else if( color_theme == "green"){
            $("#js-theme-image-div").html("<img src='../../images/widget/jsgreen.png' >");
            $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-green.png' >");
        }
        else if( color_theme == "blue"){
            $("#js-theme-image-div").html("<img src='../../images/widget/jsblue.png' >");
            $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-blue.png' >");
        }
        else if( color_theme == "black"){
            $("#js-theme-image-div").html("<img src='../../images/widget/jsblack.png' >");
            $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-default.png' >");
        }
        else if( color_theme == "red"){
            $("#js-theme-image-div").html("<img src='../../images/widget/jsred.png' >");
            $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-default.png' >");
        }

    }
    

    $("#rad-js-default-theme").click(function(){
           color_theme = "default";
           $("#js-theme-image-div").html("<img src='../../images/widget/jsdefault.png' >");
        });
    $("#rad-js-green-theme").click(function(){
           color_theme = "green";
           $("#js-theme-image-div").html("<img src='../../images/widget/jsgreen.png' >");
        });
    $("#rad-js-blue-theme").click(function(){
           color_theme = "blue";
           $("#js-theme-image-div").html("<img src='../../images/widget/jsblue.png' >");
        });
    $("#rad-js-black-theme").click(function(){
           color_theme = "black";
           $("#js-theme-image-div").html("<img src='../../images/widget/jsblack.png' >");
        });
    $("#rad-js-red-theme").click(function(){
           color_theme = "red";
           $("#js-theme-image-div").html("<img src='../../images/widget/jsred.png' >");
        });

    $("#rad-js-tagboard-default-theme").click(function(){
           color_theme = "default";
           $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-default.png' >");
        });
    $("#rad-js-tagboard-green-theme").click(function(){
           color_theme = "green";
           $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-green.png' >");
        });
    $("#rad-js-tagboard-blue-theme").click(function(){
           color_theme = "blue";
           $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/tagboard-blue.png' >");
        });
    /*$("#rad-js-tagboard-black-theme").click(function(){
           color_theme = "black";
           $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/jsblack.png' >");
        });
    $("#rad-js-tagboard-red-theme").click(function(){
           color_theme = "red";
           $("#js-tagboard-theme-image-div").html("<img src='../../images/widget/jsred.png' >");
        });*/

    $("#rad-old-widget").click(function(){           
           selectWidgetType("old");
        });
    $("#rad-new-widget").click(function(){           
           selectWidgetType("new");
        });
    $("#rad-new-shoutbox-widget").click(function(){           
           selectWidgetType("new-shoutbox");
        });
    $("#rad-js-shoutbox-widget").click(function(){           
           selectWidgetType("new-js-shoutbox");
        });
    $("#rad-js-tagboard-widget").click(function(){
           selectWidgetType("new-js-tagboard");
        });

    $("#btn-widget_type_submit").click(changePlacementOption);
    $("#btn-placement-option-submit").click(changeColor);
    $("#btn-color_picker_submit").click(changeConfiguration);    

    $("#demo-div1").bind('mouseover',select_look_div);
    $("#demo-div1").bind('mouseout',remove_select_look_div);
    $("#demo-div2").bind('mouseover',select_look_div);
    $("#demo-div2").bind('mouseout',remove_select_look_div);
    $("#demo-div3").bind('mouseover',select_look_div);
    $("#demo-div3").bind('mouseout',remove_select_look_div);
    
    opts = {
               distances : [25,25],
               leftShifts : [-100,-100],
               bubbleTimes : [500,500],
               hideDelays : [0,0],
               bubbleWidths : [250,250],
               bubbleImagesPath : "../../images/coda_bubble/skins/classic",
               msieFix : true,
               msiePop : true
            };
    $('.coda_bubble').codaBubble(opts);


    //load_new_color_picker(color_theme,color_string);
    //load_new_shoutbox_color_picker(color_theme,color_string);
    //load_new_color_picker_old_look(color_theme,color_string);

    //alert(geoplugin_countryName());
});

function selectPlacementOption(selected) {
    //alert(selected);
    placement_option = selected;

    $("#demo-div1").removeClass("selected-demo-div");
    $("#demo-div2").removeClass("selected-demo-div");
    $("#demo-div3").removeClass("selected-demo-div");
    
    if( placement_option == "w-bottom"){
        placement_label = "Facebook Style Chat";
        $("#demo-div1").addClass("selected-demo-div");
    }
    else if( placement_option == "w-sidebar"){
        placement_label = "Sidebar";
        $("#demo-div2").addClass("selected-demo-div");
    }
    else if( placement_option == "w-embed"){
        placement_label = "Embedded";
        $("#demo-div3").addClass("selected-demo-div");
    }

    //checkout_carousel.scroll(3);
    $("#customize-skin-link").click();
}

function selectWidgetType(selected) {
    widget_type = selected;    
    
    widget_disc_html = "";
    $("#widget-desc-div").css({"padding-left": "0px", "padding-top": "0px", "width": "auto"});
    if( widget_type == "old" ){
        widget_type_label = "Flash Chatroom For Smaller Spaces";
        $("#widget-img-div").html("<img src='../../images/widget/old-widget.png' >");

        widget_disc_html += "<span class='widget-heading'>"+ widget_type_label +"</span>";
        widget_disc_html += "<br/><br/>";
        widget_disc_html += "<p class='orange'><strong>Why choose this?</strong></p>";
        widget_disc_html += "<p> - Tab based UI lets you fit this widget in smaller spaces.</p>";
        widget_disc_html += "<p> - Displays the list of users currently online.</p>";
        widget_disc_html += "<p> - Supports real time chat with others currently online.</p>";
        widget_disc_html += "<p> - Cross browser compatible interactive flash base UI.</p>";
        widget_disc_html += "<p> - Express yourself with emoticons.</p>";
        widget_disc_html += "<p> - Complete control over look & feel using Skin Maker.</p>";
        widget_disc_html += "<p> - Advanced web based Admin Control Panel.</p>";
        widget_disc_html += "<p> - Real time chat moderation.</p>";
        widget_disc_html += "<p> - Automatic profanity filter.</p>";
        $("#widget-desc-div").html(widget_disc_html);
    }
    else if( widget_type == "new"){
        widget_type_label = "Flash Chatroom + Presence Service";
        $("#widget-img-div").html("<img src='../../images/widget/with-ppl-list.png' >");

        widget_disc_html += "<span class='widget-heading'>" + widget_type_label + "</span>";
        widget_disc_html += "<br/><br/>";
        widget_disc_html += "<p class='orange'><strong>Why choose this?</strong></p>";
        widget_disc_html += "<p> - Displays the list of users currently online.</p>";
        widget_disc_html += "<p> - Blue 'people list' icon lets you hide the user list when not required.</p>";
        widget_disc_html += "<p> - Supports one-to-one private chat with other users.</p>";
        widget_disc_html += "<p> - Cross browser compatible interactive flash base UI.</p>";
        widget_disc_html += "<p> - Express yourself with emoticons.</p>";
        widget_disc_html += "<p> - Complete control over look & feel using Skin Maker.</p>";
        widget_disc_html += "<p> - Advanced web based Admin Control Panel.</p>";
        widget_disc_html += "<p> - Real time chat moderation.</p>";
        widget_disc_html += "<p> - Automatic profanity filter.</p>";

        $("#widget-desc-div").html(widget_disc_html);
    }
    else if( widget_type == "new-shoutbox"){
        widget_type_label = "Flash Shoutbox";
        $("#widget-img-div").html("<img src='../../images/widget/without-ppllist.png' >");

        widget_disc_html += "<span class='widget-heading'>" + widget_type_label + "</span>";
        widget_disc_html += "<br/><br/>";
        widget_disc_html += "<p class='orange'><strong>Why choose this?</strong></p>";
        widget_disc_html += "<p> - Cross browser compatible interactive light-weight flash based UI.</p>";
        widget_disc_html += "<p> - Use BumpIn flash base shoutbox to avoid javascript/html conflicts.</p>";
        widget_disc_html += "<p> - Express yourself with emoticons.</p>";
        widget_disc_html += "<p> - Complete control over look & feel using Skin Maker.</p>";
        widget_disc_html += "<p> - Advanced web based Admin Control Panel.</p>";
        widget_disc_html += "<p> - Real time chat moderation.</p>";
        widget_disc_html += "<p> - Automatic profanity filter.</p>";
        $("#widget-desc-div").html(widget_disc_html);
    }
    else if( widget_type == "new-js-shoutbox"){
        widget_type_label = "Ajax Shoutbox";
        $("#widget-img-div").html("<img src='../../images/widget/js.png' >");
        
        widget_disc_html += "<span class='widget-heading'>" + widget_type_label + "</span>";
        widget_disc_html += "<br/><br/>";
        widget_disc_html += "<p class='orange'><strong>Why choose this?</strong></p>";
        widget_disc_html += "<p> - BumpIn javascript shoutbox is utltra light.</p>";
        widget_disc_html += "<p> - Optimized for fast loading.</p>";
        widget_disc_html += "<p> - Complete control over look & feel using CSS.</p>";
        widget_disc_html += "<p> - Express yourself with emoticons.</p>";
        widget_disc_html += "<p> - Real time chat moderation.</p>";
        widget_disc_html += "<p> - Advanced web based Admin Control Panel.</p>";
        $("#widget-desc-div").html(widget_disc_html);        
    }
    else if( widget_type == "new-js-tagboard"){
        widget_type_label = "Javascript Tagboard";
        $("#widget-img-div").html("<img src='../../images/widget/tagboard-default.png' >");

        widget_disc_html += "<span class='widget-heading'>" + widget_type_label + "</span>";
        widget_disc_html += "<br/><br/>";
        widget_disc_html += "<p class='orange'><strong>Why choose this?</strong></p>";
        widget_disc_html += "<p> - BumpIn javascript shoutbox is utltra light.</p>";
        widget_disc_html += "<p> - Optimized for fast loading.</p>";
        widget_disc_html += "<p> - Complete control over look & feel using CSS.</p>";
        widget_disc_html += "<p> - Express yourself with emoticons.</p>";
        widget_disc_html += "<p> - Real time chat moderation.</p>";
        widget_disc_html += "<p> - Advanced web based Admin Control Panel.</p>";
        $("#widget-desc-div").html(widget_disc_html);
    }
}

function btnDemoClicked() {

    $("#notice").hide("slow");
    if( validateAndLoadAllParameters() ){
        //alert("success");
        parameters = {
                        height: height,
                        width: width,
                        language: language,
                        color_string: color_string,
                        color_theme: color_theme,
                        enable_login: enable_login,
                        enable_guest_login: enable_guest_login,
                        widget_title: widget_title,
                        show_people_list: show_people_list,
                        bumpin_policy: bumpin_policy,
                        bumpin_url: bumpin_url,
                        enable_sound: enable_sound,
                        nick_name: ''
                     }

        $("#demo-widget-params-div").html(getWidgetParamsDemoHtml());

        if( placement_option == "w-sidebar" ){
            $("#embedded-widget-demo").html("");

            $("#widget-demo").html("<div id='bumpin-sideBar'><a id='bumpin-sideBarTab' href='#'><div id='bumpin-count'>1</div></a><div id='bumpin-sideBarContents'><div id='bumpin-sideBarContentsInner'><div id='bumpin-widget'></div></div></div></div>");
            $("#widget-demo").css('visibility','visible');

            $("#indication-arrow-div").html("<img width='165' height='165' alt='' src='/images/indicationArrow2.png'/>");

            if( widget_type == "new" )
                loadNewBumpinSideBarWidget(parameters);
            else if( widget_type == "old" )
                loadOldBumpinSideBarWidget(parameters);
            else if( widget_type == "new-shoutbox" )
                loadNewBumpinSideBarWidgetWithoutPeopleList(parameters);
            else if( widget_type == "new-js-shoutbox" ){
                loadNewBumpinSideBarJSWidget(parameters);
            }
            else if( widget_type == "new-js-tagboard" ){
                loadNewBumpinSideBarTagboardWidget(parameters);
            }
        }
        else if( placement_option == "w-bottom" ){
            $("#embedded-widget-demo").html("");
            $("#widget-demo").html("<div id='bumpin-chat-container' class='bumpin-chat-container-normal'></div><div id='bumpin-bottom-bar' style='border-left:none;border-right:none;'><div id='bumpin-chat-bar'></div></div>");
            $("#widget-demo").css('visibility','visible');

            $("#indication-arrow-div").html("<img width='165' height='165' alt='' src='/images/indicationArrow1.png'/>");
            if( widget_type == "new" )
                loadNewBumpinBottomChatWidget(parameters);
            else if( widget_type == "old" )
                loadOldBumpinBottomChatWidget(parameters);
            else if( widget_type == "new-shoutbox" )
                loadNewBumpinBottomChatWidgetWithoutPeopleList(parameters);
            else if( widget_type == "new-js-shoutbox" ){
                loadNewBumpinBottomJSChatWidget(parameters);
            }
            else if( widget_type == "new-js-tagboard" ){
                loadNewBumpinBottomTagboardChatWidget(parameters);
            }
        }
        else if( placement_option == "w-embed" ){
            $("#widget-demo").html("");
            $("#embedded-widget-demo").html("<div id='bumpin-widget'></div>");
            $("#embedded-widget-demo").css('visibility','visible');
            $("#indication-arrow-div").html("");
            if( widget_type == "new" )
                loadNewBumpinWidget(parameters);
            else if( widget_type == "old" )
                loadOldBumpinWidget(parameters);
            else if( widget_type == "new-shoutbox" )
                loadNewBumpinWidgetWithoutPeopleList(parameters);
            else if( widget_type == "new-js-shoutbox" ){
                loadNewBumpinJSWidgetWithoutPeoplelist(parameters);
            }
            else if( widget_type == "new-js-tagboard" ){
                loadNewBumpinTagboardWidgetWithoutPeoplelist(parameters);
            }

        }
        //changeCssClass('none');
        if( process_for == "client-checkout" ){
            $("#navigation-content").css("background-position","0px -136px");
            //checkout_carousel.scroll(5);
            //$("#checkout-carousel").css('left', '-3600px');
            checkout_carousel_scroll(checkout_carousel,5,'-3600px');
        }
        else{
            $("#admin-navigation-content").css("background-position","0px -204px");
            //checkout_carousel.scroll(7);
            checkout_carousel_scroll(checkout_carousel,7,'-5400px');
        }
    }
}

function btnCheckoutClicked() {
    $("#notice").hide("slow");
    if( validateAndLoadAllParameters() ){

        var input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "widget_type");
        input.setAttribute("value", widget_type);
        document.getElementById("checkout-form").appendChild(input);

        input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "placement_option");
        input.setAttribute("value", placement_option);
        document.getElementById("checkout-form").appendChild(input);

        input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "color_string");
        input.setAttribute("value", color_string);
        document.getElementById("checkout-form").appendChild(input);

        input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "color_theme");
        input.setAttribute("value", color_theme);
        document.getElementById("checkout-form").appendChild(input);

        // Removed bumpin_url from the configurations options
        // Adding following field to keep the bumpin_url parameter in the legacy code
        input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "bumpin_url");
        input.setAttribute("value", bumpin_url);
        document.getElementById("checkout-form").appendChild(input);

        $("#checkout-form").submit();

    }
}

function select_look_div(){
    
    var my_id = "#" + this.id;
    
    $("#demo-div1").removeClass("selected-demo-div");
    $("#demo-div2").removeClass("selected-demo-div");
    $("#demo-div3").removeClass("selected-demo-div");

    $(my_id).addClass("selected-demo-div");
}

function remove_select_look_div(){
    
    var my_id = "#" + this.id;
    if( (placement_option == "w-bottom" && this.id == "demo-div1") || (placement_option == "w-sidebar" && this.id == "demo-div2") || (placement_option == "w-embed" && this.id == "demo-div3")){
        return;
    }
    
    $("#demo-div1").removeClass("selected-demo-div");
    $("#demo-div2").removeClass("selected-demo-div");
    $("#demo-div3").removeClass("selected-demo-div");

    if( placement_option == "w-bottom"){
        $("#demo-div1").addClass("selected-demo-div");
    }
    else if( placement_option == "w-sidebar"){
        $("#demo-div2").addClass("selected-demo-div");
    }
    else if( placement_option == "w-embed"){
        $("#demo-div3").addClass("selected-demo-div");
    }
}

function btnGenerateCodeClicked(){
    if( validateAndLoadAllParameters() ){
        authenticity_token = $("input[name=authenticity_token]").val();
        client_id = $("input[name=client_id]").val();
        params = {"id":client_id,
                  "widget_type":widget_type,
                  "placement_option":placement_option,
                  "color_string":color_string,
                  "color_theme":color_theme,
                  "widget_title":widget_title,
                  "height":height,
                  "width":width,
                  "language":language,
                  "enable_login":enable_login,
                  "enable_guest_login":enable_guest_login, 
                  "show_people_list":show_people_list,
                  "bumpin_policy":bumpin_policy,
                  "bumpin_url":bumpin_url, 
                  "enable_sound":enable_sound,
                  "authenticity_token":authenticity_token};

        $.post("/users/generate_code",params,function(data){
            response = eval_json(data);
            if( response['status'] == 'success') {
                $("#widget-code").html("<textarea id='code-area' cols='100' rows='12' readonly='readonly'>" + response['code'] + "</textarea>");
                $("#code-link").click();
            }
        });
    }
}

var eval_json = function(data){
    return eval("(" + data + ")");
};