// 0 - for slider view
// 1 - for floater view
var highlighted_view = 0; // default to slider view when page is refresh

// the clone for ul.picks
var ul_clone;

$(document).ready( function() {

        // animazione
        $("#float_view").click( function() {
            $("#slider").fadeOut(500);

            edicola_floater($("ul.picks"));

            return false;
        });

        // begin - loads the floater view
        $("#float_view").click( function() {

            if (highlighted_view == 1)
                return false;

            highlighted_view = 1;
            $(this).addClass("animazioneOn").removeClass("animazioneOff");
            $("#list_view").addClass("elencoOff").removeClass("elencoOn");

                $("#slider").fadeOut(500);

                // start cloning
                ul_clone = $("ul.picks").clone();

                edicola_floater($("ul.picks"));

                return false;

            });
        // end - loads the floater view

        // begin - load the slider view
        $("#list_view").click(
                function() {

                    if (highlighted_view == 0)
                        return false;

                    highlighted_view = 0;
                    $(this).addClass("elencoOn").removeClass("elencoOff");
                    $("#float_view").addClass("animazioneOff").removeClass(
                            "animazioneOn");

                    // ul_clone.remove();
                    $("ul.picks").remove();
                    $("#content_scroll").append(ul_clone);
                    ul_clone.children().fadeIn(5000);

                    $("#slider").fadeIn(500).slider("option", "value", 50);
                    $("#content_scroll").attr( {
                        scrollLeft : 3 * 215
                    });

                    return false;

                });
        // end - load the slider view

        // init the edicola slider
        edicola_slider();

    });

/**
 * initialize the slider
 * 
 * @return
 */
function edicola_slider() {

    var ITEM_WIDTH = 215;
    var SLIDER_DELAY = 700;
    var SLIDER_STEPS = ITEM_WIDTH * 6 / 100;

    $("#slider").slider(
            {
                animate : true,
                value : 50,
                orientation : 'horizontal',
                start : function(evt, ui) {

                },
                stop : function(evt, ui) {

                    var scrollLeft = $("#content_scroll").attr("scrollLeft");
                    var rr = scrollLeft / ITEM_WIDTH;

                    var rrx = 0;
                    if (rr % 1 > 0.5) {
                        rrx = Math.ceil(rr) * ITEM_WIDTH;
                        $("#content_scroll").animate( {
                            scrollLeft : rrx
                        }, SLIDER_DELAY);
                    } else {
                        rrx = Math.floor(rr) * ITEM_WIDTH;
                        $("#content_scroll").animate( {
                            scrollLeft : rrx
                        }, SLIDER_DELAY);
                    }
                    $("#slider").find("a.ui-slider-handle").animate( {
                        "left" : (rrx / SLIDER_STEPS) + "%"
                    }, {
                        duration : 700
                    });

                },
                slide : function(evt, ui) {

                    var maxScroll = $("#content_scroll").attr("scrollWidth")
                            - $("#content_scroll").width();
                    $("#content_scroll").attr( {
                        scrollLeft : ui.value * (maxScroll / 100)
                    });

                },
                change : function(evt, ui) {

                }
            }); // end slider

    $("#content_scroll").attr( {
        scrollLeft : 3 * ITEM_WIDTH
    });

}