console.log('> all_templates.js is iniciated;');

function all_templates_script() {
    console.log("function a1_template_script(); sectionName=" + sectionName + "; slideName=" + slideName);


    var doO = doObj[sectionName][slideName];
    console.log("doObj:");
    console.log(doObj);

    var template = doO.template.name;
    console.log("Template: " + template);

    var question_lines = {
        '1': {
            //'img' :'img/q1.png',
            'img': 'img/question_icon_1.png',
            "css": {
                "position": "absolute",
                'width': '1124',
                'height': '118',
                "left": "18px",
                "z-index": "24px"
            },
            'text_css': {
                "position": "absolute",
                'width': '970',
                'height': '80',
                "top": "18px",
                "left": "132px",
                "z-index": "24px",
                'text-indent': '0px',
                'text-align': 'left',
                'color': 'rgb(235,117,2)',
                'font-family': 'Arial',
                'font-size': '30px',
                'line-height': '37px'
            },
            'description': 'Ruda - INFORMACIJOS SUVOKIMAS (pažiūrėk, paklausyk, paskaityk..)'
        },
        '2': {
            //'img' :'img/q2.png',
            'img': 'img/question_icon_2.png',
            "css": {
                "position": "absolute",
                'width': '1124',
                'height': '118',
                "left": "18px",
                "z-index": "24px"
            },
            'text_css': {
                "position": "absolute",
                'width': '970',
                'height': '80',
                "top": "18px",
                "left": "132px",
                "z-index": "24px",
                'text-indent': '0px',
                'text-align': 'left',
                'color': 'rgb(0,139,53)',
                'font-family': 'Arial',
                'font-size': '30px',
                'line-height': '37px'
            },
            'description': 'Zalia - . KOMUNIKACIJA (padiskutuok, pasitark...)'
        },
        '3': {
            //'img' :'img/q3.png',
            'img': 'img/question_icon_3.png',
            "css": {
                "position": "absolute",
                'width': '1124',
                'height': '118',
                "left": "18px",
                "z-index": "24px"
            },
            'text_css': {
                "position": "absolute",
                'width': '970',
                'height': '80',
                "top": "18px",
                "left": "132px",
                "z-index": "24px",
                'text-indent': '0px',
                'text-align': 'left',
                'color': 'rgb(0,131,210)',
                'font-family': 'Arial',
                'font-size': '30px',
                'line-height': '37px'
            },
            'description': 'Melyna - SUPRATIMAS (apibūdink, interpretuok, pakomentuok, palygink, pasvarstyk, surask ...)'
        },
        '4': {
            //'img' :'img/q4.png',
            'img': 'img/question_icon_4.png',
            "css": {
                "position": "absolute",
                'width': '1124',
                'height': '118',
                "left": "18px",
                "z-index": "24px"
            },
            'text_css': {
                "position": "absolute",
                'width': '970',
                'height': '80',
                "top": "18px",
                "left": "132px",
                "z-index": "24px",
                'text-indent': '0px',
                'text-align': 'left',
                'color': 'rgb(200,50,103)',
                'font-family': 'Arial',
                'font-size': '30px',
                'line-height': '37px'
            },
            'description': 'Raudona - REFLEKCIJA (kaip vertini?, ar tau svarbu?...)'
        },
        '5': {
            //'img' :'img/q5.png',
            'img': 'img/question_icon_5.png',
            "css": {
                "position": "absolute",
                'width': '1124',
                'height': '118',
                "left": "18px",
                "z-index": "24px"
            },
            'text_css': {
                "position": "absolute",
                'width': '970',
                'height': '80',
                "top": "18px",
                "left": "132px",
                "z-index": "24px",
                'text-indent': '0px',
                'text-align': 'left',
                'color': 'rgb(10,53,96)',
                'font-family': 'Arial',
                'font-size': '30px',
                'line-height': '37px'
            },
            'description': 'Pilka tamsi - MĄSTYMAS (Pagalvok, sugalvok, pamąstyk, klasifikuok...)'
        }
    };


    // append background
    if (doO['background']) {
        loadSlideBackground();
    }

    // append question line
    if (doO['question_line']) {
        append_q_line();
    }

    // append question line
    if (doO['question_lines']) {
        append_q_lines();
    }

    // append title
    if (doO['title']) {
        append_title();
    }

    // append titles
    if (doO['titles']) {
        append_titles();
    }

    // append text
    if (doO['text']) {
        append_text();
    }

    // append texts
    if (doO['texts']) {
        append_texts();
    }

    // apend images
    if (doO['images']) {
        append_images();
    }

    // append sliding content
    if (doO['sliding_content']) {
        append_sliding_content();
    }

    // apend images gallery
    if (doO['gallery']) {
        append_gallery();
    }

    // apend images
    if (doO['gallery_f']) {
        append_gallery_f();
    }


    //append videos
    if (doO['videos']) {
        append_videos();
    }

    function append_title() {						// level 1 function
        console.log('Append: ' + 'title')
        var text = doO['title'].text;
        var css = doO['title'].css;

        console.log('Text: ' + text)

        $(ssId).append('<div class="" id="' + ss + 'title' + '">' + text + '</div>');
        $(ssId + 'title').css(css);
    }

    // apend titles
    function append_titles() {
        for (title in doO.titles) {
            append_title_2(title);
        }
        // apend titles
        function append_title_2(content) {						// level 1 function
            console.log('Append: ' + content)
            var text = doO.titles[content].text;
            var css = doO.titles[content].css;

            console.log('Text: ' + text)

            $(ssId).append('<div class="" id="' + ss + content + '">' + text + '</div>');
            $(ssId + content).css(css);
        }
    }

    function append_text() {
        console.log('Append: ' + 'text')
        var text = doO['text'].text;
        var css = doO['text'].css;

        console.log('Text: ' + text)

        $(ssId).append('<div class="text" id="' + ss + 'text' + '">' + text + '</div>');
        $(ssId + 'text').css(css);
    }

    function append_texts() {
        for (text in doO.texts) {
            append_text_2(text);
        }

        // apend two texts in two columns
        function append_text_2(content) {
            console.log('Append: ' + content)
            var text = doO.texts[content].text;
            var css = doO.texts[content].css;

           // console.log('Text: ' + text)

            $(ssId).append('<div class="" id="' + ss + content + '">' + text + '</div>');
            $(ssId + content).css(css);
        }

    }

    function append_images() {
        for (image in doO.images) {
            append_images_2(image);
        }

        function append_images_2(content) {
            console.log('Append image')
            var image = doO.images[content].image;
            var css = doO.images[content].css;

            console.log('Image: ' + image)

            $(ssId)
                    .append('<div class="image" id="' + ss + content + '"><img src="' + image + '" alt="" ></img></div>');

            $(ssId + content)
                    .css(css);
        }

    }

    function append_q_line() {
        console.log('Append question line')
        var text = doO.question_line.text;
        var type = doO.question_line.type;
        var top = doO.question_line.top;//alert(top);

        var image = question_lines[type].img;
        var css = question_lines[type].css;
        var text_css = question_lines[type].text_css;

        console.log('Text: ' + text)
        console.log('Image: ' + image)
        //alert("app");
        $(ssId)
                .append('<div class="question_line" id="' + ss + 'question_line"><div class="questionImageCont"><img class="questionImage" src="' + image + '" alt="" /></div></div>');

        $(ssId + 'question_line')
                .css(css)
                .css('top', top)
                .append('<div class="question_line_text" id="' + ss + 'question_line_text"><span class="qlinetext">' + text + '</span></div>');

        $(ssId + 'question_line_text')
                .css(text_css);


    }

    // apend question lines
    function append_q_lines() {
        console.log(doO.question_lines);
        for (line in doO.question_lines) {
            append_q_line_2(line);
        }

        function append_q_line_2(line) {
            console.log('Append question line')
            var text = doO.question_lines[line].text;
            var type = doO.question_lines[line].type;
            var top = doO.question_lines[line].top;

            var image = question_lines[type].img;
            var css = question_lines[type].css;
            var text_css = question_lines[type].text_css;

            console.log('Text: ' + text)
            console.log('Image: ' + image)

            $(ssId)
                    .append('<div class="question_line" id="' + ss + 'question_line' + line + '"><div class="questionImageCont"><img class="questionImage" src="' + image + '" alt="" /></div></div>');

            $(ssId + 'question_line' + line)
                    .css(css)
                    .css('top', top)
                    .append('<div class="question_line_text" id="' + ss + 'question_line_text"><span class="qlinetext">' + text + '</span></div>');

            $(ssId + 'question_line' + line + ' ' + ssId + 'question_line_text')
                    .css(text_css);
        }
    }

    function append_sliding_content() {
        console.log('__JSF append_sliding_content(): ')

        var itemCount = 0; // how many images
        var count = 1;  // which image to uncover first
        var uncoverTop = 0; // first position
        var uncoverLeft = 0;	// first position
        var uncoverSpeed = 800;   // animation speed
        var uncoverSpeedIncreaseBy = 0;    // after each uncover image speed shoud increase
        var moveUncoverItemTo = 0;   // first position for text
        var direction = '';
        var uncoverHeight = 0;
        var uncoverWidth = 0;
        var space = doO['sliding_content']['start']['space'];

        var items_heights = []; // needed to manage different length texts, different length give different number of lines and height

        var i = 0;
        var uncover_image_link;	// uncover button image link, top or left, set in append_xxx_items 

        var items = doO['sliding_content']['items']
        console.log('Slide items:');
        console.log(items);

        direction = doO['sliding_content']['sliding_direction'];
        console.log('Slide direction: ' + direction);

        var uncoverAuto = doO['sliding_content']['uncover'];
        console.log('Slide auto/manual: ' + uncoverAuto);

        uncoverTop = Number(doO['sliding_content']['start']['top']);
        console.log('Slide uncoverTop = ' + uncoverTop);

        uncoverLeft = Number(doO['sliding_content']['start']['left']);
        console.log('Slide uncoverLeft= ' + uncoverLeft);

        uncoverWidth = Number(doO['sliding_content']['start']['width']);
        console.log('Slide uncoverWidth= ' + uncoverWidth);

        // uncover Height should be counted depending on size long
        uncoverHeight = Number(doO['sliding_content']['start']['height']);
        console.log('Slide uncoverHeight= ' + uncoverHeight);



        if (direction == 'top') {
            moveUncoverItemTo = uncoverTop = Number(doO['sliding_content']['start']['top']) / resizeAddValue;
            append_top_items();
        }
        else if (direction == 'left') {
            moveUncoverItemTo = uncoverLeft = Number(doO['sliding_content']['start']['left']);
            append_left_items();
        }
        else {
            alert('[sliding_content][sliding_direction] is not set');
        }

        // append items on top, of the screen in invisable place
        function append_top_items() {
            uncover_image_link = 'img/uncover.png';

            for (itm in items) {
                i++;   // count items
                append_top_item(itm);
            }
            itemsCount = i;

            function append_top_item(key) {
                var item = items[key];
                console.log("item_" + i + ": " + item);

                if (!doO['sliding_content']['bullet_css']) {
                    alert('[sliding_content][bullet_css] not defined');
                }
                if (!doO['sliding_content']['css']) {
                    alert('[sliding_content][css] not defined');
                }

                $(ssId).append('<div id="' + ss + 'item' + i + '"><li class="list_padding"><span>' + item + '</span></li></div>');

                $(ssId + 'item' + i)
                        .css({
                            "position": "absolute",
                            "top": -uncoverTop / resizeAddValue - 100 + "px",
                            "left": uncoverLeft / resizeAddValue + "px",
                            'width': '1000',
                            "z-index": "-1"
                        });
                $(ssId + 'item' + i + ' li')
                        .css(doO['sliding_content']['bullet_css']);
                $(ssId + 'item' + i + ' li span')
                        .css(doO['sliding_content']['css']);

                // get item height to make exact multi line uncover space between lines
                var item_height = $(ssId + 'item' + i + ' li span').height();
                items_heights.push(item_height);
                console.log("items_heights: " + items_heights);
            }
        }

        // append items on left side, of the screen in invisable place
        function append_left_items() {
            uncover_image_link = 'img/uncover.png';

            for (itm in items) {
                i++;   // count items
                append_left_item(itm);
            }
            itemsCount = i;

            function append_left_item(key) {
                var found = checkTextOrImage(items[key]); // type: 'text' - text; 'image'- image;
                console.log('JSF checkTextOrImage(item,items); item: ' + key + 'items[item]: ' + items[key] + '; found: ' + found);

                if (found == 'image') {
                    append_item_left_image(key);
                }
                if (found == 'text') {
                    append_item_left_text(key);
                }

                // append items on left side, of the screen in invisable place
                function append_item_left_image(key) {
                    var item = items[key];
                    console.log("item_" + i + ": " + item);

                    var item = items[key];
                    console.log("item " + item);
                    $(ssId).append('<div id="' + ss + 'item' + i + '"><img src="' + item + '" alt="" ></img></div>')
                    $(ssId + 'item' + i).css({
                        "position": "absolute",
                        "top": uncoverTop + "px",
                        "left": -(uncoverLeft + uncoverWidth) + "px",
                        "z-index": "0"
                    });
                }

                // append items on left side, of the screen in invisable place
                function append_item_left_text(key) {
                    var item = items[key];
                    console.log("item_" + i + ": " + item);

                    var css = doO['sliding_content']['css'];


                    var item = items[key];
                    console.log("item " + item);
                    $(ssId).append('<div id="' + ss + 'item' + i + '">' + item + '</div>')
                    $(ssId + 'item' + i)
                            .css(css)
                            .css({
                                "position": "absolute",
                                "top": uncoverTop + "px",
                                "left": -(uncoverLeft + uncoverWidth) + "px",
                                "z-index": "0"
                            });
                }
            }
        }

        append_uncover_button(uncover_image_link);

        // append uncover button
        function append_uncover_button(uncover_image_link) {
            //$(ssId).append('<div class="control" id="' + ss + 'uncover"></div>');
            $(ssId).append('<img src="'+uncover_image_link+'" class="control" id="' + ss + 'uncover" />');

            $(ssId + 'uncover')
                    .css({
                        "position": "absolute",
                        "display": "block",
                        "width": 65 + "px",
                        "height": 65 + "px",
                        "top": uncoverTop + "px",
                        //"left": uncoverLeft + "px",'
                        "left": "48px",
                        //"background": " url(" + uncover_image_link + ") no-repeat 50% 50% / cover",
                        "z-index": "4"
                    })
                    .bind('click', function() {
                        uncover();
                    });

            function uncover() {
                console.log("function uncover()");

                var button = ssId + 'uncover';
                var item = ssId + 'item';

                if (itemsCount == count) {
                    uncover_button_disappear(button);
                }

                console.log("Uncovering item: " + count);
                move_ucover_button(button);
                uncover_item(item, count);

                console.log("moveUncoverItemTo: " + moveUncoverItemTo);
                console.log("moveUncoverItemTo: " + moveUncoverItemTo);

                count++;
                items_heights.shift(); // removes shown item height

                function uncover_item(item, count) {
                    
                    itemWithCount = item + count;
                    //alert(button);
                    if (direction == 'top') {
                       // alert(count);
                        
                        var cssVals = {
                                    "position": "absolute",
                                    "z-index": "2",
                                    "opacity": "0",
                                    "filter": "alpha(opacity=0)"
                                };
                                
                    if (count > 1) {       
                        prevItem = item + (count-1);
                        cssVals["top"] = $(prevItem).position().top / resizeAddValue + $(prevItem).find("span").height() + "px";
                    }else{
                        cssVals["top"] = $(button).position().top / resizeAddValue - $(button).height() / 2 ;
                    }
                        console.log("mycss:",cssVals);
                        
                        $(itemWithCount).css(cssVals);
                        $(itemWithCount).animate({'top': moveUncoverItemTo, "opacity": "1.0","filter": "alpha(opacity=0)"}, //slider text top
                        700,
                                function() {// Animation complete.
                                }
                        );
                        // takes items' height
                        moveUncoverItemTo += items_heights[0] + +space;

                    }
                    else {
                        $(itemWithCount)
                                .css({
                                    "position": "absolute",
                                    "z-index": "2"
                                });
                        $(itemWithCount).animate(
                                {'left': moveUncoverItemTo},
                        uncoverSpeed,
                                function() {// Animation complete.
                                }
                        );
                        moveUncoverItemTo += uncoverWidth + +space;
                    }
                }

                function move_ucover_button(button) {
                    if (direction == 'top') {
                        // takes items' height
                        uncoverTop += items_heights[0] + +space;
                        console.log('uncoverTop = ' + uncoverTop);

                        $(button).animate(
                                {'top': uncoverTop},
                        uncoverSpeed,
                                function() {// Animation complete.
                                }
                        );

                    } else {
                        uncoverLeft += uncoverWidth + +space;
                        console.log('uncoverLeft = ' + uncoverLeft);

                        $(button).animate(
                                {'left': uncoverLeft},
                        uncoverSpeed,
                                function() {// Animation complete.
                                }
                        );

                    }
                }

                function uncover_button_disappear(button) {
                    if (direction == 'top') {
                        console.log('uncoverTop = ' + uncoverTop);
                        $(button).animate(
                                {
                                    'top': uncoverTop + uncoverHeight,
                                    'opacity': '0'
                                },
                        uncoverSpeed,
                                function() {
                                    // Animation complete.
                                    $(button).remove();
                                }
                        );
                        uncoverTop += uncoverHeight + +space;
                    } else {
                        console.log('uncoverLeft = ' + uncoverLeft);
                        $(button).animate(
                                {
                                    'left': uncoverLeft + uncoverWidth,
                                    'opacity': '0'
                                },
                        uncoverSpeed,
                                function() {
                                    // Animation complete.
                                    $(button).remove();
                                }
                        );
                        uncoverLeft += uncoverWidth + +space;
                    }
                }

            }
        }

        // check if item is text or image
        function checkTextOrImage(str) {				// level 3 function
            var line_begin = ['../assets', 'content/', 'images', 'img/'];

            var l = line_begin.length;

            for (var i = 0; i < l; i++) {
                var s_result = str.search(line_begin[i]);
                if (s_result == 0) {
                    var found = 'image';
                    return found;
                }
                else {
                    var found = 'text';
                }
            }
            return found;		// type: 'text' - text; 'image'- image;
        }
    }

    // apend gallery "matro" style
    function append_gallery_f() {
        var finalActiveImage = null;
        //var checkMouseOut = false;
        var thumb_css_patern = {
            'width': '288px',
            'height': '297px',
            'position': 'absolute',
            'overflow': 'hidden'
        };

        var thumb_positions = {
            1: {
                'top': '0px',
                'left': '1px'
            },
            2: {
                'top': '0px',
                'left': '291px'
            },
            3: {
                'top': '0px',
                'left': '581px'
            },
            4: {
                'top': '0px',
                'left': '871px'
            },
            5: {
                'top': '299px',
                'left': '1px'
            },
            6: {
                'top': '299px',
                'left': '291px'
            },
            7: {
                'top': '299px',
                'left': '581px'
            },
            8: {
                'top': '299px',
                'left': '871px'
            }
        };

        var containerCss = doO.gallery_f.containerCss;

        $(ssId).append('<div id="' + ss + 'thumbs-container" class="thumbs_gallery"><div');
        $(ssId + 'thumbs-container').css(containerCss);

        $(ssId + 'thumbs-container').append('<div id="' + ss + 'thumbs"><div>');

        var imgCounter = 0;
        var slides = doO.gallery_f.slides;

        for (slide in slides) {
            imgCounter++;
            append_thumb_image(slide);
        }

        function append_thumb_image(slide) {
           // var firstTime = false;
            var slideObj = slides[slide];
            var i;
            i++;

            var thumb = slideObj.thumb;
            var content = slideObj.innerContent;

            if (typeof slideObj.thumbCss == "undefined") {
                slideObj.thumbCss = {};
            }
            var thumbCss = slideObj.thumbCss;



            console.log('slide ' + slide + ' content:');
            console.log(content);

            $(ssId + 'thumbs')
                    .append(
                            '<div id="' + ss + slide + 'img' + '" style="background:#888888">' +
                            '<img class="galeryImage" id="img_' + ss + slide + '_' + imgCounter + '" src="' + thumb + '">' +
                            '</img></div>'
                            );

            var imgDivId = '#' + ss + slide + 'img';


            // if slide position set, use position patern 
            if (typeof slideObj.position != "undefined") {
                var p = slideObj.position; // position number
                thumbCss.top = thumb_positions[p].top;
                thumbCss.left = thumb_positions[p].left;
                thumbCss.position = 'absolute';
                //thumbCss.overflow = 'hidden';
            }

            if (typeof slideObj.size != "undefined") {
                var size = slideObj.size;
                var x = size.substr(0, 1);
                var y = size.substr(2, 1);

                var width = +x * 288 + (+x - 1) * 2;
                var height = +y * 297 + (+y - 1) * 2;

                thumbCss.width = width;
                thumbCss.height = height;
            }

            // if top not defined use auto div block functionality
            if (typeof thumbCss.top == "undefined") {
                $(ssId + slide + 'img')
                        .css(thumbCss)
                        .css({
                            "position": "relative",
                            'float': 'left',
                            "display": "block"
                        });

                console.log('thumbCss top NOT set: ');
                console.log(thumbCss.top);
                console.log(thumbCss);

            }
            else {
                $('#' + ss + slide + 'img')
                        .css(thumbCss);
                console.log('thumbCss top set: ');
                console.log(thumbCss);
            }




            $(ssId + slide + 'img img').css({
                "position": "absolute",
                "left": '0px',
                "top": "0px",
                "display": "block"
            });

            // var imIds = [];
            // imIds.push();
            var imgId = '#img_' + ss + slide + '_' + imgCounter;

//			var imgId = '#img_'+ss+slide+'_'+imgCounter;
            // alert(imgId);



            $(imgId).parent()
                    .mouseenter(function() { 
                        var currentImage = $(this).find(imgId);
                        //var self = $(this).find(imgId);
                        finalActiveImage = currentImage; //self;
                        var ims = $(".galeryImage");
                        // alert(firstTime);
                        //if (!firstTime){
                        ims.each(function() {
                            if (currentImage.attr("id") != $(this).attr("id")) {
                                // $(this).css("opacity","0.6");
                                $(this).animate({"opacity": "0.6"}, 350, 'swing');
                               // firstTime = true;
                            }
                        });
                        //}
                        currentImage.css({"z-index": "10", "box-shadow": "2px 2px 2px black"});
                        currentImage
                                .stop()
                                .animate({"opacity": "1.0", "width": "102%", "left": "-7px", "top": "-5px"}, 350, 'swing');
                    })
                    .mouseleave(function() {
                        var currentImage = $(this).find(imgId);


                        currentImage
                                .css({"z-index": "1", "box-shadow": "none"})
                                .stop()
                                .animate({"opacity": "0.6", "width": "100%", "left": "0px", "top": "0px"}, 350, 'swing')


                    })
                    .bind('click', {content: content}, function(event) {
                        showImage(event.data.content);
                    });
            
            
           // alert(imgId);
            
            //$(ssId+'thumbs').find('#'+ss+slide+'img').on( "mouseover", function() {

            //
            //$(this).show("scale",{}, 8000);
            //$(this).toggle({ effect: "scale", direction: "both", "percent":"90" });
            // alert('#'+ss+slide+'img');
            //$(this).css("display","none");
            // });    








            console.log('Image thumb added: ' + slide);


            append_zoom_click();


            function append_zoom_click() {

                append_zoom_icon();

                /*$(ssId+slide+'img').append('<div style="border:solid 4px black" id="' +ss+slide+'zoom"></div>');
                 $('#' +ss+slide+'zoom')
                 .css(thumbCss).css({
                 "position":"absolute",
                 "left":'0',
                 "top":"0",
                 "display":"block",
                 'opacity':'0.0',
                 'filter':'alpha(opacity=0)',
                 "background":"#000000",   
                 "z-index": "1"
                 });*/
                /*.bind('click', {content:content}, function(event){ showImage(event.data.content)});
                 .on('mouseenter',function(){
                 /// $(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing');
                 //$(this).animate({
                 //"opacity": "0.2",
                 //"background":"#000000"				
                 //},'fast');
                 
                 
                 })
                 .on('mouseleave',function(){
                 $(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing');
                 // $(this).stop(true).animate({
                 //"opacity": "0.0",
                 //"background":"#000000"	
                 //}, "fast");
                 });*/

                function append_zoom_icon() {
                    $(ssId + slide + 'img').append('<div class="zoom_plus" id="' + ss + slide + 'zoomIco"></div>');
                    $('#' + ss + slide + 'zoomIco').css({
                        "display": "block",
                        "width": "65px",
                        "height": "65px",
                        "background": " url(img/zoom_image.png) no-repeat 50% 50%",
                        "position": "absolute",
                        "right": '0',
                        "bottom": "0",
                        "z-index": "11"
                    })
                    //.bind('click', {content: content}, function(event) {
                    //    showImage(event.data.content);
                    //});
                }
            }
        }


        function showImage(data) {

            /*
             $(ssId+slide+'img').append('<div style="border:solid 4px black" id="' +ss+slide+'zoom"></div>');
             $('#' +ss+slide+'zoom')
             .css(thumbCss).css({
             "position":"absolute",
             "left":'0',
             "top":"0",
             "display":"block",
             'opacity':'0.0',
             'filter':'alpha(opacity=0)',
             "background":"#000000",   
             "z-index": "1"
             });
             */

            var containerCss = data.css;
            var imageUrl = data.image.url;
            var imageCss = data.image.css;
            var text = data.text.text;
            var textCss = data.text.css;
            $(ssId).append('<div id="' + ss + 'contentBig"><div class="inner"></div></div>');
            $(ssId + 'contentBig').css(containerCss)
                    .css({
                        'margin': '0 auto',
                        'padding-top': '110px'
                    });
            $(ssId + 'contentBig .inner').css(containerCss)
                    .css({
                        'background-color': '#ffffff',
                        'border': '1px solid #B2B2B2',
                        'position': 'absolute',
                        'z-index': '3000'
                    });
            $(ssId + 'contentBig .inner').append('<img src="' + imageUrl + '"></img>');
            $(ssId + 'contentBig .inner img').css(imageCss).css({
                'position': 'absolute',
                'z-index': '3000'
            });
            $(ssId + 'contentBig .inner').append('<div class="texts">' + text + '</div>');
            $(ssId + 'contentBig .inner .texts').css(textCss).css({
                'position': 'absolute',
                'z-index': '3000'
            });
            
            //$(ssId + 'contentBig .inner').append('<div class="control" id="' + ss + 'close"></div>');
            $(ssId + 'contentBig .inner').append('<img src="img/close.png" class="control" id="' + ss + 'close" />');
            
            $(ssId + 'close')
                    .css({
                        "position": "absolute",
                        "width": "65px",
                        "height": "65px",
                        "top": "-45px",
                        "right": "-45px",
                        //"background": " url(img/close.png) no-repeat 50% 50% / cover",
                        "z-index": "3000"
                    })
                    .bind('click', function() {
                        close();
                    });
            
            transparent();

            function transparent() {
                // create transparent layer to hide background
                $(ssId)
                        .append('<div id="' + ss + 'transperant"></div>');
                $(ssId + 'transperant')
                        .css({
                            "position": "absolute",
                            "width": "1160px",
                            "height": "718px",
                            "background-color": "#ffffff",
                            "top": "0px",
                            "left": "0px",
                            "opacity": "0.8",
                            "filter": "alpha(opacity=80)", // For IE8 and earlier 
                            "z-index": "2000"
                        })
                        .bind('click', function() {
                            close();
                        });
            }
            // video zoom close function
            function close() {
                $(ssId + 'contentBig')
                        .remove();
                $(ssId + 'transperant')
                        .remove();
            }
                        
            $("#" + ss + 'contentBig').dictionary();           
        }

        $('#' + ss + 'thumbs-container').mouseleave(function() {           
            var gthumbs = $(".galeryImage");

            gthumbs.each(function() {
                if (finalActiveImage.attr("id") != $(this).attr("id")) {
                    $(this).animate({"opacity": "1.0"}, 350, 'swing');
                } else {
                    finalActiveImage.stop().animate({"opacity": "1.0", "width": "100%", "left": "0px", "top": "0px"}, 350, 'swing');
                }
            });            
        });
    }

    // apend gallery with 1-7 thumbnails in each thumbnail page (+next pages) 
    function append_gallery() {

        append_html();

        function append_html() {
            var html = '';
            var gallerySounds = [];
            var currSound;

            html += '<div class="navigation-container">';
            html += '	<div id="' + ss + 'thumbs" class="navigation">';
            html += '		<a class="pageLink prev" style="opacity: 0.15;" href="#" title="Previous Page"></a>';
            html += '		<ul class="thumbs noscript">';

            // open each image thumbnail
            for (slide in doO.gallery.slides) {
                
                var currSound = doO.gallery.slides[slide].sound;
                var soundName;
                if ($.trim(currSound) != ""){//alert("in");
                    soundName = currSound.split("/");
                    soundName = soundName[soundName.length-1];
                }else{
                    soundName = "";                    
                }             
                
                //alert(gallerySounds);
                
                var thumb = doO.gallery.slides[slide].thumb;
                var image = doO.gallery.slides[slide].image;
                var desc = doO.gallery.slides[slide].description;                
                
                var captionCss =
                        console.log('Append slide: ' + slide);
                html += '		<li style="opacity: 0.6;" >';
                html += '			<a class="thumb" data-sound_name="' + soundName + '" href="' + image + '" title="">';
                html += '				<img src="' + thumb + '" alt="" />';
                html += '			</a>';
                html += '			<div class="caption">';
                html += '				<div class="image-desc">' + desc + '</div>';
                html += '			</div>';
                html += '		</li>';
            }
            
           
    
    //console.log("gobj",snd);
    
    

            html += '		</ul>';
            html += '		<a class="pageLink next" style="opacity: 0.15;" href="#" title="Next Page"></a>';
            html += '	</div>';
            html += '</div>';

            // slide show container
            html += '<div class="content">';
            html += '	<div class="slideshow-container">';
            html += '		<div id="' + ss + 'loading" class="loader"></div>';
            html += '		<div id="' + ss + 'slides" class="slideshow"></div>';
            html += '	</div>';
            html += '	<div id="' + ss + 'caption" class="caption-container"><div class="image-desc"></div>';
            html += '</div>';
//			html += '		</div>';

            $(ssId).append(html);
        }



        var captionCss = doO.gallery.caption.css;
        $('div#caption').css(captionCss);


        var slidesCss = doO.gallery.imageBlock.css;
        $('div.slideshow-container, div.loader, div.slideshow a.advance-link').css(slidesCss);

        $('div.content').css({
            'font-family': 'Arial',
            'display': 'block'});

        // Initially set opacity on thumbs and add
        // additional styling for hover effect on thumbs
        var onMouseOutOpacity = 0.60;

        // Initialize Advanced Galleriffic Gallery
        var nThumbs = 7;
        var gallery = $('#' + ss + 'thumbs').galleriffic({
            delay: 2500,
            numThumbs: nThumbs,
            preloadAhead: nThumbs,
            enableTopPager: false,
            enableBottomPager: false,
            imageContainerSel: '#' + ss + 'slides',
            captionContainerSel: '#' + ss + 'caption',
            loadingContainerSel: '#' + ss + 'loading',
            renderSSControls: false,
            renderNavControls: false,
            playLinkText: 'Play Slideshow',
            pauseLinkText: 'Pause Slideshow',
            prevLinkText: '&lsaquo; Previous Photo',
            nextLinkText: 'Next Photo &rsaquo;',
            nextPageLinkText: 'Next &rsaquo;',
            prevPageLinkText: '&lsaquo; Prev',
            enableHistory: false,
            autoStart: false,
            syncTransitions: false,
            defaultTransitionDuration: 1000,
            onSlideChange: function(prevIndex, nextIndex) {//alert("ss");
                // 'this' refers to the gallery, which is an extension of $('#thumbs')
                //console.log($(this))
                this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);

                // Update the photo index display
                this.$captionContainer.find('div.photo-index')
                        .html('Photo ' + (nextIndex + 1) + ' of ' + this.data.length);
            },
            onPageTransitionOut: function(callback) {
                this.fadeTo('fast', 0.0, callback);
            },
            onPageTransitionIn: function() {
                var prevPageLink = this.find('a.prev').css('opacity', '0.15');
                var nextPageLink = this.find('a.next').css('opacity', '0.15');

                // Show appropriate next / prev page links
                if (this.displayedPage > 0)
                    prevPageLink.css('opacity', '1');

                var lastPage = this.getNumPages() - 1;
                if (this.displayedPage < lastPage)
                    nextPageLink.css('opacity', '1');

                this.fadeTo('fast', 1.0);
            }
        });

        $(".navigation-container li").on("mouseover", function() {
            $(this).stop().animate({"opacity": "1.0"}, 350, 'swing');

        }).on("mouseout", function() {
            if (!$(this).hasClass("selected")) {
                $(this).stop().animate({"opacity": "0.6"}, 350, 'swing');
            }
        });

        /**************** Event handlers for custom next / prev page links **********************/
        
        var allThumbs = gallery.find(".thumb");
        var thumbsCount = 0;
        
        allThumbs.each(function(){
            thumbsCount++;            
        });    
        
        //alert(thumbsCount);
        
        if (thumbsCount <= nThumbs){
            gallery.find(".pageLink").css("visibility","hidden");
        }
        
        gallery.find('a.prev').click(function(e) {
            gallery.previousPage();
            e.preventDefault();
        });

        gallery.find('a.next').click(function(e) {
            gallery.nextPage();
            e.preventDefault();
        });
        
        //$(".slideshow-container .advance-link").unbind("click");
    }

    function append_videos() {
        for (video in doO.videos) {
            append_video_2(video);
        }

        function append_video_2(content) {						// level 1 function
            console.log('Append: ' + content)
            var video = doO.videos[content].video;
            
            // var splashImg = doO.videos[content].splashImg;
            
            var css = doO.videos[content].css;
            var fs = doO.videos[content].fullscreen;
            var image = doO.videos[content].image;
            var imageCss = doO.videos[content].imageCss;
            console.log(imageCss);

            console.log('Video: ' + video)

            if (fs) {
                $(ssId).append('<div id="' + ss + content + 'img"><img class="' + ss + content + 'imgInner" src="' + image + '"></img></div>');
                $('#' + ss + content + 'img img').css(imageCss);
                console.log('Image added');
                
               
                
                
                
                $(ssId).append('<div id="' + ss + content + 'zoomCont" style="float:left"><div id="' + ss + content + 'zoom_play" class="playbt"></div><div class="t5zoomD" id="' + ss + content + 'zoom"></div></div>');
                console.log('zoom added');
                
                
                
              $('#' + ss + content + 'zoom').bind('click', {video: video, css: css, fs: fs}, function(event) {
                    event.stopPropagation();
                    showVideo(event.data.video, event.data.css, event.data.fs);
                });
                
                
                
                $('#' + ss + content + 'zoom').css(imageCss).css({
                    "position": "absolute",
                    "display": "block",
                    'opacity': '0.0',
                    'filter': 'alpha(opacity=0)',
                    "background": "#000000",
                    "z-index": "1",
                    "float": "left"
                }).on('mouseenter', function() {
                            $(this).animate({
                                "opacity": "0.2",
                                "background": "#000000"
                            }, 'fast');
                        })
                        .on('mouseleave', function() {
                            $(this).stop(true).animate({
                                "opacity": "0.0",
                                "background": "#000000"
                            }, "fast");
                        });                        
                //var rp = resizerPerform();  
                //alert(resizeAddValue);               
                //if(typeof resizeAddValue == 'undefined'){  
                
                //if (!("resizeAddValue" in window) || !$.browser.mozilla){
                 //   resizeAddValue = 1;
               // }                
                
                 //alert(resizeAddValue);
                
                var playBt = $(ssId).find('#'+ss + content + 'zoom_play');
                var playCont = $(ssId).find('#'+ss + content + 'zoom');
                playBt.css("top", (playCont.position().top / resizeAddValue ) + ((playCont.height()  / 2) - (playBt.height()  / 2)));
                playBt.css("left", (playCont.position().left / resizeAddValue) + ((playCont.width()  / 2) - (playBt.width()  / 2)));

            } else {
                showVideo(video, css, fs);
            }
            

            function showVideo(video, css, fs) {
//alert(fs);
                $(ssId).append('<div class="flow_video" id="' + ss + 'video"></div>');        
                
                if (fs == 1){
                    css["display"] = "none";
                }
                
                $(ssId + 'video').css(css);               
                
               
            if (image != undefined && image != "" && fs != 1){
                var splashBg = "url("+image+") no-repeat";
                var splashCss={
                   "background":splashBg                    
                };
                $(ssId + 'video').css(splashCss);
            }
                //$(ssId + 'video').append("<div class='end-screen'>This end es, images and buttons. Its all about <em>designing the next step</em>.</div>");
               var fp =  $(ssId + 'video').flowplayer({                  
                   
                    playlist: [
                        [
                            {mp4: video}
                        ]
                    ],
                    embed: false,
                    fullscreen: false,
                    adaptiveRatio: true,
                    /*splash: true*/
                });
                
                
                
               /* flowplayer(function (api, root) {
 
  api.bind("load", function () {
 
   
 
  }).bind("ready", function () {
    api.play(30);
   
 
  });
 
});*/
               
                 api = fp.data("flowplayer");
              //  api.bind("ready", function() {  alert("ready1");                           
                    
                    if (fs == 1){
                        var vobj = $(ssId + 'video');                
                        /*var mLeft = vobj.outerWidth() / 2;
                        var mTop = vobj.outerHeight() / 2; 
                       // alert(mTop);
                       
                       cssPopup = {
                           "margin-top":-mTop,
                           "margin-left":-mLeft,
                           "top":"50%",
                           "left":"50%",
                           "position":"absolute",
                           "display":"block"                          
                       };*/
                    
                   setWindowPosition(vobj, vobj.outerWidth(), vobj.outerHeight()); //position before load
                        
                       
                   api.bind("ready", function(e, api) {
                       
                       /* var vobj = $(ssId + 'video');                
                        var mLeft = vobj.outerWidth() / 2;
                        var mTop = vobj.outerHeight() / 2; 
                                             
                       cssPopup = {
                           "margin-top":-mTop,
                           "margin-left":-mLeft,
                           "top":"50%",
                           "left":"50%",
                           "position":"absolute",
                           "display":"block"                          
                       };             
                       
                      vobj.css(cssPopup);  */
                     // setWindowPosition(); //position after load
                      //alert(api.video.width);
                      setWindowPosition(vobj, vobj.outerWidth(), vobj.outerHeight());
                      api.play();                         
                   });  
                    
                    //vobj.css(cssPopup);                  
                  
                }
                    
               // });               

                if (fs == 1) {
                    transparent();                  
                    //$(ssId + 'video').append('<div class="control" id="' + ss + 'close"></div>');
                    $(ssId + 'video').append('<img src="img/close.png" class="control" id="' + ss + 'close" />');
                    $(ssId + 'close')
                            .css({
                                "position": "absolute",
                                "width": "65px",
                                "height": "65px",
                                "top": "-45px",
                                "right": "-45px",
                                //"background": " url(img/close.png) no-repeat 50% 50% / cover",
                                "z-index": "3"
                            })
                            .bind('click', function() {
                                closeVideo();
                            });                    
                
                          
                
                }
            }

            // video zoom close function
            function closeVideo() {
                api.stop();
                delete api;
                $(ssId + 'close')
                        .remove();
                $(ssId + 'video')
                        .remove();
                $(ssId + 'transperant')
                        .remove();
            }

            // create transparent layer to hide background
            function transparent() {
                $(ssId)
                        .append('<div id="' + ss + 'transperant"></div>');
                $(ssId + 'transperant')
                        .css({
                            "position": "absolute",
                            "width": "1160px",
                            "height": "718px",
                            "background-color": "#ffffff",
                            "top": "0px",
                            "left": "0px",
                            "opacity": "0.8",
                            "filter": "alpha(opacity=80)", /* For IE8 and earlier */
                            "z-index": "999"
                        })
                        .bind('click', function() {
                            closeVideo();
                        });
            }
        }
    }
    
    function setWindowPosition(vobj, width, height){
       // var vobj = $(ssId + 'video');                
        var mLeft = width / 2;//vobj.outerWidth() / 2;
        var mTop = height / 2;//vobj.outerHeight() / 2; 
       // alert(mTop);

       cssPopup = {
           "margin-top":-mTop,
           "margin-left":-mLeft,
           "top":"50%",
           "left":"50%",
           "position":"absolute",
           "display":"block"                          
       };
        
       vobj.css(cssPopup);   
        
    }
}