/***
* Simple function to get the url parameter
* Get object of URL parameters = > var allVars = $.getUrlVars();
* Getting URL var by its nam => var byName = $.getUrlVar('name');
**/
$.extend({
    getUrlVars: function () {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        return $.getUrlVars()[name];
    }
});

/**
* hovering over a picture in IE displays the alt attribute
* while FF displays the title attribute. SharePoint and EPiServer
* have a alt field but no title field. The code below create a title
* attribute for all images in the page and fill it out with the content
* of the alt attribute.
**/
$(document).ready(function(){
    $('img[alt]').each(function(i, item){
        $(item).attr("title",item.alt);
    });
});


/* popup function. Applies on any link having class="popup".
* cliking the link will open the link in a pop up windows    
* you can possibly put options in the a tag "title" attribute.
* for instance <a href="page.htm" title="width=600, height=800">open popup</a>
*/
$(document).ready(function() {

    $('.popup').click(function(event) {
        event.preventDefault();
        var link = $(this).attr('href');
        var options = $(this).attr('title');
        window.open(link, 'popup', options);
    });

});



/** 
* ligth Pictures library. Applies to any img wrap within 
* a div element with css class epi_gallery. Hide all photos 
* except the first one. requires ligthBox plugin.
*
* example :
* <div class="epi_gallery">
*	<img src="images/one.png" width="128" height="149" />
*	<img src="images/two.png" width="128" height="149" />
* </div>
*/
$(document).ready(function() {

    if(typeof jQuery.fn.lightBox == 'function') {
        // remove the instruction used to create the gallery
        $('.delimiter').remove();

        // removes the brackets located before the first picture
        // and after the last one.
        var photos = $(".epi_gallery").html();
        if (photos != null || photos != undefined){
	        var cleaned = photos.substr(1,photos.length-2);
	        $(".epi_gallery").html(cleaned);
        }
        
        // wrap the img tag with <a /> tag to fulfill 
        // lightBox plugin requirements
        $('.epi_gallery img').each(function() {
            var a = $(document.createElement('a'));
            a.attr('href', $(this).attr('src'));
            $(this).wrap(a);
        });

        // show only the first pictures 
        $('.epi_gallery img').hide();
        $('.epi_gallery img:first').show();
        $('.epi_gallery img:first').css('border', 'solid 1px black');


        // set caption text
        var num = $(document.createElement('div'));
        num.css({ 'font-size': 'small' });
        num.html('<p>click to view the ' + $('.epi_gallery img').length + ' pictures</p>');
        $('.epi_gallery').append(num);

        // start ligthBox plugin
        $('.epi_gallery a').lightBox();
    }
});

/**
* another picture gallery plugin. 
!! it's based on ID !! so only one per page.
* example :
* <div id="epi_gallery">
*	<img src="images/one.png" width="128" height="149" />
*	<img src="images/two.png" width="128" height="149" />
* </div>
**/
$(document).ready(function() {
    if(typeof jQuery.fn.spacegallery == 'function') {
        $('#myGallery').spacegallery();
    }
});


/**
* create tabs on class attribute with "tab_panels" as value
* structure should be as following :
* <div class="tab_panels">
*   <ul>
*       <li><a href="#tab1">tab one</a></li>
*       <li><a href="#tab2">tab two</a></li>
*   </ul>
*   <div id="tab1">content of tab one</div>
*   <div id="tab2">content of tab two</div>*
* </div>
**/
//$(document).ready(function() {
//    if(typeof jQuery.fn.tabs == 'function') {
//        $('.tab_panels').tabs();
//    }
//});



/****/
var p_more_visible = false;
function p_toggle_more_units() {

    try {
        var element = document.getElementById("more_units");
        if (p_more_visible) {
            p_more_visible = false;
            element.style.display = "none";
        }
        else {
            p_more_visible = true;
            element.style.display = "block";
        }

    }
    catch (e) {
        p_more_visible = true;
        element.style.display = "block";
    }
}


// twitter button. First it's a simple emtpy anchor in the default master page.
// we have some js code to fill it with an image and create the link using the
// current page title and url

$(document).ready(function() {

    var $url = '/images/other/twitter.jpg';
    var $a = $("a[name=twitter_share]");
    var $link = "http://twitter.com/home?status=Currently reading: " + document.title + " - " + window.location;

    $a.html("<img src=" + $url + " alt='Tweet me !' border='1px' />");
    $a.attr("href", $link);
    $a.attr("target", "_blank");
    $a.css("vertical-align", "-5px");
});