/* ==========================================================
* MobilyMap
* date: 29.11.2010
* author: Marcin Dziewulski
* last update: 20.1.2011
* web: http://www.mobily.pl or http://playground.mobily.pl
* email: hello@mobily.pl
* Free to use under the MIT license.
* ========================================================== */
(function ($) {
$.fn.mobilymap = function (options) {
var defaults = {
position: "center",
popupClass: "bubble",
markerClass: "point",
popup: true,
cookies: true,
caption: true,
setCenter: true,
navigation: true,
navSpeed: 1000,
navBtnClass: "navBtn",
zoom: true,
zoomBtnClass: "zoomBtn",
outsideButtons: false,
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: "move"*/
});
$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(),
imgorigw = image.width(),
imgorigh = image.height(),
imgh = image.height(),
divw = $this.width(),
divh = $this.height();
ratio = sets.popup ? divw / imgw : 1;
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) {
return {
x: x,
y: 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 && false) {
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: "10",
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", check.x + "," + check.y, 7)
}
},
navigation: {
buttons: function () {
$this.prepend($("").addClass("mapNav").css({
position: "absolute",
zIndex: "7",
left: "20px",
top: "20px"
}));
nav = $this.find(".mapNav");
for (i = 0; i < 4; i++) {
nav.append('btn' + i + "")
}
nav.bind({
mouseenter: function () {
if (sets.caption) {
captiond.stop()
}
}
})
},
move: function () {
return false;
$("." + sets.navBtnClass).bind({
mousedown: function () {
var navbtn = $(this).attr("rel");
if (navbtn == 0) {
content.animate({
top: 0
}, sets.navSpeed)
}
if (navbtn == 1) {
content.animate({
left: divw - imgw + "px"
}, sets.navSpeed)
}
if (navbtn == 2) {
content.animate({
top: divh - imgh + "px"
}, sets.navSpeed)
}
if (navbtn == 3) {
content.animate({
left: 0
}, sets.navSpeed)
}
},
mouseup: function () {
content.stop();
var pos = content.position(),
x = pos.left,
y = pos.top;
if (sets.cookies) {
cookies.create("position", x + "," + y, 7)
}
},
mouseout: function () {
content.stop()
},
click: function () {
return false
}
})
}
},
zoom: {
buttons: function () {
imgw = divw;
ratio = imgw / imgorigw;
image.width(imgw);
imgh = Math.round(imgorigh * ratio);
image.height(imgh);
$this.prepend($("").addClass("mapZoom").css({
position: "absolute",
zIndex: "7",
right: "20px",
top: "20px"
}));
nav = $this.find(".mapZoom");
for (i = 0; i < 2; i++) {
nav.append('btn' + i + "")
}
nav.bind({
mouseenter: function () {
if (sets.caption) {
captiond.stop()
}
}
})
},
zoom: function () {
$("." + sets.zoomBtnClass).bind({
click: function () {
var zoombtn = $(this).attr("rel");
ratio;
// in
if (zoombtn == 0) {
var nw = imgw + (divw*0.5);
imgw = nw <= imgorigw ? nw : imgorigw;
ratio = imgw / imgorigw;
}
// out
if (zoombtn == 1) {
var nw = imgw - (divw*0.5);
imgw = nw >= divw ? nw : divw;
ratio = imgw / imgorigw;
}
content.stop();
var pos = content.position(),
x = pos.left,
y = pos.top;
if (sets.cookies && false) {
cookies.create("position", "0,0", 7)
}
image.width(imgw);
imgh = Math.round(imgorigh * ratio);
image.height(imgh);
map.init('center');
map.updatepoints();
if (ratio == 1) {
$('.zoomBtn0').addClass('disabled');
} else {
$('.zoomBtn0').removeClass('disabled');
}
return false;
}
})
}
},
updatepoints: function () {
point.each(function () {
var $this = $(this),
pos = $this.attr("id").split("-");
x = pos[1], y = pos[2];
$this.css({
position: "absolute",
zIndex: "2",
top: Math.round((y)*1)-3 + "px",
left: Math.round((x)*1)-3 + "px"
})
});
}
};
if (sets.navigation) {
map.navigation.buttons();
map.navigation.move()
}
if (sets.zoom) {
map.zoom.buttons();
map.zoom.zoom()
}
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: Math.round((y)*1)-3 + "px",
left: Math.round((x)*1)-3 + "px"
})
}).wrapInner($("").addClass("markerContent").css({
display: "none"
}));
point.click(function (e) {
var $this = $(this),
pointw = $this.width(),
pointh = $this.height(),
pos = $this.position(),
py = pos.top,
px = pos.left,
wrap = $this.find(".markerContent").html();
$this.addClass('selected');
if (wrap != '' && wrap != null && typeof wrap != 'undefinded') {
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();
/*
$('#map-wrapper').append('')
$('.' + sets.popupClass).html($this.find('.marketContent').html()).css({
position: "absolute",
zIndex: "9999"
}).html(wrap).append($("").addClass("close"));
var o = $this.offset();
var popup = $("." + sets.popupClass),
popupw = popup.innerWidth(),
popuph = popup.innerHeight(),
y = py,
x = px
popup.css({
top: y + pointh + "px",
left: x + "px",
marginLeft: -(popupw / 2 - pointw / 2) + "px"
})
*/
$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;
var halfh = $('.bubble-content').height() * 0.5;
popup.css({
top: y + pointh + "px",
left: x + "px",
marginLeft: -(popupw / 2) + "px",
// marginTop: -(halfh + pointh / 2) + "px"
})
} else {
sets.onMarkerClick.call(this)
}
}
return false
});
point.mouseover(function(e) {
$(this).trigger('click');
});
/*
point.mouseout(function() {
$("." + sets.popupClass+' .close').trigger('click');
});
*/
$this.find(".close").live("click", function () {
var $this = $(this);
$this.parents("." + sets.popupClass).prev('.point').removeClass('selected');
$this.parents("." + sets.popupClass).remove();
setTimeout(function () {
sets.onPopupClose.call(this)
}, 100);
return false
});
if (sets.outsideButtons) {
$(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));
// !Zoom