From 4d71814fe9b72cbb1efcdd7dd267da7328fdecea Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 4 Jun 2013 19:00:25 +0400
Subject: [PATCH] flipping now works with marks and rotation, propper control,
 info and saving not yet done...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/Makefile       |   3 +
 ui/keybindings.js |   3 +-
 ui/layout.css     | 217 +++++++++++++++++++++++++++++++---------------
 ui/layout.less    | 162 ++++++++++++++++++----------------
 4 files changed, 240 insertions(+), 145 deletions(-)
 mode change 100755 => 100644 ui/layout.css

diff --git a/ui/Makefile b/ui/Makefile
index bdce92d8..15ff75cd 100755
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -6,6 +6,9 @@ LESS_FILE=layout.less
 $(TARGET): $(LESS_FILE)
 	lessc $(LESS_FILE) > $(TARGET)
 
+clean:
+	rm -f $(TARGET)
+
 # Makefile dependencies...
 $(OBJ): Makefile
 $(TARGET): Makefile
diff --git a/ui/keybindings.js b/ui/keybindings.js
index d3f52b05..7c4bb715 100755
--- a/ui/keybindings.js
+++ b/ui/keybindings.js
@@ -374,6 +374,8 @@ var KEYBOARD_CONFIG = {
 						reverseImageOrder() 
 					}),
 			},
+		H: doc('Flip image horizontally', function(){ flipHorizontal() }),
+		V: doc('Flip image vertically', function(){ flipVertical() }),
 
 
 		// zooming...
@@ -522,7 +524,6 @@ var KEYBOARD_CONFIG = {
 
 		F1: doc('Show help',
 			function(){ toggleHelp() }),
-		H: 'F1',
 
 
 		/* testing the shift-key feature...
diff --git a/ui/layout.css b/ui/layout.css
old mode 100755
new mode 100644
index 2ac2ec2e..9b7588e1
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -1,6 +1,8 @@
 /**********************************************************************
 * 
 **********************************************************************/
+/********************************************************** Mixins ***/
+/*********************************************************************/
 body {
   font-family: sans-serif;
   padding: 0px;
@@ -15,11 +17,11 @@ body {
   /*border: solid blue 1px;*/
 
   box-sizing: border-box;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  -moz-user-select: auto;
+  -webkit-user-select: auto;
+  -o-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
 }
 /****************************************************** Ribbon set ***/
 .ribbon-set {
@@ -30,11 +32,9 @@ body {
 			...this is because .ribbon-set will both be used for scaling 
 			and aligning... */
 
-  transform-origin: top left;
-  -ms-transform-origin: top left;
   -webkit-transform-origin: top left;
-  /* Safari and Chrome */
-
+  -ms-transform-origin: top left;
+  transform-origin: top left;
 }
 .ribbon-set:empty:after {
   display: block;
@@ -95,52 +95,115 @@ body {
 /* image turning... */
 /* NOTE: need to account for proportions after turning... */
 .image[orientation="90"] {
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
+  transform: rotate(90deg) scaleY(1) scaleX(1);
 }
 .image[orientation="180"] {
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
+  transform: rotate(180deg) scaleY(1) scaleX(1);
 }
 .image[orientation="270"] {
-  -webkit-transform: rotate(270deg);
-  -moz-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
+  transform: rotate(270deg) scaleY(1) scaleX(1);
 }
 /* Flipped vertically only... */
 /* NOTE: wee need to do all possible combinations here as we can't 
  	combine different parts of a transform attr from different 
  	classes */
 .image[flipped*="vertical"] {
-  -moz-transform: scaleY(-1);
-  -o-transform: scaleY(-1);
-  -webkit-transform: scaleY(-1);
-  -ms-transform: scaleY(-1);
-  transform: scaleY(-1);
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  transform: rotate(0deg) scaleY(-1) scaleX(1);
+}
+.image[orientation="90"][flipped="vertical"] {
+  -webkit-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  transform: rotate(90deg) scaleY(-1) scaleX(1);
+}
+.image[orientation="180"][flipped="vertical"] {
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  transform: rotate(180deg) scaleY(-1) scaleX(1);
+}
+.image[orientation="270"][flipped="vertical"] {
+  -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  transform: rotate(270deg) scaleY(-1) scaleX(1);
 }
 /* Flipped horizontally only... */
 .image[flipped*="horizontal"] {
-  -moz-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
-  -webkit-transform: scaleX(-1);
-  -ms-transform: scaleX(-1);
-  transform: scaleX(-1);
+  -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  transform: rotate(0deg) scaleY(1) scaleX(-1);
+}
+.image[orientation="90"][flipped="horizontal"] {
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  transform: rotate(90deg) scaleY(1) scaleX(-1);
+}
+.image[orientation="180"][flipped="horizontal"] {
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  transform: rotate(180deg) scaleY(1) scaleX(-1);
+}
+.image[orientation="270"][flipped="horizontal"] {
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  transform: rotate(270deg) scaleY(1) scaleX(-1);
 }
 /* Flipped vertically only... */
 .image[flipped*="vertical"][flipped*="horizontal"] {
-  -moz-transform: scaleX(-1) scaleY(-1);
-  -o-transform: scaleX(-1) scaleY(-1);
-  -webkit-transform: scaleX(-1) scaleY(-1);
-  -ms-transform: scaleX(-1) scaleY(-1);
-  transform: scaleX(-1) scaleY(-1);
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  transform: rotate(0deg) scaleY(-1) scaleX(-1);
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  transform: rotate(90deg) scaleY(-1) scaleX(-1);
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  transform: rotate(180deg) scaleY(-1) scaleX(-1);
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  transform: rotate(270deg) scaleY(-1) scaleX(-1);
 }
 /* default backgrounds */
 /* XXX not sure if we need these... */
@@ -167,22 +230,42 @@ body {
   border: none;
   width: 15px;
   height: 15px;
+  top: auto;
   bottom: 5px;
+  left: auto;
   right: 5px;
   border-radius: 50%;
   background: blue;
 }
-.marks-visible.viewer .marked.image[orientation="90"]:after {
+.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
   top: 5px;
+  bottom: auto:
+	left: auto;
   right: 5px;
 }
-.marks-visible.viewer .marked.image[orientation="180"]:after {
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
   top: 5px;
+  bottom: auto;
   left: 5px;
+  right: auto;
 }
-.marks-visible.viewer .marked.image[orientation="270"]:after {
+.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
+  top: auto;
   bottom: 5px;
   left: 5px;
+  right: auto;
 }
 /* XXX make the marks position relative to viewer or gidden compleatly */
 .marks-visible.single-image-mode.viewer .marked.image:after {
@@ -205,11 +288,7 @@ body {
 
 	background: blue;
 
-	-webkit-transform: rotate(45deg);
-	-moz-transform: rotate(45deg);
-	-o-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+	.rotate(45deg)
 }
 .marks-visible.viewer .marked.image[orientation="90"]:after {
 	top: -15px;
@@ -293,36 +372,36 @@ body {
 .image[orientation="90"] .inline-image-info {
   top: auto;
   left: 100%;
-  -ms-transform-origin: bottom left;
   -webkit-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
   transform-origin: bottom left;
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  transform: rotate(-90deg) scaleY(1) scaleX(1);
 }
 .image[orientation="180"] .inline-image-info {
   top: 0px;
   bottom: auto;
-  -webkit-transform: rotate(180deg);
-  -moz-transform: rotate(180deg);
-  -o-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
+  transform: rotate(180deg) scaleY(1) scaleX(1);
 }
 .image[orientation="270"] .inline-image-info {
   top: auto;
   left: auto;
   right: 100%;
-  -ms-transform-origin: bottom right;
   -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
   transform-origin: bottom right;
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
+  transform: rotate(90deg) scaleY(1) scaleX(1);
 }
 .overlay-info {
   display: none;
@@ -390,11 +469,11 @@ body {
   bottom: -25px;
   left: 25px;
   background: yellow;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(45deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(45deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(45deg) scaleY(1) scaleX(1);
+  transform: rotate(45deg) scaleY(1) scaleX(1);
 }
 .down-indicator {
   top: auto;
diff --git a/ui/layout.less b/ui/layout.less
index e9fc8d2d..33adfce6 100755
--- a/ui/layout.less
+++ b/ui/layout.less
@@ -2,6 +2,46 @@
 * 
 **********************************************************************/
 
+/********************************************************** Mixins ***/
+
+.user-select (@mode: auto) {
+	-moz-user-select: @mode;
+	-webkit-user-select: @mode;
+	-o-user-select: @mode;
+	-ms-user-select: @mode;
+	user-select: @mode;
+}
+
+
+.origin (@x:top, @y:left) {
+	-webkit-transform-origin: @arguments;
+	-ms-transform-origin: @arguments;
+	transform-origin: @arguments;
+}
+
+
+.transform (@deg:0deg, @scaleX:1, @scaleY:1) {
+	-webkit-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	-moz-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	-o-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	-ms-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+}
+.rotate (@deg) {
+	.transform(@deg)
+}
+.flipped-vertically () {
+	.transform(0deg, 1, -1)
+}
+.flipped-horizontally () {
+	.transform(0deg, -1, 1)
+}
+
+
+
+/*********************************************************************/
+
+
 body {
 	font-family: sans-serif;
 	padding: 0px;
@@ -20,11 +60,7 @@ body {
 	/*border: solid blue 1px;*/
 	box-sizing: border-box;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-o-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+	.user-select;
 }
 
 
@@ -38,9 +74,7 @@ body {
 			shift the element, when its dimensions change... 
 			...this is because .ribbon-set will both be used for scaling 
 			and aligning... */
-	transform-origin: top left;
-	-ms-transform-origin: top left;
-	-webkit-transform-origin: top left; /* Safari and Chrome */
+	.origin(top, left);
 }
 .ribbon-set:empty:after {
 	display: block;
@@ -108,14 +142,6 @@ body {
 	border: solid red 5px;
 }
 
-.rotate (@deg) {
-	-webkit-transform: rotate(@deg);
-	-moz-transform: rotate(@deg);
-	-o-transform: rotate(@deg);
-	-ms-transform: rotate(@deg);
-	transform: rotate(@deg);
-}
-
 /* image turning... */
 /* NOTE: need to account for proportions after turning... */
 .image[orientation="90"] {
@@ -134,48 +160,45 @@ body {
  	combine different parts of a transform attr from different 
  	classes */
 .image[flipped*="vertical"] {
-        -moz-transform: scaleY(-1);
-        -o-transform: scaleY(-1);
-        -webkit-transform: scaleY(-1);
-        -ms-transform: scaleY(-1);
-        transform: scaleY(-1);
+	.flipped-vertically;
 }
 .image[orientation="90"][flipped="vertical"] {
+	.transform(90deg, 1, -1)
 }
 .image[orientation="180"][flipped="vertical"] {
+	.transform(180deg, 1, -1)
 }
 .image[orientation="270"][flipped="vertical"] {
+	.transform(270deg, 1, -1)
 }
 
 
 /* Flipped horizontally only... */
 .image[flipped*="horizontal"] {
-        -moz-transform: scaleX(-1);
-        -o-transform: scaleX(-1);
-        -webkit-transform: scaleX(-1);
-        -ms-transform: scaleX(-1);
-        transform: scaleX(-1);
+	.flipped-horizontally;
 }
 .image[orientation="90"][flipped="horizontal"] {
+	.transform(90deg, -1)
 }
 .image[orientation="180"][flipped="horizontal"] {
+	.transform(180deg, -1)
 }
 .image[orientation="270"][flipped="horizontal"] {
+	.transform(270deg, -1)
 }
 
 /* Flipped vertically only... */
 .image[flipped*="vertical"][flipped*="horizontal"] {
-        -moz-transform: scaleX(-1) scaleY(-1);
-        -o-transform: scaleX(-1) scaleY(-1);
-        -webkit-transform: scaleX(-1) scaleY(-1);
-        -ms-transform: scaleX(-1) scaleY(-1);
-        transform: scaleX(-1) scaleY(-1);
+	.transform(0deg, -1, -1)
 }
 .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
+	.transform(90deg, -1, -1)
 }
 .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
+	.transform(180deg, -1, -1)
 }
 .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
+	.transform(270deg, -1, -1)
 }
 
 
@@ -209,25 +232,46 @@ body {
 	width: 15px;
 	height: 15px;
 
+	top: auto;
 	bottom: 5px;
+	left: auto;
 	right: 5px;
 
 	border-radius: 50%;
 	background: blue;
 }
-.marks-visible.viewer .marked.image[orientation="90"]:after {
+.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
 	top: 5px;
+	bottom: auto:
+	left: auto;
 	right: 5px;
 }
-.marks-visible.viewer .marked.image[orientation="180"]:after {
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
 	top: 5px;
+	bottom: auto;
 	left: 5px;
+	right: auto;
 }
-.marks-visible.viewer .marked.image[orientation="270"]:after {
+.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
+	top: auto;
 	bottom: 5px;
 	left: 5px;
+	right: auto;
 }
 
+
 /* XXX make the marks position relative to viewer or gidden compleatly */
 .marks-visible.single-image-mode.viewer .marked.image:after {
 	display: none;
@@ -250,11 +294,7 @@ body {
 
 	background: blue;
 
-	-webkit-transform: rotate(45deg);
-	-moz-transform: rotate(45deg);
-	-o-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+	.rotate(45deg)
 }
 .marks-visible.viewer .marked.image[orientation="90"]:after {
 	top: -15px;
@@ -325,11 +365,7 @@ body {
 	opacity: 0.7;
 }
 .image .inline-image-info:hover {
-	-moz-user-select: auto;
-	-webkit-user-select: auto;
-	-o-user-select: auto;
-	-ms-user-select: auto;
-	user-select: auto;
+	.user-select(auto);
 }
 .image .inline-image-info::selection {
 	color: white;
@@ -346,40 +382,24 @@ body {
 	top: auto;
 	left: 100%;
 
-	-ms-transform-origin: bottom left;
-	-webkit-transform-origin: bottom left;
-	transform-origin: bottom left;
+	.origin(bottom, left);
 
-	-webkit-transform: rotate(-90deg);
-	-moz-transform: rotate(-90deg);
-	-o-transform: rotate(-90deg);
-	-ms-transform: rotate(-90deg);
-	transform: rotate(-90deg);
+	.rotate(-90deg);
 }
 .image[orientation="180"] .inline-image-info {
 	top: 0px;
 	bottom: auto;
 
-	-webkit-transform: rotate(180deg);
-	-moz-transform: rotate(180deg);
-	-o-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
+	.rotate(180deg);
 }
 .image[orientation="270"] .inline-image-info {
 	top: auto;
 	left: auto;
 	right: 100%;
 
-	-ms-transform-origin: bottom right;
-	-webkit-transform-origin: bottom right;
-	transform-origin: bottom right;
+	.origin(bottom, right);
 
-	-webkit-transform: rotate(90deg);
-	-moz-transform: rotate(90deg);
-	-o-transform: rotate(90deg);
-	-ms-transform: rotate(90deg);
-	transform: rotate(90deg);
+	.rotate(90deg);
 }
 
 .overlay-info {
@@ -400,11 +420,7 @@ body {
 	opacity: 0.6;
 }
 .overlay-info:hover {
-	-moz-user-select: auto;
-	-webkit-user-select: auto;
-	-o-user-select: auto;
-	-ms-user-select: auto;
-	user-select: auto;
+	.user-select(auto);
 }
 .overlay-info .float-right {
 	float: right;
@@ -462,11 +478,7 @@ body {
 
 	background: yellow;
 
-	-webkit-transform: rotate(45deg);
-	-moz-transform: rotate(45deg);
-	-o-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+	.rotate(45deg);
 }
 .down-indicator {
 	top: auto;