/*
*
*
*
*/

var ID_KARTELL_FLICK_GALLERY = "49016492@N08";
var ID_KARTELL_YOUTUBE_CHANNEL = 'DFDB5131F55BEC65';
var currentEventID = "-1"

var youTubeRef, flickRef;
var galleriaFlickr;
var dx1, dx2, dx3, sx1, sx2, sx3;

var eventsHappened = new Array(
        {
            'id': '1',
            'title': 'Salone del Mobile 2011',
            'descr': 'Salone del Mobile 2011',
            'date': '12-17/04/2011',
            "id_photoset": "72157626481530778",
            "id_youtube": "9PjEJHf4VD0",
            "id_photo": "1",
            "start": 1
        });


        $(document).ready(function () {

            jQuery.fx.interval = 33;

	        sx1 = $("#sx-1")
            dx1 = $("#dx-1");

            sx2 = $("#sx-2")
            dx2 = $("#dx-2");

            sx3 = $("#sx-3")
            dx3 = $("#dx-3")

            //riga-1

            $(dx1)
               .find("#m_photo_gallery")
               .hover(overLabel, outLabel)

            $(dx1)
               .find("#m_press_room")
               .hover(overLabel, outLabel)

			$(dx1)
               .find("#m_catalogue")
               .hover(overLabel, outLabel)
			  
			$(dx1)
               .find("#m_modulo_offerta")
               .hover(overLabel2, outLabel2)   
			   
            $(dx1)
               .find("#m_photo_gallery")
               .click(clickPhotoGallery)

            $(dx1)
               .find("#m_press_room")
               .click(clickPDF)
			 
			 $(dx1)
               .find("#m_modulo_offerta")
               .click(clickPDF)   
			   
			 $(dx1)
               .find("#m_catalogue")
               .click(clickPDF)   
			   

            //riga 3

            $(dx3)
               .find("#m_photo_gallery")
               .hover(overLabel, outLabel)

            $(dx3)
               .find("#m_press_room")
               .hover(overLabel, outLabel)
			
			$(dx3)
               .find("#m_photo_gallery")
               .click(clickPhotoGallery)
        
            $(dx3)
               .find("#m_video_gallery")
               .hover(overLabel, outLabel)
               .click(clickVideoGallery);

            $(dx3)
               .find("#m_press_room")
               .click(clickPDF)

            /* riga 2 just happened */

            $(dx2)
               .find("#m_photo_gallery")
               .hover(overLabel, outLabel)
               .click(clickPhotoGallery);

            $(dx2)
               .find("#m_video_gallery")
               .hover(overLabel, outLabel)
               .click(clickVideoGallery);


            /*      functions         */
			

            function clickLabel(obj) {
                $(obj)
                    .addClass("m_active")
                    .css({ backgroundPosition: "0px 0px" });
            }

            function overLabel() {
                if ($(this).attr("class") !== "m_active") {
                    $(this).css({ backgroundPosition: "0 -80px" });
                }
            }

            function outLabel() {
                if ($(this).attr("class") !== "m_active") {
                    $(this).css({ backgroundPosition: "0 -40px" });
                }
            }

            function overLabel2() {
                if ($(this).attr("class") !== "m_active") {
                    $(this).css({ backgroundPosition: "0 -140px" });
                }
            }

            function outLabel2() {
                if ($(this).attr("class") !== "m_active") {
                    $(this).css({ backgroundPosition: "0 -70px" });
                }
            }

			function clickBook() {
				
			}
			
			
            function clickVideoGallery() {

                var where = getBlock(this)
                var id = $(this).attr("rel");

                clickLabel(this)
                hidePanels(where);
                noActiveMenu(where)

                populateDataYouTube(where, id);

            }

            function clickPhotoGallery() {

                var where = getBlock(this)
                var id = $(this).attr("rel")

                clickLabel(this)
                hidePanels(where);
                noActiveMenu(where)

                populateDataFlick(where, id);
				
             }

            function clickPDF() {

                var where = getBlock(this)
                var pdf = $(this).attr("rel")

                clickLabel(this);
                //hidePanels(where);
                noActiveMenu(where)

                if (pdf != "")
                    window.open(pdf);
            }

            function clickModuloOfferta() {

                var where = getBlock(this)
                var pdf = $(this).attr("rel");

                clickLabel(this)
                hidePanels(where);
                noActiveMenu(where);

                if (pdf != "")
                    window.open(pdf);

            }

            function getBlock(obj) {
                return $(obj).parent().parent().parent().attr("id").substring(3, 4)
            }

            function hidePanels(where) {

                var panel = $("#sx-" + where)
                $(panel).find("#pic_div").css({ display: "none" })
                $(panel).find("#youtube_div").css({ display: "none" })
                $(panel).find("#flickr_div").css({ display: "none" })
            }

            function noActiveMenu(where) {

                var panel = $("#dx-" + where)

                $(panel)
                    .find("#m_photo_gallery")
                    .removeClass("m_active")
                    .css({ backgroundPosition: "0 -40px" });

                $(panel)
                    .find("#m_video_gallery")
                    .removeClass("m_active")
                    .css({ backgroundPosition: "0 -40px" });

                $(panel)
                    .find("#m_catalogue")
                    .removeClass("m_active")
                    .css({ backgroundPosition: "0 -40px" });
					
                $(panel)
                    .find("#m_press_room")
                    .removeClass("m_active")
                    .css({ backgroundPosition: "0 -40px" });

                $(panel)
					.find("#m_modulo_offerta")
					.removeClass("m_active")
					.css({ backgroundPosition: "0 -70px" });
            }


            function populateDataFlick(where, set_id) {

                flickRef = $("#sx-" + where).find("#flickr_div");

                $(flickRef)
                    .empty()
                    .show()
                    .parent("div")
                    .css({ 'width': '700px' });

                $(flickRef).galleria({
					preload: 3,
                    flickr: 'set:' + set_id,
                    autoplay: 5000,
                    height: 500,
                    transition: 'fade',
                    overlayBackground: "#000000",
                    imagePanSmoothness: 10,
                    swipe: true,
                    showInfo: false,
                    showCounter: false,
                    showImagenav: true,
                    thumbMargin : 5,
					thumbCrop: "height", 
					thumbQuality : true,
                    thumbnails: true,
                    carousel: true,
                    extend: function () {
				        this.bind('thumbnail', function (e) {
                            var desc = this.getData(e.index).description;
                            var title = this.getData(e.index).title;
                            if (title) {
                                this.bindTooltip(e.thumbTarget, title + "<br/>" + desc);
                            }
                        });
                    },
                    flickrOptions: {
                        sort: 'date-posted-asc',
                        description: true,
						max: 80
                       }
                });
			}

            function populateDataYouTube(where, youtube_id) {

                youTubeRef = $("#sx-" + where)

                $(youTubeRef).find("#youtube_div").show();
                $(youTubeRef).find("#show_div").empty();
                $(youTubeRef).find("#youtube_div").parent("div").css({ 'width': '700px' });

                $.getJSON('http://gdata.youtube.com/feeds/api/playlists/' + ID_KARTELL_YOUTUBE_CHANNEL + '?v=2&alt=jsonc&callback=?', function (json) {

                    $(youTubeRef).find('.toScroll').empty();

                    if (json.data.items == null) {

                        $(youTubeRef)
                            .find("#show_div")
                            .append('<div class="comingsoon"></div>');
                    }
                    else {

                        var len = json.data.items.length;

                        for (var i = 0; i < len; i++) {
                            var id = json.data.items[i].video.id;
                            $(youTubeRef)
                                .find('.toScroll')
                                .append('<div class="box loadingbox" title="http://img.youtube.com/vi/' + id + '/default.jpg" id="' + id + '"></div>');
                        };

                        LoadAllImagesCollection();

                        $('.thumbnails_div').jScrollPane({
                            scrollbarWidth: 4,
                            scrollbarMargin: 0
                        });


                        $("#dx-" + where)
                            .find("#m_video_gallery")
                            .attr("rel", youtube_id);

                        $(youTubeRef)
                            .find("#show_div")
                            .empty()
                            .append('<object width="500" height="385"><param name="movie" value="http://www.youtube.com/v/' + youtube_id + '&rel=1"><param name="quality" value="high"></param><param name="bgcolor" value="#000000"><param name="wmode" value="window"></param><embed src="http://www.youtube.com/v/' + youtube_id + '&rel=1" type="application/x-shockwave-flash" bgcolor="#000000" wmode="window quality="high" width="500" height="385"></embed></object>');

                        $(youTubeRef)
                            .find('.toScroll')
                            .find('div.box')
                            .hover(function () {
                                $(this)
                                .stop(false, true)
                                .fadeTo(500, .5);
                            }, function () {
                                $(this)
                                .stop(false, true)
                            .fadeTo(500, 1);
                            });
                    }
                });
            };

            function LoadAllImagesCollection() {

                $('.box').each(function (i) {
                    var loader = $(this);
                    LoadImageCollection(loader, i);
                });

            };

            function LoadImageCollection(loader, index) {

                var image_id = $(loader).attr("id");
                var image_src = $(loader).attr("title");
                var img = new Image();

                $(img).hide();
                $(img).load(function () {

                    $(loader).append($(img));
                    $(loader).removeClass("loadingbox");
                    $(loader).removeAttr("title");
                    $(loader).removeAttr("dir");
                    $(img).show();
                    $(img).removeAttr("style");

                    $(img).click(function () {

                        var youtubeID = $(this).attr("id");

                        $(youTubeRef)
                            .find("#show_div")
                            .empty()
                            .append('<object width="500" height="385"><param name="movie" value="http://www.youtube.com/v/' + youtubeID + '&rel=1"></param><param name="quality" value="high"></param><param name="wmode" value="window"></param><embed src="http://www.youtube.com/v/' + youtubeID + '&rel=1" type="application/x-shockwave-flash" bgcolor="#000000" wmode="window" quality="high" width="500" height="385"></embed></object>');


                    });
                });


                img.id = image_id;
                img.src = image_src;
            };

            /***          init             ***/

            /** list **/

            var items = $("ul#list").find("li a")

            $(items)
                .hover(overTmb, outTmb)
                .bind("click", clickTmb)

            function overTmb(e) {

                var id = $(this).attr("id");

                if (id != currentEventID) {
                    $(this)
                        .stop(false, true)
                        .find(".tmb")
                        .fadeTo(500, .7);
                }
            }

            function outTmb(e) {

                var id = $(this).attr("id");

                if (id != currentEventID) {
                    $(this)
                        .stop(false, true)
                        .find(".tmb")
                        .fadeTo(500, 1);
                }
            }

            function clickTmb(e) {

                e.preventDefault()

                var id = $(this).attr("id");

                if (id != currentEventID) {

                    if (currentEventID != "-1") {

                        $(items[currentEventID - 1])
                            .stop(false, true)
                            .find(".tmb")
                            .fadeTo(500, 1);

                        $(items[currentEventID - 1])
                            .stop(false, true)
                            .parent()
                            .css({ "border": "0px solid #000" })

                    }


                    $(this)
                        .stop(false, true)
                        .find(".tmb")
                        .fadeTo(200, 1);

                    $(this)
                        .parent()
                        .css({ "border": "0px solid red" })
                        .animate({
                            borderWidth: "5px",
                            borderColor: "red"
                        }, "slow");

                    showEventHappened(id);
                }

                return false;
            }



            function showEventHappened(id) {

                currentEventID = id;

                var dx = $("#dx-2");
                var sx = $("#sx-2");

                if (!sx.is(":visible")) {
                    $(sx).show();
                }
                if (!dx.is(":visible")) {
                    $(dx).show();
                }

                //var media_pan;
                var date_pan = sx.find("#date_div.red")
                var title_pan = sx.find("#title_div.title")
                var descr_pan = dx.find("#m_description")

                var title = eventsHappened[id - 1].title;
                var date = eventsHappened[id - 1].date;
                var descr = eventsHappened[id - 1].descr;

                $(sx).css({ "paddingLeft": "30px" });

                $(sx).find("#pic_div").hide()
                $(sx).find("#youtube_div").hide()
                $(sx).find("#flickr_div").hide();
                $(dx).find("#m_description").hide();

                switch (eventsHappened[id - 1].start) //visualizzo in apertura
                {

                    case 0: /* immagine */

                        $(sx)
                            .find("#pic_div")
                            .show()
                            .empty()
                            .html("<img src='img/" + eventsHappened[id - 1].id_photo + "' longdesc='" + descr + "' alt='" + title + "' />")
                            .css({ "marginLeft": "0px" })

                        break;

                    case 1: /* video youtube */

                    	populateDataYouTube("2", eventsHappened[id - 1].id_youtube)

                        $(sx)
                            .find("#youtube_div")
                            .css({ "marginLeft": "0px" })
                            .show();


                        break;

                    case 2: /* photoset flickr */

                        $(sx)
                            .find("#flickr_div")
                            .show()
                            .empty()

                        slideshowFlickr("2", eventsHappened[id - 1].id_photoset)

                        break;
				}

                title_pan
                    .show()
                    .css({ opacity: 0 })
                    .html(title)
                    .fadeTo(800, 1);

                date_pan
                    .show()
                    .html(date)
                    .css({ opacity: 0 })
                    .fadeTo(800, 1);

                descr_pan
                    .show()
                    .html(descr)
                    .css({ opacity: 0 })
                    .fadeTo(800, 1)

            }


        });

      

$(window).load( function() {

    	$("body")
    		 .fadeTo( 800, 1)
        sx1
               .find("#pic_div")
                    .css({ opacity: 0 })
    				.delay(700)
                    .fadeTo(700, 1);

        sx3
                   .find("#pic_div")
                   .css({ opacity: 0 })
    			   .delay(700)
                   .fadeTo(700, 1);

});