GUI Code refactor

GUI Code refactor for the sun release code.

Issue-Id : CLIENT-11

Change-Id: I771cc25ff3c8ff7a4e939ce7baef7dd94a67974b
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>

2 files changed, 555 insertions, 555 deletions

diff --git a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css
index 46e2a9aa..def18f25 100644
--- a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css
+++ b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css
@@ -1,382 +1,382 @@
-/**********************
- *CSS Animations by:
- *http://codepen.io/vivinantony
-***********************/
-.spinner1 {
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
-
-.double-bounce1, .double-bounce2 {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: #fff;
-  opacity: 0.6;
-  position: absolute;
-  top: 0;
-  left: 0;
-  
-  -webkit-animation: bounce 2.0s infinite ease-in-out;
-  animation: bounce 2.0s infinite ease-in-out;
-}
-
-.double-bounce2 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-@-webkit-keyframes bounce {
-  0%, 100% { -webkit-transform: scale(0.0) }
-  50% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes bounce {
-  0%, 100% { 
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 50% { 
-    transform: scale(1.0);
-    -webkit-transform: scale(1.0);
-  }
-}
-
-.spinner2 {
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
-
-.container1 > div, .container2 > div, .container3 > div {
-  width: 6px;
-  height: 6px;
-  background-color: #fff;
-
-  border-radius: 100%;
-  position: absolute;
-  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
-  animation: bouncedelay 1.2s infinite ease-in-out;
-  /* Prevent first frame from flickering when animation starts */
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-.spinner2 .spinner-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.container2 {
-  -webkit-transform: rotateZ(45deg);
-  transform: rotateZ(45deg);
-}
-
-.container3 {
-  -webkit-transform: rotateZ(90deg);
-  transform: rotateZ(90deg);
-}
-
-.circle1 { top: 0; left: 0; }
-.circle2 { top: 0; right: 0; }
-.circle3 { right: 0; bottom: 0; }
-.circle4 { left: 0; bottom: 0; }
-
-.container2 .circle1 {
-  -webkit-animation-delay: -1.1s;
-  animation-delay: -1.1s;
-}
-
-.container3 .circle1 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-.container1 .circle2 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-
-.container2 .circle2 {
-  -webkit-animation-delay: -0.8s;
-  animation-delay: -0.8s;
-}
-
-.container3 .circle2 {
-  -webkit-animation-delay: -0.7s;
-  animation-delay: -0.7s;
-}
-
-.container1 .circle3 {
-  -webkit-animation-delay: -0.6s;
-  animation-delay: -0.6s;
-}
-
-.container2 .circle3 {
-  -webkit-animation-delay: -0.5s;
-  animation-delay: -0.5s;
-}
-
-.container3 .circle3 {
-  -webkit-animation-delay: -0.4s;
-  animation-delay: -0.4s;
-}
-
-.container1 .circle4 {
-  -webkit-animation-delay: -0.3s;
-  animation-delay: -0.3s;
-}
-
-.container2 .circle4 {
-  -webkit-animation-delay: -0.2s;
-  animation-delay: -0.2s;
-}
-
-.container3 .circle4 {
-  -webkit-animation-delay: -0.1s;
-  animation-delay: -0.1s;
-}
-
-@-webkit-keyframes bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0.0) }
-  40% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes bouncedelay {
-  0%, 80%, 100% { 
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 40% { 
-    transform: scale(1.0);
-    -webkit-transform: scale(1.0);
-  }
-}
-
-.spinner3 {
-  width: 40px;
-  height: 40px;
-  position: relative;  
-  -webkit-animation: rotate 2.0s infinite linear;
-  animation: rotate 2.0s infinite linear;
-}
-
-.dot1, .dot2 {
-  width: 60%;
-  height: 60%;
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  background-color: #fff;
-  border-radius: 100%;
-  
-  -webkit-animation: bounce 2.0s infinite ease-in-out;
-  animation: bounce 2.0s infinite ease-in-out;
-}
-
-.dot2 {
-  top: auto;
-  bottom: 0px;
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
-@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
-
-@-webkit-keyframes bounce {
-  0%, 100% { -webkit-transform: scale(0.0) }
-  50% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes bounce {
-  0%, 100% { 
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 50% { 
-    transform: scale(1.0);
-    -webkit-transform: scale(1.0);
-  }
-}
-
-.spinner4 {
-  width: 30px;
-  height: 30px;
-  background-color: #fff;
-  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
-  animation: rotateplane 1.2s infinite ease-in-out;
-}
-
-@-webkit-keyframes rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
-}
-
-@keyframes rotateplane {
-  0% { 
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
-  } 50% { 
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
-  } 100% { 
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
-}
-
-.spinner5 {
-  width: 32px;
-  height: 32px;
-  position: relative;
-}
-
-.cube1, .cube2 {
-  background-color: #fff;
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  
-  -webkit-animation: cubemove 1.8s infinite ease-in-out;
-  animation: cubemove 1.8s infinite ease-in-out;
-}
-
-.cube2 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-
-@-webkit-keyframes cubemove {
-  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
-  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
-  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
-  100% { -webkit-transform: rotate(-360deg) }
-}
-
-@keyframes cubemove {
-  25% { 
-    transform: translateX(42px) rotate(-90deg) scale(0.5);
-    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
-  } 50% { 
-    transform: translateX(42px) translateY(42px) rotate(-179deg);
-    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
-  } 50.1% { 
-    transform: translateX(42px) translateY(42px) rotate(-180deg);
-    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
-  } 75% { 
-    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-  } 100% { 
-    transform: rotate(-360deg);
-    -webkit-transform: rotate(-360deg);
-  }
-}
-
-.spinner6 {
-  width: 50px;
-  height: 30px;
-  text-align: center;
-}
-
-.spinner6 > div {
-  background-color: #fff;
-  height: 100%;
-  width: 6px;
-  margin-left:2px;
-  display: inline-block;
-  
-  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
-  animation: stretchdelay 1.2s infinite ease-in-out;
-}
-
-.spinner6 .rect2 {
-  -webkit-animation-delay: -1.1s;
-  animation-delay: -1.1s;
-}
-
-.spinner6 .rect3 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-.spinner6 .rect4 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-
-.spinner6 .rect5 {
-  -webkit-animation-delay: -0.8s;
-  animation-delay: -0.8s;
-}
-
-@-webkit-keyframes stretchdelay {
-  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
-  20% { -webkit-transform: scaleY(1.0) }
-}
-
-@keyframes stretchdelay {
-  0%, 40%, 100% { 
-    transform: scaleY(0.4);
-    -webkit-transform: scaleY(0.4);
-  }  20% { 
-    transform: scaleY(1.0);
-    -webkit-transform: scaleY(1.0);
-  }
-}
-  .spinner7 {
-      width: 90px;
-      height: 30px;
-      text-align: center;
-    }
-
-    .spinner7 > div {
-      background-color: #fff;
-      height: 15px;
-      width: 15px;
-      margin-left:3px;
-      border-radius: 50%;
-      display: inline-block;
-      
-      -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
-      animation: stretchdelay 0.7s infinite ease-in-out;
-    }
-
-    .spinner7 .circ2 {
-      -webkit-animation-delay: -0.6s;
-      animation-delay: -0.6s;
-    }
-
-    .spinner7 .circ3 {
-      -webkit-animation-delay: -0.5s;
-      animation-delay: -0.5s;
-    }
-
-    .spinner7 .circ4 {
-      -webkit-animation-delay: -0.4s;
-      animation-delay: -0.4s;
-    }
-
-    .spinner7 .circ5 {
-      -webkit-animation-delay: -0.3s;
-      animation-delay: -0.3s;
-    }
-
-    @-webkit-keyframes stretchdelay {
-      0%, 40%, 100% { -webkit-transform: translateY(-10px) }  
-      20% { -webkit-transform: translateY(-20px) }
-    }
-
-    @keyframes stretchdelay {
-      0%, 40%, 100% { 
-        transform: translateY(-10px);
-        -webkit-transform: translateY(-10px);
-      } 20% {
-        transform: translateY(-20px);
-        -webkit-transform: translateY(-20px);
-      }
+/**********************

+ *CSS Animations by:

+ *http://codepen.io/vivinantony

+***********************/

+.spinner1 {

+  width: 40px;

+  height: 40px;

+  position: relative;

+}

+

+

+.double-bounce1, .double-bounce2 {

+  width: 100%;

+  height: 100%;

+  border-radius: 50%;

+  background-color: #fff;

+  opacity: 0.6;

+  position: absolute;

+  top: 0;

+  left: 0;

+  

+  -webkit-animation: bounce 2.0s infinite ease-in-out;

+  animation: bounce 2.0s infinite ease-in-out;

+}

+

+.double-bounce2 {

+  -webkit-animation-delay: -1.0s;

+  animation-delay: -1.0s;

+}

+

+@-webkit-keyframes bounce {

+  0%, 100% { -webkit-transform: scale(0.0) }

+  50% { -webkit-transform: scale(1.0) }

+}

+

+@keyframes bounce {

+  0%, 100% { 

+    transform: scale(0.0);

+    -webkit-transform: scale(0.0);

+  } 50% { 

+    transform: scale(1.0);

+    -webkit-transform: scale(1.0);

+  }

+}

+

+.spinner2 {

+  width: 40px;

+  height: 40px;

+  position: relative;

+}

+

+

+.container1 > div, .container2 > div, .container3 > div {

+  width: 6px;

+  height: 6px;

+  background-color: #fff;

+

+  border-radius: 100%;

+  position: absolute;

+  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

+  animation: bouncedelay 1.2s infinite ease-in-out;

+  /* Prevent first frame from flickering when animation starts */

+  -webkit-animation-fill-mode: both;

+  animation-fill-mode: both;

+}

+

+.spinner2 .spinner-container {

+  position: absolute;

+  width: 100%;

+  height: 100%;

+}

+

+.container2 {

+  -webkit-transform: rotateZ(45deg);

+  transform: rotateZ(45deg);

+}

+

+.container3 {

+  -webkit-transform: rotateZ(90deg);

+  transform: rotateZ(90deg);

+}

+

+.circle1 { top: 0; left: 0; }

+.circle2 { top: 0; right: 0; }

+.circle3 { right: 0; bottom: 0; }

+.circle4 { left: 0; bottom: 0; }

+

+.container2 .circle1 {

+  -webkit-animation-delay: -1.1s;

+  animation-delay: -1.1s;

+}

+

+.container3 .circle1 {

+  -webkit-animation-delay: -1.0s;

+  animation-delay: -1.0s;

+}

+

+.container1 .circle2 {

+  -webkit-animation-delay: -0.9s;

+  animation-delay: -0.9s;

+}

+

+.container2 .circle2 {

+  -webkit-animation-delay: -0.8s;

+  animation-delay: -0.8s;

+}

+

+.container3 .circle2 {

+  -webkit-animation-delay: -0.7s;

+  animation-delay: -0.7s;

+}

+

+.container1 .circle3 {

+  -webkit-animation-delay: -0.6s;

+  animation-delay: -0.6s;

+}

+

+.container2 .circle3 {

+  -webkit-animation-delay: -0.5s;

+  animation-delay: -0.5s;

+}

+

+.container3 .circle3 {

+  -webkit-animation-delay: -0.4s;

+  animation-delay: -0.4s;

+}

+

+.container1 .circle4 {

+  -webkit-animation-delay: -0.3s;

+  animation-delay: -0.3s;

+}

+

+.container2 .circle4 {

+  -webkit-animation-delay: -0.2s;

+  animation-delay: -0.2s;

+}

+

+.container3 .circle4 {

+  -webkit-animation-delay: -0.1s;

+  animation-delay: -0.1s;

+}

+

+@-webkit-keyframes bouncedelay {

+  0%, 80%, 100% { -webkit-transform: scale(0.0) }

+  40% { -webkit-transform: scale(1.0) }

+}

+

+@keyframes bouncedelay {

+  0%, 80%, 100% { 

+    transform: scale(0.0);

+    -webkit-transform: scale(0.0);

+  } 40% { 

+    transform: scale(1.0);

+    -webkit-transform: scale(1.0);

+  }

+}

+

+.spinner3 {

+  width: 40px;

+  height: 40px;

+  position: relative;  

+  -webkit-animation: rotate 2.0s infinite linear;

+  animation: rotate 2.0s infinite linear;

+}

+

+.dot1, .dot2 {

+  width: 60%;

+  height: 60%;

+  display: inline-block;

+  position: absolute;

+  top: 0;

+  background-color: #fff;

+  border-radius: 100%;

+  

+  -webkit-animation: bounce 2.0s infinite ease-in-out;

+  animation: bounce 2.0s infinite ease-in-out;

+}

+

+.dot2 {

+  top: auto;

+  bottom: 0px;

+  -webkit-animation-delay: -1.0s;

+  animation-delay: -1.0s;

+}

+

+@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

+@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

+

+@-webkit-keyframes bounce {

+  0%, 100% { -webkit-transform: scale(0.0) }

+  50% { -webkit-transform: scale(1.0) }

+}

+

+@keyframes bounce {

+  0%, 100% { 

+    transform: scale(0.0);

+    -webkit-transform: scale(0.0);

+  } 50% { 

+    transform: scale(1.0);

+    -webkit-transform: scale(1.0);

+  }

+}

+

+.spinner4 {

+  width: 30px;

+  height: 30px;

+  background-color: #fff;

+  -webkit-animation: rotateplane 1.2s infinite ease-in-out;

+  animation: rotateplane 1.2s infinite ease-in-out;

+}

+

+@-webkit-keyframes rotateplane {

+  0% { -webkit-transform: perspective(120px) }

+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }

+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

+}

+

+@keyframes rotateplane {

+  0% { 

+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 

+  } 50% { 

+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 

+  } 100% { 

+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

+  }

+}

+

+.spinner5 {

+  width: 32px;

+  height: 32px;

+  position: relative;

+}

+

+.cube1, .cube2 {

+  background-color: #fff;

+  width: 10px;

+  height: 10px;

+  position: absolute;

+  top: 0;

+  left: 0;

+  

+  -webkit-animation: cubemove 1.8s infinite ease-in-out;

+  animation: cubemove 1.8s infinite ease-in-out;

+}

+

+.cube2 {

+  -webkit-animation-delay: -0.9s;

+  animation-delay: -0.9s;

+}

+

+@-webkit-keyframes cubemove {

+  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

+  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

+  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

+  100% { -webkit-transform: rotate(-360deg) }

+}

+

+@keyframes cubemove {

+  25% { 

+    transform: translateX(42px) rotate(-90deg) scale(0.5);

+    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

+  } 50% { 

+    transform: translateX(42px) translateY(42px) rotate(-179deg);

+    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

+  } 50.1% { 

+    transform: translateX(42px) translateY(42px) rotate(-180deg);

+    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

+  } 75% { 

+    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

+    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

+  } 100% { 

+    transform: rotate(-360deg);

+    -webkit-transform: rotate(-360deg);

+  }

+}

+

+.spinner6 {

+  width: 50px;

+  height: 30px;

+  text-align: center;

+}

+

+.spinner6 > div {

+  background-color: #fff;

+  height: 100%;

+  width: 6px;

+  margin-left:2px;

+  display: inline-block;

+  

+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;

+  animation: stretchdelay 1.2s infinite ease-in-out;

+}

+

+.spinner6 .rect2 {

+  -webkit-animation-delay: -1.1s;

+  animation-delay: -1.1s;

+}

+

+.spinner6 .rect3 {

+  -webkit-animation-delay: -1.0s;

+  animation-delay: -1.0s;

+}

+

+.spinner6 .rect4 {

+  -webkit-animation-delay: -0.9s;

+  animation-delay: -0.9s;

+}

+

+.spinner6 .rect5 {

+  -webkit-animation-delay: -0.8s;

+  animation-delay: -0.8s;

+}

+

+@-webkit-keyframes stretchdelay {

+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  

+  20% { -webkit-transform: scaleY(1.0) }

+}

+

+@keyframes stretchdelay {

+  0%, 40%, 100% { 

+    transform: scaleY(0.4);

+    -webkit-transform: scaleY(0.4);

+  }  20% { 

+    transform: scaleY(1.0);

+    -webkit-transform: scaleY(1.0);

+  }

+}

+  .spinner7 {

+      width: 90px;

+      height: 30px;

+      text-align: center;

+    }

+

+    .spinner7 > div {

+      background-color: #fff;

+      height: 15px;

+      width: 15px;

+      margin-left:3px;

+      border-radius: 50%;

+      display: inline-block;

+      

+      -webkit-animation: stretchdelay 0.7s infinite ease-in-out;

+      animation: stretchdelay 0.7s infinite ease-in-out;

+    }

+

+    .spinner7 .circ2 {

+      -webkit-animation-delay: -0.6s;

+      animation-delay: -0.6s;

+    }

+

+    .spinner7 .circ3 {

+      -webkit-animation-delay: -0.5s;

+      animation-delay: -0.5s;

+    }

+

+    .spinner7 .circ4 {

+      -webkit-animation-delay: -0.4s;

+      animation-delay: -0.4s;

+    }

+

+    .spinner7 .circ5 {

+      -webkit-animation-delay: -0.3s;

+      animation-delay: -0.3s;

+    }

+

+    @-webkit-keyframes stretchdelay {

+      0%, 40%, 100% { -webkit-transform: translateY(-10px) }  

+      20% { -webkit-transform: translateY(-20px) }

+    }

+

+    @keyframes stretchdelay {

+      0%, 40%, 100% { 

+        transform: translateY(-10px);

+        -webkit-transform: translateY(-10px);

+      } 20% {

+        transform: translateY(-20px);

+        -webkit-transform: translateY(-20px);

+      }

     }
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js
index 35acda50..a93a694c 100644
--- a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js
+++ b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js
@@ -1,174 +1,174 @@
-/*--------------------------------------------------------------------
- *JAVASCRIPT "FakeLoader.js"
- *Version:    1.1.0 - 2014
- *author:     João Pereira
- *website:    http://www.joaopereira.pt
- *Licensed MIT 
------------------------------------------------------------------------*/
-(function ($) {
- 
-    $.fn.fakeLoader = function(options) {
-        //Defaults
-        $.fn.settings = $.extend({
-            timeToHide:10, // Default Time to hide fakeLoader
-            pos:'fixed',// Default Position
-            top:'0px',  // Default Top value
-            left:'0px', // Default Left value
-            width:'100%', // Default width 
-            height:'100%', // Default Height
-            zIndex: '999',  // Default zIndex 
-            bgColor: '#2ecc71', // Default background color
-			opacity:'0.6',//默认透明度
-			text:'',//默认加载中文字
-            spinner:'spinner1', // Default Spinner
-            imagePath:'' // Default Path custom image
-        }, options);
-		var timer=null;
-		$.fn.Setopacity=function(opacity){
-			$(".loadingbackground").fadeTo("slow",opacity);
-		};
-		$.fn.SetTimeToHide=function(timetohide){
-			var el = $(this);
-			el.settings.timeToHide=timetohide;
-			if(!!timer)clearTimeout(timer);
-			el.css({
-				'display':"block"
-			});//fadeTo("fast",el.settings.opacity);
-			$(".loadingbackground").fadeTo(1,el.settings.opacity);
-			setTimeout(function(){
-				el.fadeOut();//fadeTo("slow",0);
-			}, el.settings.timeToHide);
-		};
-		$.fn.setToHide=function(){
-			var el = $(this);
-			if(!!timer)clearTimeout(timer);
-			el.fadeOut();//fadeTo("slow",0);
-		};
-		//The target
-        var el = $(this);
-
-        //Customized Spinners
-        var spinner01 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
-        var spinner02 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
-        var spinner03 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div></div>';
-        var spinner04 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner4"></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
-        var spinner05 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
-        var spinner06 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
-        var spinner07 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';
-
-        //Init styles
-        var initStyles = {
-            'position':el.settings.pos,
-            'width':el.settings.width,
-            'height':el.settings.height,
-            'top':el.settings.top,
-            'left':el.settings.left
-        };
-
-        //Apply styles
-        el.css(initStyles);		
-        //Each 
-        el.each(function() {
-            var a = el.settings.spinner;
-            //console.log(a)
-                switch (a) {
-                    case 'spinner1':
-                            el.html(spinner01);
-                        break;
-                    case 'spinner2':
-                            el.html(spinner02);
-                        break;
-                    case 'spinner3':
-                            el.html(spinner03);
-                        break;
-                    case 'spinner4':
-                            el.html(spinner04);
-                        break;
-                    case 'spinner5':
-                            el.html(spinner05);
-                        break;
-                    case 'spinner6':
-                            el.html(spinner06);
-                        break;
-                    case 'spinner7':
-                            el.html(spinner07);
-                        break;
-                    default:
-                        el.html(spinner01);
-                    }
-
-                //Add customized loader image
-
-                if (el.settings.imagePath !='') {
-                    el.html('<div class="fl"><img src="'+el.settings.imagePath+'"><span>'+el.settings.text+'</span></div>');
-                }
-				centerLoader();
-        });
-		
-        //Time to hide fakeLoader
-		if(el.settings.timeToHide>0){
-			timer=setTimeout(function(){
-					el.fadeOut();//fadeTo("slow",0);
-			}, el.settings.timeToHide);
-		}
-        //Return Styles 
-        this.css({
-            //'backgroundColor':el.settings.bgColor,
-			'display':"block",
-            'zIndex':el.settings.zIndex
-        });
-		
-        $(".loadingbackground").css(initStyles).css({
-            'backgroundColor':el.settings.bgColor,
-			'opacity':el.settings.opacity,
-            'zIndex':el.settings.zIndex+1
-        });
-		$(".loadingTip").css(initStyles).css({
-            //'backgroundColor':el.settings.bgColor,
-            'zIndex':el.settings.zIndex+2
-        });
-		return this;
-    }; // End Fake Loader
- 
-
-        //Center Spinner
-        function centerLoader() {
-
-            var winW = $(window).width();
-            var winH = $(window).height();
-
-            var spinnerW = $('.fl').outerWidth();
-            var spinnerH = $('.fl').outerHeight();
-			var fW = $('.f2').outerWidth();
-			var left=(winW/2)-(spinnerW/2);
-			var left2=(winW/2)-(fW/2);
-			left=left>0?left:winW/2-20;
-			left2=left2==0||fW==0?left:left2;
-			//left2=left2>0?left2:winW/2-40;
-			left2=left2-20;
-			console.log("loding gif:"+left+"   text:"+left2);
-			$('.fl').css({
-				'position':'absolute',
-				'left':left,
-				'top':(winH/2)-(spinnerH/2)
-			});
-			$('.f2').css({
-				'position':'absolute',
-				'left':left2,
-				'top':(winH/2)+(spinnerH/2)
-			});
-        }
-
-        $(window).load(function(){
-                centerLoader();
-              $(window).resize(function(){
-                centerLoader();
-              });
-        });
-
-
-}(jQuery));
-
-
-
-
+/*--------------------------------------------------------------------

+ *JAVASCRIPT "FakeLoader.js"

+ *Version:    1.1.0 - 2014

+ *author:     João Pereira

+ *website:    http://www.joaopereira.pt

+ *Licensed MIT 

+-----------------------------------------------------------------------*/

+(function ($) {

+ 

+    $.fn.fakeLoader = function(options) {

+        //Defaults

+        $.fn.settings = $.extend({

+            timeToHide:10, // Default Time to hide fakeLoader

+            pos:'fixed',// Default Position

+            top:'0px',  // Default Top value

+            left:'0px', // Default Left value

+            width:'100%', // Default width 

+            height:'100%', // Default Height

+            zIndex: '999',  // Default zIndex 

+            bgColor: '#2ecc71', // Default background color

+			opacity:'0.6',//默认透明度

+			text:'',//默认加载中文字

+            spinner:'spinner1', // Default Spinner

+            imagePath:'' // Default Path custom image

+        }, options);

+		var timer=null;

+		$.fn.Setopacity=function(opacity){

+			$(".loadingbackground").fadeTo("slow",opacity);

+		};

+		$.fn.SetTimeToHide=function(timetohide){

+			var el = $(this);

+			el.settings.timeToHide=timetohide;

+			if(!!timer)clearTimeout(timer);

+			el.css({

+				'display':"block"

+			});//fadeTo("fast",el.settings.opacity);

+			$(".loadingbackground").fadeTo(1,el.settings.opacity);

+			setTimeout(function(){

+				el.fadeOut();//fadeTo("slow",0);

+			}, el.settings.timeToHide);

+		};

+		$.fn.setToHide=function(){

+			var el = $(this);

+			if(!!timer)clearTimeout(timer);

+			el.fadeOut();//fadeTo("slow",0);

+		};

+		//The target

+        var el = $(this);

+

+        //Customized Spinners

+        var spinner01 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';

+        var spinner02 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';

+        var spinner03 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div></div>';

+        var spinner04 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner4"></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';

+        var spinner05 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';

+        var spinner06 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';

+        var spinner07 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';

+

+        //Init styles

+        var initStyles = {

+            'position':el.settings.pos,

+            'width':el.settings.width,

+            'height':el.settings.height,

+            'top':el.settings.top,

+            'left':el.settings.left

+        };

+

+        //Apply styles

+        el.css(initStyles);		

+        //Each 

+        el.each(function() {

+            var a = el.settings.spinner;

+            //console.log(a)

+                switch (a) {

+                    case 'spinner1':

+                            el.html(spinner01);

+                        break;

+                    case 'spinner2':

+                            el.html(spinner02);

+                        break;

+                    case 'spinner3':

+                            el.html(spinner03);

+                        break;

+                    case 'spinner4':

+                            el.html(spinner04);

+                        break;

+                    case 'spinner5':

+                            el.html(spinner05);

+                        break;

+                    case 'spinner6':

+                            el.html(spinner06);

+                        break;

+                    case 'spinner7':

+                            el.html(spinner07);

+                        break;

+                    default:

+                        el.html(spinner01);

+                    }

+

+                //Add customized loader image

+

+                if (el.settings.imagePath !='') {

+                    el.html('<div class="fl"><img src="'+el.settings.imagePath+'"><span>'+el.settings.text+'</span></div>');

+                }

+				centerLoader();

+        });

+		

+        //Time to hide fakeLoader

+		if(el.settings.timeToHide>0){

+			timer=setTimeout(function(){

+					el.fadeOut();//fadeTo("slow",0);

+			}, el.settings.timeToHide);

+		}

+        //Return Styles 

+        this.css({

+            //'backgroundColor':el.settings.bgColor,

+			'display':"block",

+            'zIndex':el.settings.zIndex

+        });

+		

+        $(".loadingbackground").css(initStyles).css({

+            'backgroundColor':el.settings.bgColor,

+			'opacity':el.settings.opacity,

+            'zIndex':el.settings.zIndex+1

+        });

+		$(".loadingTip").css(initStyles).css({

+            //'backgroundColor':el.settings.bgColor,

+            'zIndex':el.settings.zIndex+2

+        });

+		return this;

+    }; // End Fake Loader

+ 

+

+        //Center Spinner

+        function centerLoader() {

+

+            var winW = $(window).width();

+            var winH = $(window).height();

+

+            var spinnerW = $('.fl').outerWidth();

+            var spinnerH = $('.fl').outerHeight();

+			var fW = $('.f2').outerWidth();

+			var left=(winW/2)-(spinnerW/2);

+			var left2=(winW/2)-(fW/2);

+			left=left>0?left:winW/2-20;

+			left2=left2==0||fW==0?left:left2;

+			//left2=left2>0?left2:winW/2-40;

+			left2=left2-20;

+			console.log("loding gif:"+left+"   text:"+left2);

+			$('.fl').css({

+				'position':'absolute',

+				'left':left,

+				'top':(winH/2)-(spinnerH/2)

+			});

+			$('.f2').css({

+				'position':'absolute',

+				'left':left2,

+				'top':(winH/2)+(spinnerH/2)

+			});

+        }

+

+        $(window).load(function(){

+                centerLoader();

+              $(window).resize(function(){

+                centerLoader();

+              });

+        });

+

+

+}(jQuery));

+

+

+

+