options.steps[_index] = $.extend(
true, {}, $.fn.pagewalkthrough.defaults.steps[0], options.steps[_index]
);
if (options.steps[_index].popup.type != 'modal' && options.steps[_index].popup.type != 'nohighlight') {
$jpWalkthrough.html('');
//check if wrapper is not empty or undefined
if (options.steps[_index].wrapper == '' || options.steps[_index].wrapper == undefined) {
alert('Your walkthrough position is: "' + options.steps[_index].popup.type + '" but wrapper is empty or undefined. Please check your "' + _activeId + '" wrapper parameter.');
return;
}
var topOffset = cleanValue($(options.steps[_index].wrapper).offset().top);
var leftOffset = cleanValue($(options.steps[_index].wrapper).offset().left);
var transparentWidth = cleanValue($(options.steps[_index].wrapper).innerWidth()) || cleanValue($(options.steps[_index].wrapper).width());
var transparentHeight = cleanValue($(options.steps[_index].wrapper).innerHeight()) || cleanValue($(options.steps[_index].wrapper).height());
//get all margin and make it gorgeous with the 'px', if it has no px, IE will get angry !!
var marginTop = cssSyntax(options.steps[_index].margin, 'top'),
marginRight = cssSyntax(options.steps[_index].margin, 'right'),
marginBottom = cssSyntax(options.steps[_index].margin, 'bottom'),
marginLeft = cssSyntax(options.steps[_index].margin, 'left'),
roundedCorner = 30,
overlayClass = '',
killOverlay = '';
var overlayTopStyle = {
'height': cleanValue(parseInt(topOffset) - (parseInt(marginTop) + (roundedCorner)))
}
var overlayLeftStyle = {
'top': overlayTopStyle.height,
'width': cleanValue(parseInt(leftOffset) - (parseInt(marginLeft) + roundedCorner)),
'height': cleanValue(parseInt(transparentHeight) + (roundedCorner * 2) + parseInt(marginTop) + parseInt(marginBottom))
}
//check if use overlay
if (options.steps[_index].overlay == undefined || options.steps[_index].overlay) {
overlayClass = 'overlay';
} else {
overlayClass = 'noOverlay';
killOverlay = 'killOverlay';
}
var overlayTop = $('<div id="overlayTop" class="' + overlayClass + '"></div>').css(overlayTopStyle).appendTo($jpWalkthrough);
var overlayLeft = $('<div id="overlayLeft" class="' + overlayClass + '"></div>').css(overlayLeftStyle).appendTo($jpWalkthrough);
if (!options.steps[_index].accessible) {
var highlightedAreaStyle = {
'top': overlayTopStyle.height,
'left': overlayLeftStyle.width,
'topCenter': {
'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight))
},
'middleLeft': {
'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom))
},
'middleCenter': {
'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight)),
'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom))
},
'middleRight': {
'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom))
},
'bottomCenter': {
'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight))
}
}
var highlightedArea = $('<div id="highlightedArea"></div>').css(highlightedAreaStyle).appendTo($jpWalkthrough);
highlightedArea.html('<div>' +
'<div id="topLeft" class="' + killOverlay + '"></div>' +
'<div id="topCenter" class="' + killOverlay + '" style="width:' + highlightedAreaStyle.topCenter.width + ';"></div>' +
'<div id="topRight" class="' + killOverlay + '"></div>' +
'</div>' +
'<div style="clear: left;">' +
'<div id="middleLeft" class="' + killOverlay + '" style="height:' + highlightedAreaStyle.middleLeft.height + ';"></div>' +
'<div id="middleCenter" class="' + killOverlay + '" style="width:' + highlightedAreaStyle.middleCenter.width + ';height:' + highlightedAreaStyle.middleCenter.height + '"> </div>' +
'<div id="middleRight" class="' + killOverlay + '" style="height:' + highlightedAreaStyle.middleRight.height + ';"></div>' +
'</div>' +
'<div style="clear: left;">' +
'<div id="bottomLeft" class="' + killOverlay + '"></div>' +
'<div id="bottomCenter" class="' + killOverlay + '" style="width:' + highlightedAreaStyle.bottomCenter.width + ';"></div>' +
'<div id="bottomRight" class="' + killOverlay + '"></div>' +
'</div>');
} else {
//if accessible
var highlightedAreaStyle = {
'top': overlayTopStyle.height,
'left': overlayLeftStyle.width,
'topCenter': {
'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight))
}
}
var accessibleStyle = {
'topAccessible': {
'position': 'absolute',
'top': overlayTopStyle.height,
'left': overlayLeftStyle.width,
'topCenter': {
'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight))
}
},
'middleAccessible': {
'position': 'absolute',
'top': cleanValue(parseInt(overlayTopStyle.height) + roundedCorner),
'left': overlayLeftStyle.width,
'middleLeft': {
'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom))
},
'middleRight': {
'height': cleanValue(parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)),
'right': cleanValue(parseInt(transparentWidth) + roundedCorner + parseInt(marginRight) + parseInt(marginLeft))
}
},
'bottomAccessible': {
'left': overlayLeftStyle.width,
'top': cleanValue(parseInt(overlayTopStyle.height) + roundedCorner + parseInt(transparentHeight) + parseInt(marginTop) + parseInt(marginBottom)),
'bottomCenter': {
'width': cleanValue(parseInt(transparentWidth) + parseInt(marginLeft) + parseInt(marginRight))
}
}
}
var highlightedArea = $('<div id="topAccessible" style="position:' + accessibleStyle.topAccessible.position + '; top:' + accessibleStyle.topAccessible.top + ';left:' + accessibleStyle.topAccessible.left + '">' +
'<div id="topLeft" class="' + killOverlay + '"></div>' +
'<div id="topCenter" class="' + killOverlay + '" style="width:' + accessibleStyle.topAccessible.topCenter.width + '"></div>' +
'<div id="topRight" class="' + killOverlay + '"></div>' +
'</div>' +
'<div id="middleAccessible" class="' + killOverlay + '" style="clear: left;position:' + accessibleStyle.middleAccessible.position + '; top:' + accessibleStyle.middleAccessible.top + ';left:' + accessibleStyle.middleAccessible.left + ';">' +
'<div id="middleLeft" class="' + killOverlay + '" style="height:' + accessibleStyle.middleAccessible.middleLeft.height + ';"></div>' +
'<div id="middleRight" class="' + killOverlay + '" style="position:absolute;right:-' + accessibleStyle.middleAccessible.middleRight.right + ';height:' + accessibleStyle.middleAccessible.middleRight.height + ';"></div>' +
'</div>' +
'<div id="bottomAccessible" style="clear: left;position:absolute;left:' + accessibleStyle.bottomAccessible.left + ';top:' + accessibleStyle.bottomAccessible.top + ';">' +
'<div id="bottomLeft" class="' + killOverlay + '"></div>' +
'<div id="bottomCenter" class="' + killOverlay + '" style="width:' + accessibleStyle.bottomAccessible.bottomCenter.width + ';"></div>' +
'<div id="bottomRight" class="' + killOverlay + '"></div>' +
'</div>').appendTo($jpWalkthrough);
} //end checking accessible
var highlightedAreaWidth = (options.steps[_index].accessible) ? parseInt(accessibleStyle.topAccessible.topCenter.width) + (roundedCorner * 2) : (parseInt(highlightedAreaStyle.topCenter.width) + (roundedCorner * 2));
var overlayRightStyle = {
'left': cleanValue(parseInt(overlayLeftStyle.width) + highlightedAreaWidth),
'height': overlayLeftStyle.height,
'top': overlayLeftStyle.top,
'width': cleanValue(windowWidth() - (parseInt(overlayLeftStyle.width) + highlightedAreaWidth))
}
var overlayRight = $('<div id="overlayRight" class="' + overlayClass + '"></div>').css(overlayRightStyle).appendTo($jpWalkthrough);
var overlayBottomStyle = {
'height': cleanValue($(document).height() - (parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height))),
'top': cleanValue(parseInt(overlayTopStyle.height) + parseInt(overlayLeftStyle.height))
}
var overlayBottom = $('<div id="overlayBottom" class="' + overlayClass + '"></div>').css(overlayBottomStyle).appendTo($jpWalkthrough);
if ($('#jpWalkthrough').length) {
$('#jpWalkthrough').remove();
}
$jpWalkthrough.appendTo('body').show();
if (options.steps[_index].accessible) {
showTooltip(true);
} else {
showTooltip(false);
}
} else if (options.steps[_index].popup.type == 'modal') {
if ($('#jpWalkthrough').length) {
$('#jpWalkthrough').remove();
}
if (options.steps[_index].overlay == undefined || options.steps[_index].overlay) {
showModal(true);
} else {
showModal(false);
}
} else {
if ($('#jpWalkthrough').length) {
$('#jpWalkthrough').remove();
}
if (options.steps[_index].overlay == undefined || options.steps[_index].overlay) {
noHighlight(true);
} else {
noHighlight(false);
}
}
showButton('jpwPrevious');
showButton('jpwNext');
showButton('jpwFinish');
}
GLOBAL VAR