<?php if($filename == 'index.php'){

$searchStr = "on_sponcer = '1' AND gallery_status = '1'";
$gallerysDetails = $gallerysObj->getAllRecords('*',$searchStr," ORDER BY gallery_order ");

?>
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">


<style>
.typewriter h1 {
  font-family: monospace; /* Web-safe typewriter-like font */
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #4ab848; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  /*letter-spacing: .15em;*/ /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blinking-cursor .5s step-end infinite;
	font-size:36px !important; 
	text-align:left !important; 
}
.typewriter h1 a { color:#fff; font-weight:bold; font-size:60px;font-family: 'Oswald', sans-serif; text-align:left;}
.img-banner{    transform: translate(0%, 0%) !important; left:0% !important;}
.access{ margin-right:10px; color:#fff; font-size:60px; float:left; font-weight:400;}
.home-tag{position:absolute; top:40%; text-align:left; color:#fff; font-size:56px; left:30%;font-family: 'Oswald', sans-serif;}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blinking-cursor {
  from, to { border-color: transparent }
  50% { border-color: #4ab848; }
}

</style>

<script type="text/javascript">

var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };


</script>

<section>
  <div class="banner">
    <div class="demo">
      <div class="slides">
        <?php /*if($gallerysDetails && count($gallerysDetails) > 0 ){ $caOrder =1; 
						foreach ($gallerysDetails as $gallerys){  ?>
        <?php if($gallerys->gallery_banner!='' && file_exists(DIR_UPLOAD_BANNER.$gallerys->gallery_banner)) {?>
        <div><img src="<?php echo DIR_UPLOAD_BANNER_SHOW.$gallerys->gallery_banner ?>"  class="img-fluid" /></div>
        <?php }
	} 
	}*/ ?>
    <div id="random_number1" class="carousel slide youtube-carousel"  data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
        <div><img src="images/banner.jpg" class="img-fluid img-banner" /></div>
          <!--<div class="video-container item active">
            <div class="youtube-video" id='rs12Hp5EH6k'></div>
            <div class="carousel-caption">Video 1</div>
          </div>-->
          <div style="" class="home-tag">
          <span style=" " class="access"> Access to</span>
          <div class="typewriter" style="float:left; padding-top:10px; border-bottom:5px solid #4ab848; font-weight:800;font-family: 'Oswald', sans-serif;">
 <h1><a href="" class="typewrite" data-period="2000" data-type='[ "Ready Offices", "Scalability", "Productivity", "Customization", "Flexibility", "Great Support", "New Ideas" ]'>
    <span class="wrap"></span>
  </a></h1>
</div>
          </div>
          
        </div>
        
      </div>
      </div>
    </div>
    <script type="text/javascript">
	var element = document.querySelector('.demo');
	var sildeshow = bamboo(element, 'blinds');
</script> 
  </div>
</section>
<?php } ?>
<script>
//Start Youtube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var youtubeReady = false;

//Variable for the dynamically created youtube players
var players= new Array();
var isPlaying = false;
function onYouTubeIframeAPIReady(){
  //The id of the iframe and is the same as the videoId	
  jQuery(".youtube-video").each(function(i, obj)  {
     players[obj.id] = new YT.Player(obj.id, {         
			  videoId: obj.id,
			    playerVars: {
			    controls: 2,
		      rel:0,
			  autoplay:1,
		      showinfo: 0 ,
		      modestbranding: 1,
		      wmode: "transparent",
		      html5: 1
       	},    
        events: {
          'onStateChange': onPlayerStateChange
        }
       });
     });
     youtubeReady = true;
  }


function onPlayerStateChange(event) {
  var target_control =  jQuery(event.target.getIframe()).parent().parent().parent().find(".controls");
  
  var target_caption = jQuery(event.target.getIframe()).parent().find(".carousel-caption");
  switch(event.data){
    case -1:
      jQuery(target_control).fadeIn(500);
      jQuery(target_control).children().unbind('click');
      break
     case 0:
      jQuery(target_control).fadeIn(500);
      jQuery(target_control).children().unbind('click');
      break;
     case 1:
      jQuery(target_control).children().click(function () {return false;});
      jQuery(target_caption).fadeOut(500);
      jQuery(target_control).fadeOut(500);
       break;
      case 2:
        jQuery(target_control).fadeIn(500);
        jQuery(target_control).children().unbind('click'); 
        break;
        case 3:
           jQuery(target_control).children().click(function () {return false;});
           jQuery(target_caption).fadeOut(500);
           jQuery(target_control).fadeOut(500);
           break;
          case 5:
            jQuery(target_control).children().click(function () {return false;});
            jQuery(target_caption).fadeOut(500);
            jQuery(target_control).fadeOut(500);
            break;
          default:
            break;
    }
};

jQuery(window).bind('load', function(){
  jQuery(".carousel-caption").fadeIn(500);
  jQuery(".controls").fadeIn(500);
 });

jQuery('.carousel').bind('slid.bs.carousel', function (event) {
   jQuery(".controls").fadeIn(500);
});
</script>

<style>
/*
 * Bootrap carousel plugin
 * --------------------------------------------------
 */

.video-container { 
   position: relative; /* keeps the aspect ratio */ 
   padding-bottom: 56.25%; /* fine tunes the video positioning */ 
   padding-top: 0px; overflow: hidden;
   margin-bottom: -1px;
   margin-right: -1px;   
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;  
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}
  
.carousel-control .glyphicon-chevron-left{
  top:35%;
  font-size: 20px;
  left:5%;
  margin: 0;
}

.carousel-control .glyphicon-chevron-right{
  top:35%;
  font-size: 20px;
  left:33%;
  margin: 0;
}

.carousel-control.left, .carousel-control.right {
  background-image: none;
  color: #ffffff;
  top: 50%;
  transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  opacity: 1;
  height:120px;
}

.controls{
   display: none;
}

.carousel-control:hover {
  text-decoration: none;
  filter: alpha(opacity=60);
  outline: 0;
  opacity: 0.6;
}

.left-button {
  height:70px;
  width:35px;
  border-radius: 0 90px 90px 0;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  -moz-border-radius: 0 90px 90px 0;
  -webkit-border-radius: 0 90px 90px 0;
  background-color: #e25454;
  display: inline-block;
  position: relative;
  float:left;
  /*subpixel bug*/
  margin-left: -1px; 
}

.right-button {
  height:70px;
  width:35px;
  border-radius: 90px 0 0 90px;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  -moz-border-radius: 90px 0 0 90px;
  -webkit-border-radius: 90px 0 0 90px;
  background-color: #e25454;
  display: inline-block;
  position: relative;
  float:right;
  /*subpixel bug*/
  margin-right: -1px;
}


.carousel-caption {
 display: none;
 background: none repeat scroll 0 0 #e25454;
  bottom: 0;
  font-size: 12px;
  text-align: center;
  opacity: 1;
  padding:7px 30px 7px;
  text-transform: uppercase;
  z-index:11;
  pointer-events:none;
}

@media screen and (min-width: 768px) {
.right-button {
  height:120px;
  width:60px;
  border-radius: 90px 0 0 90px;
  -moz-border-radius: 90px 0 0 90px;
  -webkit-border-radius: 90px 0 0 90px;
  display: inline-block;
  position: relative;
  float:right;
}

.left-button {
  height:120px;
  width:60px;
  border-radius: 0 90px 90px 0;
  -moz-border-radius: 0 90px 90px 0;
  -webkit-border-radius: 0 90px 90px 0;
  display: inline-block;
  position: relative;
  float:left;
}

.carousel-control .glyphicon-chevron-left{
  top:35%;
  font-size: 35px;
  left:5%;
}

.carousel-control .glyphicon-chevron-right{
  top:35%;
  font-size: 35px;
  left:35%;
}

.carousel-caption {
  font-size: 18px;
  padding:15px 20px 15px;
  }
}
@media screen and (min-width: 992px) {
 .carousel-caption {
    font-size: 18px;
    padding:15px 20px 15px;
  }
}

</style>
