/*
* Outgoing Bar script, will place the blue outgoing bar with logos at the top of the page.
* Bar will expand to reveal logos on hover.
* Requires jQuery, jQuery UI and
* All css is done via jquery or inline styles in this file to avoid having to include extra files.
*/
/* darkens colour for the border of the bar */
function changeColour(color, v) {
"use strict";
if (color.length > 6) { color = color.substring(1, color.length); }
var rgb = parseInt(color, 16),
r = Math.abs(((rgb >> 16) & 0xFF) + v),
g = Math.abs(((rgb >> 8) & 0xFF) + v),
b = Math.abs((rgb & 0xFF) + v);
if (r > 255) { r = r - (r - 255); }
if (g > 255) { g = g - (g - 255); }
if (b > 255) { b = b - (b - 255); }
r = Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16);
if (r.length === 1) { r = '0' + r; }
g = Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16);
if (g.length === 1) { g = '0' + g; }
b = Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16);
if (b.length === 1) { b = '0' + b; }
return "#" + r + g + b;
}
(function ($) {
"use strict";
$.fn.outgoingBar = function (params) {
var $container,
$outgoing_bar_logos,
$outgoing_bar_logos_inner,
$outgoing_bar_tab,
$outgoing_bar_tab_container,
i;
/* load configuration
* @param containerWidth - width of the logo container and also the tab will be aligned to the right of this width...
* @param siteName - name of the site the bar is being used on - used for the 'title' attribute of tab "site_name is part of the Outgoing.co.uk family"
* @param background - background colour of the bar - maybe the outgoing blue will clash with future sites or a different colour is preferre
* @param logos - the logos to load, an array of arrays which contain [Site Name, Site URL, Logo URL]
*/
params = $.extend({
containerWidth: 960,
siteName: 'Outgoing',
background: '#00bff2',
logos: [
['Outgoing', 'http://www.outgoing.co.uk', 'http://www.outgoing.co.uk/img/tab-logos/OG_logo.png'],
['Be Outgoing', 'http://www.beoutgoing.com', 'http://www.outgoing.co.uk/img/tab-logos/be_logo.png'],
['Snowbombing', 'http://www.snowbombing.com', 'http://www.outgoing.co.uk/img/tab-logos/sb_logo.png'],
['Summer Break', 'http://www.summerbreak.co.uk', 'http://www.outgoing.co.uk/img/tab-logos/sbrk_logo.png'],
['SportsVest', 'http://www.sportsvest.co.uk', 'http://www.outgoing.co.uk/img/tab-logos/sv_logo.png'],
['Outgoing Ski', 'http://www.outgoing.co.uk/student-ski', 'http://www.outgoing.co.uk/img/tab-logos/ogski_logo.png'],
['Big Green Coach', 'http://www.biggreencoach.co.uk', 'http://www.outgoing.co.uk/img/tab-logos/bgc_logo.png']
]
}, params);
/* remove # from colour so it can be darkened via changeColour function */
params.background = params.background.replace('#', '');
/* position the bar at the top of the window */
$container = $(this);
$container.css({ position: 'fixed', zIndex: '9000', height: 0, width: '100%', top: 0 });
/* add in logos div with initial height of 3px */
$outgoing_bar_logos = $('');
/* inner logo container with width equal to params.containerWidth */
$outgoing_bar_logos_inner = $('');
/* insert each logo into $outgoing_bar_logos_inner */
for (i = 0; i < params.logos.length; i = i + 1) {
$outgoing_bar_logos_inner.append('
');
}
$outgoing_bar_logos.append($outgoing_bar_logos_inner);
$container.append($outgoing_bar_logos);
/* tab containing the outgoing logo and like button */
$outgoing_bar_tab_container = $('');
$outgoing_bar_tab = $('');
$outgoing_bar_tab_container.append($outgoing_bar_tab);
$container.append($outgoing_bar_tab_container);
$container.hover(function () {
$('#outgoing-bar-logos').clearQueue();
$('#outgoing-bar-logos').animate({ height: 50 }, 400, 'easeOutQuart');
}, function () {
$('#outgoing-bar-logos').clearQueue();
$('#outgoing-bar-logos').animate({ height: 3 }, 400, 'easeOutQuart');
});
/* hover effects for the logos, initially they are faded out but as you hover over each one opacity is higher */
$('#outgoing-bar-logos img').attr('style', 'padding: 0 15px 0 0; margin-top: 8px; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-transition: all 0.10s ease-in; -moz-transition: all 0.10s ease-in; -o-transition: all 0.10s ease-in; transition: all 0.10s ease-in;');
$('#outgoing-bar-logos img').first().css({ 'margin-left': 78, 'margin-top': 7 });
$('#outgoing-bar-logos img').first().css('margin-left', 78);
$('#outgoing-bar-logos img').hover(function () {
$(this).css('opacity', 1);
}, function () {
$(this).css('opacity', 0.5);
});
return this;
};
})(jQuery);