(function ($) {
$.fn.mobilymap = function (options) {
var defaults = {
position: "center",
popupClass: "bubble",
markerClass: "point",
popup: true,
cookies: true,
caption: true,
setCenter: true,
outsideButtons: null,
onMarkerClick: function () {},
onPopupClose: function () {},
onMapLoad: function () {}
};
var sets = $.extend({}, defaults, options);
return this.each(function () {
var $this = $(this);
$this.css({
position: "relative",
overflow: "hidden",
cursor: "pointer"
});
$this.wrapInner($("").addClass("imgContent").css({
zIndex: "1",
position: "absolute"
}));
var content = $this.find(".imgContent"),
image = $this.find("img"),
title = image.attr("alt"),
point = $this.find("." + sets.markerClass),
mouseDown = false,
mx, my, ex, ey, imgw = image.width(),
imgh = image.height(),
divw = $this.width(),
divh = $this.height();
var cookies = {
create: function (name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString()
} else {
var expires = ""
}
document.cookie = name + "=" + value + expires + "; path=/"
},
erase: function (name) {
cookies.create(name, "", -1)
},
read: function (name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1, c.length)
}
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length, c.length)
}
}
return null
}
};
var map = {
check: function (x, y) {
if (y < (divh - imgh)) {
y = divh - imgh
} else {
if (y > 0) {
y = 0
}
}
if (x < (divw - imgw)) {
x = divw - imgw
} else {
if (x > 0) {
x = 0
}
}
return {
x: x,
y: y
}
},
init: function (position) {
map.preloader();
switch (position) {
case "center":
var x = (divw - imgw) / 2,
y = (divh - imgh) / 2;
break;
case "top left":
var x = 0,
y = 0;
break;
case "top right":
var x = divw - imgw,
y = 0;
break;
case "bottom left":
var x = 0,
y = divh - imgh;
break;
case "bottom right":
var x = divw - imgw,
y = divh - imgh;
break;
default:
var new_position = position.split(" "),
x = -(new_position[0]),
y = -(new_position[1]);
if (y < (divh - imgh)) {
y = divh - imgh
} else {
if (y > 0) {
y = 0
}
}
if (x < (divw - imgw)) {
x = divw - imgw
} else {
if (x > 0) {
x = 0
}
}
}
if (sets.cookies) {
if (cookies.read("position") != null) {
var pos = cookies.read("position").split(","),
x = pos[0],
y = pos[1]
} else {
var x = (divw - imgw) / 2,
y = (divh - imgh) / 2
}
}
content.css({
top: y + "px",
left: x + "px"
})
},
preloader: function () {
var loadimg = new Image(),
src = image.attr("src");
image.css({
visibility: "hidden"
});
$this.append($("").addClass("loader").css({
position: "absolute",
zIndex: "5",
top: "0",
left: "0",
width: "100%",
height: "100%"
}));
$(loadimg).load(function () {
image.css({
visibility: "visible"
});
$this.find(".loader").fadeOut(1000, function () {
$(this).remove();
if (sets.caption) {
$this.append($("").addClass("imgCaption").html(title).hide());
captiond = $this.find(".imgCaption");
captionh = captiond.innerHeight();
captiond.css({
bottom: -captionh + "px",
position: "absolute",
zIndex: "7"
}).show().animate({
bottom: 0
})
}
sets.onMapLoad.call(this)
})
}).attr("src", src);
image.removeAttr("alt")
},
mouse: function (e) {
var x = e.pageX,
y = e.pageY;
return {
x: x,
y: y
}
},
update: function (e) {
var mouse = map.mouse(e),
x = mouse.x,
y = mouse.y,
movex = x - mx,
movey = y - my,
top = ey + movey,
left = ex + movex,
check = map.check(left, top);
content.css({
top: check.y + "px",
left: check.x + "px"
});
if (sets.cookies) {
cookies.create("position", left + "," + top, 7)
}
}
};
content.bind({
mousedown: function (e) {
e.preventDefault();
mouseDown = true;
var mouse = map.mouse(e);
mx = mouse.x, my = mouse.y;
var element = content.position();
ex = element.left, ey = element.top;
map.update(e)
},
mousemove: function (e) {
if (mouseDown) {
map.update(e)
}
return false
},
mouseup: function () {
if (mouseDown) {
mouseDown = false
}
return false
},
mouseout: function () {
if (mouseDown) {
mouseDown = false
}
return false
},
mouseenter: function () {
if (sets.caption) {
captiond.animate({
bottom: -captionh + "px"
})
}
return false
},
mouseleave: function () {
if (sets.caption) {
captiond.animate({
bottom: 0
})
}
return false
}
});
map.init(sets.position);
point.each(function () {
var $this = $(this),
pos = $this.attr("id").split("-");
x = pos[1], y = pos[2];
$this.css({
position: "absolute",
zIndex: "2",
top: y + "px",
left: x + "px"
})
}).wrapInner($("").addClass("markerContent").css({
display: "none"
}));
point.click(function () {
var $this = $(this),
pointw = $this.width(),
pointh = $this.height(),
pos = $this.position(),
py = pos.top,
px = pos.left,
wrap = $this.find(".markerContent").html();
if (sets.setCenter) {
var center_y = -py + divh / 2 - pointh / 2,
center_x = -px + divw / 2 - pointw / 2,
center = map.check(center_x, center_y);
content.animate({
top: center.y + "px",
left: center.x + "px"
})
}
if (sets.popup) {
$("." + sets.popupClass).remove();
$this.after($("").addClass(sets.popupClass).css({
position: "absolute",
zIndex: "3"
}).html(wrap).append($("").addClass("close")));
var popup = $this.next("." + sets.popupClass),
popupw = popup.innerWidth(),
popuph = popup.innerHeight(),
y = py,
x = px;
popup.css({
top: y + pointh + "px",
left: x + "px",
marginLeft: -(popupw / 3 - 10) + "px"
})
} else {
sets.onMarkerClick.call(this)
}
return false
});
$this.find(".close").live("click", function () {
var $this = $(this);
$this.parents("." + sets.popupClass).remove();
setTimeout(function () {
sets.onPopupClose.call(this)
}, 100);
return false
});
if (sets.outsideButtons != null) {
$(sets.outsideButtons).click(function () {
var $this = $(this),
rel = $this.attr("rel");
div = content.find("." + sets.markerClass).filter(function () {
return $(this).attr("id") == rel
});
div.click();
return false
})
}
})
}
}(jQuery));