// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {
    $("#portal-search").tooltip({
        tip: '#portal-searchbox', 
        //important since some container are positioned
        relative: true,
        // tweak the position 
        // position: "bottom right",
        // offset: [-3, -175]
        position: "bottom left",
        offset: [-2, 17] 
    });

    $(".navTreeLevel0 > li > div").tooltip({
        tip: '.navTreeLevel2',
        relative: true,
        position: "bottom center",
        offset: [-4, 0]
    });
    
    
    //     
    // TABS
    // 
    // setup ul.tabs to work as tabs for each div directly under div.panes 
    // history is needed for the drop down list eventually only add this
    // for stores since it might break other pages
    $("ul.tabs").tabs("div.panes > div");
    // // todo: not sure about the history thing enable if i get the url to look properly
    // $("ul.tabs").tabs("div.panes > div").history();
    
    // Note: tried variious effects though had problems with the 3/thierd pane ... 
    // not critical for now but could be nice to have for other projects 
    // $("ul.tabs").tabs("div.panes > div", {effect: 'fade', fadeOutSpeed: 400});
    // Note:turn on history (though dont play so well with pages with vertical scroll):
    // $("ul.tabs").tabs("div.panes > div").history();
   
    //     
    // SLIDESHOW
    // 
    $("div.slideTabs").tabs(".slideshow > .slide", { 
     
        // Note: fade seems to behave a bit odd what do i do wrong in the markup - css etc ? 
        // enable "cross-fading" effect 
        // effect: 'fade', 
        // fadeOutSpeed: "slow", 
     
        // start from the beginning after the last tab 
        rotate: true 
     
    // use the slideshow plugin. It accepts its own configuration 
    }).slideshow({autoplay:true, interval: 3000, autopause: true});


    // // note: i like to set a different interval for each "slideshow"...
    // // but the dont work well it meregs all image to one slideshow: 
    // 
    // $.each($("div.slideTabs"), function(i, j) {
    //   // var width = $(this).width();
    //   // $(this).css("width", width);
    //   $(this).tabs(".slideshow > .slide", { 
    //         // start from the beginning after the last tab 
    //         rotate: true
    //     // use the slideshow plugin. It accepts its own configuration 
    //     }).slideshow({autoplay:true, interval: 4500, autopause: true});
    // });
   
    //     
    // SCROLL
    // 
    // initialize scrollable
    $("div.scrollable").scrollable();
       
       
    //     
    // GALLERY - IMAGEVIEWER
    // 
    // todo: perhaps look into a preload approach
    // http://flowplayer.org/tools/demos/combine/portfolio/preload.html
    // other wise use that preload lib used on some previous projects
    $(".galleryWrapper .items img").click(function() {
    
        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        
        // local test specific
        // var url = $(this).attr("src").replace("_t", "");
        
        // plone specific
        var url = $(this).attr("src").replace("image_tile", "image_preview_gallery");
        
        var caption = $(this).attr("alt");
    
        // get handle to element that wraps the image and make it semitransparent
        // var wrap = $(".galleryWrapper .imageWrapper").fadeTo("medium", 0.5);
        // note: migth need to be adjusted if multiple viewers are at the same page
        var wrap = $(".galleryWrapper .imageWrapper").fadeTo("fast", 1);
    
        // the large image from flickr
        var img = new Image();
    
        // call this function after it's loaded
        img.onload = function() {
    
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);
            // change the image
            wrap.find("img").attr("src", url);
        };
        // begin loading the image from flickr
        img.src = url;
        // set image caption
        $("div.imageCaption").html(caption);
    
    // when page loads simulate a "click" on the first image
    }).filter(":first").click();



    //     
    // COLLECTION VIEWER
    // 

    //  tryout to add markup with js but it seems to hang the overlay
    $("#footer-wrapper").after('<div class="simple_overlay" id="gallery"><a class="prevImage"></a><a class="nextImage"></a><div class="info"></div></div><div class="collectionTip"></div>');

    // // default
    // var offset = [0, 0];
    // // ff
    // if ( $.browser.mozilla ) {var offset = [-82, -2];};
    // // ie6
    // if ( $.browser.msie && $.browser.version < 7 ) {var offset = [-82, 76];};
    // // ie7
    // if ( $.browser.msie && $.browser.version > 6 ) {var offset = [-82, -37];};    
    // // safari
    // if ( $.browser.safari ) {var offset = [-82, -133];};
    // // // crome (nice to have is so fare cached by the safari/webkit)
    // // var offset = [-82, 57]

    // todo: calculate offset based on browser
    // note: we need to differ here between .lookbook and .press 
    // dont use .collection for this on previously we differed with template class but we cant count on that
    // $(".lookbook .item a").tooltip({
    //     tip: '.collectionTip',
    //     // effect: 'fade',
    //     position: "bottom left",
    //     offset: [-40, 124]
    // });
    $(".lookbook .item .notWideImage img").tooltip({
        tip: '.collectionTip',
        position: "top left",
        offset: [174, 123]
    });
    //wide images need some tweaks for the offset: 123+82
    $(".lookbook .item .wideImage img").tooltip({
        tip: '.collectionTip',
        position: "top left",
        offset: [174, 205]
    });
    
    // $(".collection img[title]").tooltip('.collectionTip');
    
    //todo: loo into that title problem
    // $(".lookbook .item a img").tooltip({
        // position: "top left",
        // offset: [184, 124]
    
    // $(".press .item a").tooltip({
    //     tip: '.collectionTip',
    //     // effect: 'fade',
    //     position: "bottom left",
    //     offset: [-40, 248]
    // });
    $(".press .item a img").tooltip({
        tip: '.collectionTip',
        // effect: 'fade',
        position: "top left",
        offset: [300, 247]
    });
    
    
    
// todo: adjust when plone image scales is set
// image_preview | image_large etc...
var image_scale = "/image_mini"; //tile.jpg
var overlay_width = 165;
var overlay_min_height = 247;
if ( $.browser.msie && $.browser.version < 7 ) {
    var viewpoint_height = 600;    
} else {
    var viewpoint_height = $(window).height();
};
// todo: remember to adjust/compensate viewpoint_height for theplaced ment of the overlay top placement
if(viewpoint_height>600 && viewpoint_height<=1000){
    //show the medium image - should likely be set to 620 but recalculate when all margins/paddings are set
    // test
    // image_scale = "medium.jpg";
    // plone
    image_scale = "/image_preview";
    overlay_width = 402; // 400+2
    overlay_min_height = 602; // 600+2
} else if(viewpoint_height>1000){
    //show the large image - should likely be set to 920 but recalculate when all margins/paddings are set
    image_scale = "/image_large";//large.jpg
    overlay_width = 607; // 605+2
    overlay_min_height = 909; // 907+2
};

// collections lookbook / press

// // test specific
// $(".collection a").attr('href', function() {
//     // in a plone setup replace thumb.jpg with "/view"
//     return $(this).attr('href').replace("thumb.jpg", image_scale);
// });
// $(".press a").attr('href', function() {
//     // in a plone setup replace thumb.jpg with "/view"
//     return $(this).attr('href').replace("tile.jpg", image_scale);
// });

// plone specific
// first wide images
var image_scale_wide = image_scale + '_wide';
$(".collection a.wideImage").attr('href', function() {
    // in a plone setup replace thumb.jpg with "/view"
    return $(this).attr('href').replace("/view", image_scale_wide);
});

// then others
$(".collection a").attr('href', function() {
    // in a plone setup replace thumb.jpg with "/view"
    return $(this).attr('href').replace("/view", image_scale);
});


$(".simple_overlay").css({ 
    // note: dont use width here its overriden in overlay somewhere
    'min-width': overlay_width+'px',
    'min-height': overlay_min_height+'px'
});

//now show content - hmmm dosent work bellow of $(".collection a").overlay(
$('.js #page-loader').addClass('hidden');
$(".js #content").css('display','block');



// select the thumbnails and make them trigger our overlay
// ie dont like to have gallery() on an empty api so ensure to check first  http://tr.im/NBBb
// in ie $(".collection a") returns [object Object] even if empty
var collection_items = $(".collection a");
if (collection_items.length) {

collection_items.overlay({
    
     // each trigger uses the same overlay with the id "gallery"
     target: '#gallery',
     // optional exposing effect
     // expose: '#f1f1f1',
    expose: '#000',
    top:  24,
    speed: 0

// let the gallery plugin do its magic!
}).gallery({    
    // // resource: http://flowplayer.org/tools/overlay.html#gallery
    // activeClass      'active'     The CSS class name for the trigger element which corresponds to the current image.
    // autohide     true    Specifies whether the next/prev buttons and the info box are automatically hidden. If this is set to false then these elements are always shown.
    // disabledClass    'disabled'  The CSS class name for disabled next and prev elements. For example, the prev element is disabled when there are no previous items to scroll to.
    // imgId    img     The id of the image that will be generated inside the overlay.
    // info     '.info'     Selector for the nested element where the image information is placed.
    // next     '.next'     Selector for the nested element to which a "next image" action should be bound.
    // preload  true    Specifies whether the previous and next images are automatically loaded into the browser's cache.
    // prev     '.prev'     Selector for the nested element to which a "previous image" action should be bound.
    // progress     '.progress'     Selector for the nested element that works as the loading indicator. Currently an animated GIF is the only viable option but in the future this may be an animated PNG.
    // opacity  0.8     The transparency setting for tne next/prev and information elements. A decimal value from 0 to 1. A bigger value means less transparency while a value of 0 is fully transparent (invisible).
    // speed    slow    The speed of how fast the overlay is resized when the image is changed.
    // template         A pattern that specifies how the information is formatted inside the info box. By default following string will be used
    // 
    // '<strong>${title}</strong> <span>Image ${index} of ${total}</span>'

 // the plugin accepts its own set of configuration options
    // speed: 800
    
    progress: '.progressRenamed', // workaround not to show loader might be done more nice
    prev: '.prevImage',
    next: '.nextImage',
    opacity:  1,
    autohide: false,
    speed: 0, // default: slow
    template: '<h2>${title}</h2>'
});

}; // if collection item check finished

}); // END document ready