(function($) {
var transitionIsHappening = false,
dummyRepl = '',
hasFeaturedTile = false,
duration = $('#ie6').length == 0 ? 750 : 0,
fullWidth = 656,
fullHeight = 489,
smallWidth = 155,
smallHeight = 155,
text_closeBtn = 'Schließen';
function openModal() {
new OmniTrack('Module', [6], function(target) {
this.LinkName = $(target).parents('li.tile:first').children('h2').text() + ':Step-by-Step';
}).Track(this);
var code = $(this).parents('.tutorial:first').children('div.tutorial-content'),
title = code.find('h1').text(),
id = code.find('h6').text(),
content = code.find('div.content').html(),
modal = $(''),
body = $('body'),
center = function() {
if (modal) {
var deltas = { x: 0, y: 0 },
dialogH = modal.height(),
viewportH = window.innerHeight !== undefined ? window.innerHeight : document.documentElement.clientHeight,
dialogW = modal.width(),
viewportW = window.innerWidth !== undefined ? window.innerWidth : document.documentElement.clientWidth;
deltas.y = viewportH - dialogH;
deltas.x = viewportW - dialogW;
offsetY = deltas.y > 0 ? deltas.y / 2 + document.documentElement.scrollTop : document.documentElement.scrollTop,
offsetX = deltas.x > 0 ? deltas.x / 2 + document.documentElement.scrollLeft : document.documentElement.scrollLeft,
css = {};
if (deltas.y > 0) css.top = Math.floor(offsetY) + 'px';
if (deltas.x > 0) css.left = Math.floor(offsetX) + 'px';
modal.css(css);
}
else {
$(window).unbind('scroll', center).unbind('resize', center);
}
};
modal.find('h1').text(title);
modal.find('div[role=main]').html(content);
modal.find('a.closeModal').click(function() {
$('#modalOverlay').add(modal).fadeOut(250, function() {
$(this).remove();
});
delete modal;
return false;
});
body.append('');
body.append(modal.hide());
center();
modal.fadeIn(250);
$(window).bind('scroll', center).bind('resize', center);
return false;
};
//new function to open a video link
function openVideo() {
new OmniTrack('Module', [6], function (target) {
this.LinkName = $(target).parents('li.tile:first').children('h2').text() + ':Step-by-Step';
}).Track(this);
var code = $(this).parents('.tutorial:first').children('div.video-content'),
title = code.find('h1').text(),
id = code.find('h6').text(),
content = code.find('div.content').html(),
modal = $(''),
body = $('body'),
center = function () {
if (modal) {
var deltas = { x: 0, y: 0 },
dialogH = modal.height(),
viewportH = window.innerHeight !== undefined ? window.innerHeight : document.documentElement.clientHeight,
dialogW = modal.width(),
viewportW = window.innerWidth !== undefined ? window.innerWidth : document.documentElement.clientWidth;
deltas.y = viewportH - dialogH;
deltas.x = viewportW - dialogW;
offsetY = deltas.y > 0 ? deltas.y / 2 + document.documentElement.scrollTop : document.documentElement.scrollTop,
offsetX = deltas.x > 0 ? deltas.x / 2 + document.documentElement.scrollLeft : document.documentElement.scrollLeft,
css = {};
if (deltas.y > 0) css.top = Math.floor(offsetY) + 'px';
if (deltas.x > 0) css.left = Math.floor(offsetX) + 'px';
modal.css(css);
}
else {
$(window).unbind('scroll', center).unbind('resize', center);
}
};
modal.find('h1').text(title);
modal.find('div[role=main]').html(content);
modal.find('a.closeModal').click(function () {
$('#modalOverlay').add(modal).fadeOut(250, function () {
$(this).remove();
});
delete modal;
return false;
});
body.append('');
body.append(modal.hide());
center();
modal.fadeIn(250);
$(window).bind('scroll', center).bind('resize', center);
return false;
};
function grow(tile) {
var tile = $(tile).find('div.bg-short');
if (transitionIsHappening || tile.data('expanded')) return;
var css = { width: 215, height: 215, top: -30, left: -30 };
if (duration > 0) {
tile.stop().animate(css, 200);
}
else {
tile.css(css);
}
tile.parent().css('z-index', 100);
};
function shrink(tile) {
var tile = $(tile).find('div.bg-short');
if (tile.data('expanded')) return;
var css = { width: 155, height: 155, top: 0, left: 0 };
if (duration > 0) {
tile.stop().animate(css, 200);
}
else {
tile.css(css);
}
tile.parent().css('z-index', 0);
};
function substitute(tile) {
tile = $(tile);
var pos = tile.offset(),
repl = $(dummyRepl);
tile.css({ position: 'absolute', top: pos.top, left: pos.left });
repl.css({ width: tile.width(), height: tile.height() }).insertBefore(tile);
return repl;
};
function restore(tile) {
$(tile).css({ position: 'relative', top: 0, left: 0 });
};
function swap(next, skipRemove) {
transitionIsHappening = true;
last = $('li.tile:first').stop();
next = $(next).stop();
var scrollTop = document.documentElement.scrollTop !== undefined ? document.documentElement.scrollTop : document.body.scrollTop,
lastRepl = skipRemove ? null : substitute(last),
nextRepl = skipRemove ? null : substitute(next),
lastOffset = last.offset(),
nextOffset = next.offset(),
finalize = function() {
if (!skipRemove) {
restore(last);
last.data('expanded', false);
nextRepl.replaceWith(last);
lastRepl.replaceWith(next);
initTile(last);
}
restore(next);
next.data('expanded', true);
next.css('z-index', 0);
transitionIsHappening = false;
finalize = place = last = next = lastRepl = nextRepl = nextOffset = null;
hasFeaturedTile = true;
},
postPlace = function() {
next.addClass('tile-feature').removeClass('tile-short');
if (!skipRemove) {
last.addClass('tile-short').removeClass('tile-feature').css({ width: smallWidth, height: smallHeight, top: nextOffset.top, left: nextOffset.left });
last.children('div.bg-feature').hide();
last.children('div.bg-short').removeAttr('style');
last.children('h2').removeAttr('style');
if (duration > 0) {
last.hide().fadeIn(duration, function() {
finalize();
});
}
else {
last.show();
finalize();
}
}
else {
finalize();
}
},
place = function() {
nextTitle = next.children('h2').hide();
nextFeature = next.children('div.bg-feature').show();
nextShort = next.children('div.bg-short').show().animate({ opacity: 0 }, duration);
if (duration > 0) {
next.animate({ width: fullWidth, height: fullHeight }, duration, postPlace);
}
else {
next.css({ width: fullWidth, height: fullHeight });
postPlace();
}
};
next.css('z-index', 200);
if (skipRemove) {
$('#tile-container').prepend(next);
place();
}
else if (duration > 0) {
next.animate({ width: smallWidth, height: smallHeight, top: lastOffset.top, left: lastOffset.left }, duration, place);
}
else {
place();
}
if (document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = scrollTop;
}
else {
document.body.scrollTop = scrollTop;
}
$('html, body').animate({ scrollTop: 0 }, duration);
};
function expand(tile) {
new OmniTrack('Module', [5], function(target) {
this.LinkName = $(target).children('h2').text();
}).Track(tile);
swap(tile, !$('li.tile:first').data('expanded'));
};
function collapse(tile) {
transitionIsHappening = true;
tile = $(tile).stop();
var finalize = function() {
var last = $(this).removeClass('tile-feature').addClass('tile-short').data('expanded', false);
last.children('div.bg-feature').hide();
last.children('div.bg-short').removeAttr('style');
last.children('h2').removeAttr('style');
last.removeAttr('style');
transitionIsHappening = false;
};
if (duration > 0) {
tile.animate({ width: smallWidth, height: smallHeight }, duration, finalize);
}
else {
tile.css({ width: smallWidth, height: smallHeight });
finalize.call(tile);
}
};
function initTile(node) {
if (!$(node).hasClass('has-feature')) return;
$(node).mouseover(function() {
grow(this);
}).mouseout(function() {
shrink(this);
}).click(function() {
var tile = $(this);
if (transitionIsHappening || !tile.hasClass('has-feature') || tile.data('expanded')) return false;
expand(tile);
// id für Tracking lesen
node = $(node);
var container = node.find('div.fg-feature'),
id = node.attr('id').replace('tile-', ''),
title = document.title,
url = window.location.toString().split('?')[0] + '?tile=' + encodeURIComponent(id);
trackClick('M_HMPC_KleinKachel_'+id, tracking_pageID, node);
});
$('a.tutorial-link', node).click(openModal);
$('a.video-link', node).click(openVideo);
$('a.collapse-tile-link', node).click(function() {
if (transitionIsHappening) return false;
collapse($(this).parents('li.tile:first'));
return false;
});
/* $('a.share-link', node).click(function() {
node = $(node);
var container = node.find('div.fg-feature'),
id = node.attr('id').replace('tile-', ''),
title = document.title,
url = window.location.toString().split('?')[0] + '?tile=' + encodeURIComponent(id);
window.open('http://www.facebook.com/share.php?u='+url+'&title=Hotmail – Das neue Einfach | Windows Live Hotmail', '_blank');
});*/
};
function addFeatureElements(node) {
node = $(node);
var container = node.find('div.fg-feature'),
id = node.attr('id').replace('tile-', ''),
title = document.title,
url = window.location.toString().split('?')[0] + '?tile=' + encodeURIComponent(id);
$('
').prependTo(container);
};
function forceShow(tile) {
var tile = $(tile);
if (tile.length < 1) {
tile = $('#tile-intro');
}
tile.stop().removeClass('tile-short').addClass('tile-feature');
if ($('li.tile:first').get(0) != tile.get(0)) {
tile.remove().prependTo('#tile-container');
}
tile.data('expanded', true);
$('html, body').animate({ scrollTop: 0 }, duration);
hasFeaturedTile = true;
};
(function() {
var query = window.location.search,
index = query ? query.toLowerCase().indexOf('tile=') : -1,
initId = 'intro';
if (index > -1) {
query = query.toLowerCase();
var end = query.indexOf('&', index);
initId = query.slice(index, end > -1 ? end : query.length).split('=')[1];
}
forceShow('#tile-' + initId);
})();
$(document).ready(function() {
$('li.tile').each(function() {
addFeatureElements(this);
initTile(this);
});
$('#mastheadLinks a').click(function(e) {
new OmniTrack('TN', [4]).Track(this);
});
});
})(jQuery);
