alunov-equinix/gist:6559011

## gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!--     Галереи и картинки можно добавлять в любом кол-ве(только нужно сохранять названия классов) -->
  <div class="gallery">
  <img class="bigPic" src="pics/cars/2.jpg">
  <div class="smallPic">
   <a href="#" class="arrow left" >&#8249; </a>
<a href="#" class="arrow right" >&#8250; </a>
    <ul>
      <li><img src="pics/cars/2.jpg"></li>
      <li><img src="pics/cars/3.jpg"></li>
      <li><img src="pics/cars/4.jpg"></li>
      <li><img src="pics/cars/5.jpg"></li>
      <li><img src="pics/cars/6.jpg"></li>
      <li><img src="pics/cars/7.jpg"></li>
      <li><img src="pics/cars/1.jpg"></li>
    </ul>
</div>
</div>

<div class="gallery">
  <img class="bigPic" src="pics/nature/8.jpg">
  <div class="smallPic">
   <a href="#" class="arrow left" >&#8249; </a>
<a href="#" class="arrow right" >&#8250; </a>
    <ul>
      <li><img src="pics/nature/2.jpg"></li>
      <li><img src="pics/nature/3.jpg"></li>
      <li><img src="pics/nature/4.jpg"></li>
      <li><img src="pics/nature/5.jpg"></li>
      <li><img src="pics/nature/6.jpg"></li>
      <li><img src="pics/nature/7.jpg"></li>
      <li><img src="pics/nature/1.jpg"></li>
      <li><img src="pics/nature/8.jpg"></li>
      <li><img src="pics/nature/9.jpg"></li>
    </ul>
</div>
</div>

<div class="gallery">
  <img class="bigPic" src="pics/animals/2.jpg">
  <div class="smallPic">
   <a href="#" class="arrow left" >&#8249; </a>
<a href="#" class="arrow right" >&#8250; </a>
    <ul>
      <li><img src="pics/animals/1.jpg"></li>
      <li><img src="pics/animals/2.jpg"></li>
      <li><img src="pics/animals/3.jpg"></li>
      <li><img src="pics/animals/4.jpg"></li>
      <li><img src="pics/animals/5.jpg"></li>
      <li><img src="pics/animals/6.jpg"></li>
      <li><img src="pics/animals/7.jpg"></li>
      <li><img src="pics/animals/8.jpg"></li>
      <li><img src="pics/animals/9.jpg"></li>
      <li><img src="pics/animals/10.jpg"></li>
      <li><img src="pics/animals/11.jpg"></li>
      <li><img src="pics/animals/12.jpg"></li>
    </ul>
</div>
</div>

<script type="text/javascript" src="gallery.js">
</script>
</body>
</html>

## gistfile2.css
/* RESET CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
padding:5px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*-----Gallery CSS-------*/

.gallery{
  background-image: url(pics/back.jpg);
	border: 2.5px solid black;
	display:inline-block;
	margin-bottom: 10px;
	border-radius: 1em 4em 1em 4em;
	overflow: hidden;
	opacity:0.7;
}
.gallery:hover {
	opacity:1.0;
}
.bigPic{
	padding: 5px;
	border: 3px solid #1E90FF;
	border-radius: 13em 0.5em/1em 0.5em;
}
.smallPic{
	padding: 5px;
	border: 5.7px solid  black;
	border-radius: 13em 0.5em/1em 0.5em;
	vertical-align: middle;
	overflow: hidden;
}
.smallPic ul{
	margin: 0;
  	padding: 0;
  	list-style: none;
	display: inline;

}
.smallPic ul li {
	float:left;
	border: 3px solid black;
	margin-left: 4px;

}
.smallPic ul li:hover {
	border: 3px dashed red;
	opacity:1.0;
}
.smallPic ul li {
	opacity:0.85;
}
.arrow{
	color: #7CFC00;
	font-size:70px;
	margin-top: 15px;
	text-decoration: none;
}
.arrow:hover {
  background: black;
}
.left {
  float:left;
}
.right {
  float: right;
}

## gistfile3.js
'use strict';

    /* Создание модуля MyGallery */
    var MyGallery = (function () {

        function MyGalleryConstuctor(selector) {
            var self = this;
            this.numOfGalleries = document.querySelectorAll(selector).length;
            this.containersArr = document.querySelectorAll(selector);
            this.bigPicsArr = document.querySelectorAll('.bigPic');
            this.smallPicsDIVArr = document.querySelectorAll('.smallPic');
            this.smallPicsULArr = [];
            for (var i = 0; i < this.numOfGalleries; i++) {
                this.smallPicsULArr[i] = this.smallPicsDIVArr[i].getElementsByTagName("ul")[0].children;
                addClass(this.containersArr[i], "noactive");
            } /* Переменные, необходимые для правильного размещения галерей на страничке*/
            this.PADDING = 10;
            this.BORDER_SIZE = 5;
            this.CONTAINER_WIDTH = document.documentElement.clientWidth / 2;
            this.CONTAINER_HEIGHT = document.documentElement.clientHeight * (3 / 4);
            this.ARROW_WIDTH = document.querySelector('.arrow').scrollWidth;
            /* Обработка всех действий происходит внутри конструктора*/
            for (var i = 0; i < this.numOfGalleries; i++) {
                addEvent(this.containersArr[i], 'mouseover', myMouseEnter(keyAction));
                addEvent(this.containersArr[i], 'mouseout', myMouseLeave(keyStop));
            }

            function clickAction(event) {
                prevDef(event);
                if (hasClass(event.target, "right")) {
                    self.back();
                }
                else if (hasClass(event.target, "left")) {
                    self.next();
                }
                else if (event.target.nodeName === "IMG") {
                    var currentBigPic = document.querySelector('.current').querySelector('img');
                    currentBigPic.src = event.target.src;
                }
            }
            function keyEvent(e) {
                self.keyboardAction(e, self);
            }
            function keyAction() {
                addClass(this, "current");
                removeClass(this, "noactive");
                addEvent(document.documentElement, 'keydown', keyEvent);
            }
            function keyStop() {
                removeClass(this, "current");
                addClass(this, "noactive");
  			removeEvent(document.documentElement, 'keydown', keyEvent);
                clearInterval(self.timer);
                self.setTimer(self);
            }
            addEvent(document, 'click', clickAction);
            /*Вызов необходимых методов, для отображения и корректной работы галерей(решил вывать внутри модуля)*/
            this.show(self);
            this.setTimer(self);
        }

        MyGalleryConstuctor.prototype.setTimer = function (self) {

            self.timer = setInterval(function () {
                self.next(self);
            }, 5000);
        }

        MyGalleryConstuctor.prototype.next = function (self) {

            if (arguments.length === 0) {
                var imgs = document.querySelector('.current').querySelectorAll('li img');
                var newSrc;
                for (var i = imgs.length - 2; i >= 0; i--) {
                    newSrc = imgs[imgs.length - 1].src;
                    imgs[imgs.length - 1].src = imgs[i].src;
                    imgs[i].src = newSrc;
					alert(newSrc);
                }
            }
            else {
                var noactiveImgs = document.querySelectorAll('.noactive');
                for (var j = 0; j < noactiveImgs.length; j++) {
                    var imgs = noactiveImgs[j].querySelectorAll('li img');
                    var newSrc;
                    for (var i = 0; i < imgs.length - 1; i++) {
                        newSrc = imgs[i].src;
                        imgs[i].src = imgs[imgs.length - 1].src;
                        imgs[imgs.length - 1].src = newSrc;
                    }
                }
            }
        }

        MyGalleryConstuctor.prototype.back = function () {

            var imgs = document.querySelector('.current').querySelectorAll('li img');
            var newSrc;
            for (var i = 0; i < imgs.length - 1; i++) {
                newSrc = imgs[i].src;
                imgs[i].src = imgs[imgs.length - 1].src;
                imgs[imgs.length - 1].src = newSrc;
            }
        }

        MyGalleryConstuctor.prototype.show = function (self) {
            /* Галерей может быть любое кол-во, метод show обрабатывает сразу все галереи*/
            for (var i = 0; i < self.numOfGalleries; i++) {
                var container = self.containersArr[i];
                var bigPic = self.bigPicsArr[i];
                var smallPicDIV = self.smallPicsDIVArr[i];
                var smallpicLI = self.smallPicsULArr[i];
                container.style.width = self.CONTAINER_WIDTH - self.PADDING * 2 - self.BORDER_SIZE + "px";
                container.style.height = self.CONTAINER_HEIGHT - self.PADDING - self.BORDER_SIZE + "px";
                if (i % 2 !== 0) {
                    container.style.marginLeft = "5px";
                }
                bigPic.style.width = container.clientWidth - self.PADDING - self.BORDER_SIZE + "px";
                bigPic.style.height = self.CONTAINER_HEIGHT * (2 / 3) - self.PADDING * 2 - self.BORDER_SIZE + "px";
                smallPicDIV.style.width = bigPic.clientWidth - self.BORDER_SIZE + "px";
                smallPicDIV.style.height = self.CONTAINER_HEIGHT * (1 / 3) - self.PADDING * 2 - self.BORDER_SIZE + "px";

                for (var j = 0; j < smallpicLI.length; j++) {
                    var smallpicIMG = smallpicLI[j].children[0];
                    smallpicIMG.style.width = (smallPicDIV.clientWidth - self.ARROW_WIDTH * 2) / 3 - self.BORDER_SIZE * 3 + "px";
                    smallpicIMG.style.height = smallPicDIV.clientHeight - self.BORDER_SIZE * 3 + "px";
                }
            }
        }

        MyGalleryConstuctor.prototype.keyboardAction = function (event, self) {

            if (event.keyCode === 39) {
                self.back();
            }
            if (event.keyCode === 37) {
                self.next();
            }
        }

 /* ------------------------myTools---------------------------- */
        function addEvent(obj, event_name, handler) {
            if (obj.addEventListener) {
                obj.addEventListener(event_name, handler, false);
            } else if (obj.attachEvent) {
                obj.attachEvent('on' + event_name, handler);
				if(event_name='mouseover'){
					event_name='mouseenter';
				}
				else if(event_name='mouseout'){
					event_name='mouseleave';
				}
            }
        }

        function myMouseEnter(handler) {

            return function (e) {
                e = e || event;
                var toElement = e.relatedTarget || e.srcElement;
                while (toElement && toElement !== this) {
                    toElement = toElement.parentNode;
                }
                if (toElement == this) {
                    return;
                }
                return handler.call(this, e);
            };
        }

        function myMouseLeave(handler) {

            return function (e) {
                e = e || event;
                var toElement = e.relatedTarget || e.toElement;
                while (toElement && toElement !== this) {
                    toElement = toElement.parentNode;
                }
                if (toElement == this) {
                    return;
                }
                return handler.call(this, e);
            };
        }

			function removeEvent(obj, event_name, handler) {
				if (obj.removeEventListener) {
					obj.removeEventListener(event_name, handler, false);
				} else {
					obj.detachEvent('on' + event_name, handler);
				}
			}

        function hasClass(el, name) {
            return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
        }

        function addClass(el, name) {
            if (!hasClass(el, name)) {
                el.className += (el.className ? ' ' : '') + name;
            }
        }

        function removeClass(el, name) {
            if (hasClass(el, name)) {
                el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
            }
        }

        function getStyle(selector, styleProp) {
            var elem = document.querySelector(selector);
            if (elem.currentStyle)
                var value = elem.currentStyle[styleProp];
            else if (window.getComputedStyle)
                var value = document.defaultView.getComputedStyle(elem, null).getPropertyValue(styleProp);
            return value;
        }

        function prevDef(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }

        return MyGalleryConstuctor;
    } ());

var gallery = new MyGallery(".gallery");
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
	<title></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>

	<!-- Галереи и картинки можно добавлять в любом кол-ве(только нужно сохранять названия классов) -->
	<div class="gallery">
	<img class="bigPic" src="pics/cars/2.jpg">
	<div class="smallPic">
	<a href="#" class="arrow left" >‹ </a>
	<a href="#" class="arrow right" >› </a>
	<ul>
	<li><img src="pics/cars/2.jpg"></li>
	<li><img src="pics/cars/3.jpg"></li>
	<li><img src="pics/cars/4.jpg"></li>
	<li><img src="pics/cars/5.jpg"></li>
	<li><img src="pics/cars/6.jpg"></li>
	<li><img src="pics/cars/7.jpg"></li>
	<li><img src="pics/cars/1.jpg"></li>
	</ul>
	</div>
	</div>

	<div class="gallery">
	<img class="bigPic" src="pics/nature/8.jpg">
	<div class="smallPic">
	<a href="#" class="arrow left" >‹ </a>
	<a href="#" class="arrow right" >› </a>
	<ul>
	<li><img src="pics/nature/2.jpg"></li>
	<li><img src="pics/nature/3.jpg"></li>
	<li><img src="pics/nature/4.jpg"></li>
	<li><img src="pics/nature/5.jpg"></li>
	<li><img src="pics/nature/6.jpg"></li>
	<li><img src="pics/nature/7.jpg"></li>
	<li><img src="pics/nature/1.jpg"></li>
	<li><img src="pics/nature/8.jpg"></li>
	<li><img src="pics/nature/9.jpg"></li>
	</ul>
	</div>
	</div>

	<div class="gallery">
	<img class="bigPic" src="pics/animals/2.jpg">
	<div class="smallPic">
	<a href="#" class="arrow left" >‹ </a>
	<a href="#" class="arrow right" >› </a>
	<ul>
	<li><img src="pics/animals/1.jpg"></li>
	<li><img src="pics/animals/2.jpg"></li>
	<li><img src="pics/animals/3.jpg"></li>
	<li><img src="pics/animals/4.jpg"></li>
	<li><img src="pics/animals/5.jpg"></li>
	<li><img src="pics/animals/6.jpg"></li>
	<li><img src="pics/animals/7.jpg"></li>
	<li><img src="pics/animals/8.jpg"></li>
	<li><img src="pics/animals/9.jpg"></li>
	<li><img src="pics/animals/10.jpg"></li>
	<li><img src="pics/animals/11.jpg"></li>
	<li><img src="pics/animals/12.jpg"></li>
	</ul>
	</div>
	</div>

	<script type="text/javascript" src="gallery.js">
	</script>
	</body>
	</html>
	/* RESET CSS */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	padding:5px;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	/-----Gallery CSS-------/

	.gallery{
	background-image: url(pics/back.jpg);
	border: 2.5px solid black;
	display:inline-block;
	margin-bottom: 10px;
	border-radius: 1em 4em 1em 4em;
	overflow: hidden;
	opacity:0.7;
	}
	.gallery:hover {
	opacity:1.0;
	}
	.bigPic{
	padding: 5px;
	border: 3px solid #1E90FF;
	border-radius: 13em 0.5em/1em 0.5em;
	}
	.smallPic{
	padding: 5px;
	border: 5.7px solid black;
	border-radius: 13em 0.5em/1em 0.5em;
	vertical-align: middle;
	overflow: hidden;
	}
	.smallPic ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;

	}
	.smallPic ul li {
	float:left;
	border: 3px solid black;
	margin-left: 4px;

	}
	.smallPic ul li:hover {
	border: 3px dashed red;
	opacity:1.0;
	}
	.smallPic ul li {
	opacity:0.85;
	}
	.arrow{
	color: #7CFC00;
	font-size:70px;
	margin-top: 15px;
	text-decoration: none;
	}
	.arrow:hover {
	background: black;
	}
	.left {
	float:left;
	}
	.right {
	float: right;
	}
	'use strict';

	/* Создание модуля MyGallery */
	var MyGallery = (function () {

	function MyGalleryConstuctor(selector) {
	var self = this;
	this.numOfGalleries = document.querySelectorAll(selector).length;
	this.containersArr = document.querySelectorAll(selector);
	this.bigPicsArr = document.querySelectorAll('.bigPic');
	this.smallPicsDIVArr = document.querySelectorAll('.smallPic');
	this.smallPicsULArr = [];
	for (var i = 0; i < this.numOfGalleries; i++) {
	this.smallPicsULArr[i] = this.smallPicsDIVArr[i].getElementsByTagName("ul")[0].children;
	addClass(this.containersArr[i], "noactive");
	} /* Переменные, необходимые для правильного размещения галерей на страничке*/
	this.PADDING = 10;
	this.BORDER_SIZE = 5;
	this.CONTAINER_WIDTH = document.documentElement.clientWidth / 2;
	this.CONTAINER_HEIGHT = document.documentElement.clientHeight * (3 / 4);
	this.ARROW_WIDTH = document.querySelector('.arrow').scrollWidth;
	/* Обработка всех действий происходит внутри конструктора*/
	for (var i = 0; i < this.numOfGalleries; i++) {
	addEvent(this.containersArr[i], 'mouseover', myMouseEnter(keyAction));
	addEvent(this.containersArr[i], 'mouseout', myMouseLeave(keyStop));
	}

	function clickAction(event) {
	prevDef(event);
	if (hasClass(event.target, "right")) {
	self.back();
	}
	else if (hasClass(event.target, "left")) {
	self.next();
	}
	else if (event.target.nodeName === "IMG") {
	var currentBigPic = document.querySelector('.current').querySelector('img');
	currentBigPic.src = event.target.src;
	}
	}
	function keyEvent(e) {
	self.keyboardAction(e, self);
	}
	function keyAction() {
	addClass(this, "current");
	removeClass(this, "noactive");
	addEvent(document.documentElement, 'keydown', keyEvent);
	}
	function keyStop() {
	removeClass(this, "current");
	addClass(this, "noactive");
	removeEvent(document.documentElement, 'keydown', keyEvent);
	clearInterval(self.timer);
	self.setTimer(self);
	}
	addEvent(document, 'click', clickAction);
	/Вызов необходимых методов, для отображения и корректной работы галерей(решил вывать внутри модуля)/
	this.show(self);
	this.setTimer(self);
	}

	MyGalleryConstuctor.prototype.setTimer = function (self) {

	self.timer = setInterval(function () {
	self.next(self);
	}, 5000);
	}

	MyGalleryConstuctor.prototype.next = function (self) {

	if (arguments.length === 0) {
	var imgs = document.querySelector('.current').querySelectorAll('li img');
	var newSrc;
	for (var i = imgs.length - 2; i >= 0; i--) {
	newSrc = imgs[imgs.length - 1].src;
	imgs[imgs.length - 1].src = imgs[i].src;
	imgs[i].src = newSrc;
	alert(newSrc);
	}
	}
	else {
	var noactiveImgs = document.querySelectorAll('.noactive');
	for (var j = 0; j < noactiveImgs.length; j++) {
	var imgs = noactiveImgs[j].querySelectorAll('li img');
	var newSrc;
	for (var i = 0; i < imgs.length - 1; i++) {
	newSrc = imgs[i].src;
	imgs[i].src = imgs[imgs.length - 1].src;
	imgs[imgs.length - 1].src = newSrc;
	}
	}
	}
	}

	MyGalleryConstuctor.prototype.back = function () {

	var imgs = document.querySelector('.current').querySelectorAll('li img');
	var newSrc;
	for (var i = 0; i < imgs.length - 1; i++) {
	newSrc = imgs[i].src;
	imgs[i].src = imgs[imgs.length - 1].src;
	imgs[imgs.length - 1].src = newSrc;
	}
	}

	MyGalleryConstuctor.prototype.show = function (self) {
	/* Галерей может быть любое кол-во, метод show обрабатывает сразу все галереи*/
	for (var i = 0; i < self.numOfGalleries; i++) {
	var container = self.containersArr[i];
	var bigPic = self.bigPicsArr[i];
	var smallPicDIV = self.smallPicsDIVArr[i];
	var smallpicLI = self.smallPicsULArr[i];
	container.style.width = self.CONTAINER_WIDTH - self.PADDING * 2 - self.BORDER_SIZE + "px";
	container.style.height = self.CONTAINER_HEIGHT - self.PADDING - self.BORDER_SIZE + "px";
	if (i % 2 !== 0) {
	container.style.marginLeft = "5px";
	}
	bigPic.style.width = container.clientWidth - self.PADDING - self.BORDER_SIZE + "px";
	bigPic.style.height = self.CONTAINER_HEIGHT * (2 / 3) - self.PADDING * 2 - self.BORDER_SIZE + "px";
	smallPicDIV.style.width = bigPic.clientWidth - self.BORDER_SIZE + "px";
	smallPicDIV.style.height = self.CONTAINER_HEIGHT * (1 / 3) - self.PADDING * 2 - self.BORDER_SIZE + "px";

	for (var j = 0; j < smallpicLI.length; j++) {
	var smallpicIMG = smallpicLI[j].children[0];
	smallpicIMG.style.width = (smallPicDIV.clientWidth - self.ARROW_WIDTH * 2) / 3 - self.BORDER_SIZE * 3 + "px";
	smallpicIMG.style.height = smallPicDIV.clientHeight - self.BORDER_SIZE * 3 + "px";
	}
	}
	}

	MyGalleryConstuctor.prototype.keyboardAction = function (event, self) {

	if (event.keyCode === 39) {
	self.back();
	}
	if (event.keyCode === 37) {
	self.next();
	}
	}

	/* ------------------------myTools---------------------------- */
	function addEvent(obj, event_name, handler) {
	if (obj.addEventListener) {
	obj.addEventListener(event_name, handler, false);
	} else if (obj.attachEvent) {
	obj.attachEvent('on' + event_name, handler);
	if(event_name='mouseover'){
	event_name='mouseenter';
	}
	else if(event_name='mouseout'){
	event_name='mouseleave';
	}
	}
	}

	function myMouseEnter(handler) {

	return function (e) {
	e = e \|\| event;
	var toElement = e.relatedTarget \|\| e.srcElement;
	while (toElement && toElement !== this) {
	toElement = toElement.parentNode;
	}
	if (toElement == this) {
	return;
	}
	return handler.call(this, e);
	};
	}

	function myMouseLeave(handler) {

	return function (e) {
	e = e \|\| event;
	var toElement = e.relatedTarget \|\| e.toElement;
	while (toElement && toElement !== this) {
	toElement = toElement.parentNode;
	}
	if (toElement == this) {
	return;
	}
	return handler.call(this, e);
	};
	}

	function removeEvent(obj, event_name, handler) {
	if (obj.removeEventListener) {
	obj.removeEventListener(event_name, handler, false);
	} else {
	obj.detachEvent('on' + event_name, handler);
	}
	}

	function hasClass(el, name) {
	return new RegExp('(\\s\|^)' + name + '(\\s\|$)').test(el.className);
	}

	function addClass(el, name) {
	if (!hasClass(el, name)) {
	el.className += (el.className ? ' ' : '') + name;
	}
	}

	function removeClass(el, name) {
	if (hasClass(el, name)) {
	el.className = el.className.replace(new RegExp('(\\s\|^)' + name + '(\\s\|$)'), ' ').replace(/^\s+\|\s+$/g, '');
	}
	}

	function getStyle(selector, styleProp) {
	var elem = document.querySelector(selector);
	if (elem.currentStyle)
	var value = elem.currentStyle[styleProp];
	else if (window.getComputedStyle)
	var value = document.defaultView.getComputedStyle(elem, null).getPropertyValue(styleProp);
	return value;
	}

	function prevDef(event) {
	if (event.preventDefault) {
	event.preventDefault();
	} else {
	event.returnValue = false;
	}
	}

	return MyGalleryConstuctor;
	} ());

	var gallery = new MyGallery(".gallery");