var banners = new Array();      
var mediaFadeTime = 500;
var textComeTime = 2000;
var bannerContId;
var imageZoom = 1.3;
var imageReverseZoom = 1.1;
  
  function Banner() {
    this.setMedia = function(media) {
      this.media = media;
    };
    this.getMedia = function() {
      return this.media;
    };
    this.setLink = function(link) {
      this.link = link;
    };
    this.getLink = function() {
      return this.link;
    };
    this.setTime = function(time) {
      this.time = time;
    };
    this.getTime = function() {
      return this.time;
    };
    this.setHead = function(head) {
      this.head = head;
    };
    this.getHead = function() {
      return this.head;
    };
    this.setText = function(text) {
      this.text = text;
    };
    this.getText = function() {
      return this.text;
    };
    this.setSmalltext = function(smalltext) {
      this.smalltext = smalltext;
    };
    this.getSmalltext = function() {
      return this.smalltext;
    };
    this.setButton = function(button) {
      this.button = button;
    };
    this.getButton = function() {
      return this.button;
    };
    this.setFontColor = function(fontColor) {
      this.fontColor = fontColor;
    };
    this.getFontColor = function() {
      return this.fontColor;
    };
    this.setButtonFontColor = function(buttonFontColor) {
      this.buttonFontColor = buttonFontColor;
    };
    this.getButtonFontColor = function() {
      return this.buttonFontColor;
    };
    this.setButtonBgColor = function(buttonBgColor) {
      this.buttonBgColor = buttonBgColor;
    };
    this.getButtonBgColor = function() {
      return this.buttonBgColor;
    };
  }
  
  function initJSBanner(id) {
	  bannerContId = id;
	var bannerCont = $("#"+bannerContId);
	var bannerEdgeTL = $("<div></div>").attr("class","edgeTL");
	var bannerEdgeTR = $("<div></div>").attr("class","edgeTR");
	var bannerEdgeBL = $("<div></div>").attr("class","edgeBL");
	var bannerEdgeBR = $("<div></div>").attr("class","edgeBR");
	bannerCont.append(bannerEdgeTL).append(bannerEdgeTR)
	.append(bannerEdgeBL).append(bannerEdgeBR);
	  for(i=0; i<bannernum; i++){
		 eval("var obj = data"+(i+1));

	    var media = obj.media;
	    var link = obj.link;
	    var time = obj.time;
	    var head = obj.head;
	    var text = obj.text;
	    var smalltext = obj.smalltext;
	    var button = obj.button;
	    var fontColor = obj.fontColor;
	    var buttonFontColor = obj.buttonFontColor;
	    var buttonBgColor = obj.buttonBgColor;
	
	    var banner = new Banner();
	    banner.setMedia(media);
	    banner.setLink(link);
	    banner.setTime(time);
	    banner.setHead(head);
	    banner.setText(text);
	    banner.setSmalltext(smalltext);
	    banner.setButton(button);
	    banner.setFontColor(fontColor);
	    banner.setButtonFontColor(buttonFontColor);
	    banner.setButtonBgColor(buttonBgColor);
	    banners[banners.length] = banner;
	    bannerInitFinished();
    }
  }
  var numToPlay = 0;
  var stopPlaying = false;
  var textComeInTimer;
  var goOutTimer;
  var actMediaCont;
  var actMediaWidth;
  var actMediaHeight;
  var fadeOutAndGoInterval;
  
  function bannerInitFinished() {
    var bannerCont = $("#"+bannerContId);
    var bannerPager = $("<div></div>").attr("id","bannerPager");
    if(banners.length == bannernum) {
      for(i=0;i<banners.length;i++) {
        var actBanner = banners[i];
        var mediaCont = $("<div></div>").attr("class","mediaCont");
        //styles
        var fontColor = actBanner.getFontColor();
        var buttonFontColor = actBanner.getButtonFontColor();
        var buttonBgColor = actBanner.getButtonBgColor();
        //image
        var mediaSrc = actBanner.getMedia();
        var media = $("<img/>").attr("src",mediaSrc);
        mediaCont.append(media);
        //texts
        var textCont = $("<div></div>").attr("class","textCont").css("color",fontColor);
        var head = $("<div></div>").attr("class","head").html(actBanner.getHead());
        var text = $("<div></div>").attr("class","text").html(actBanner.getText());
        var smalltext = $("<div></div>").attr("class","smalltext").html(actBanner.getSmalltext());
        var button = $("<div></div>").attr("class","button bg_"+buttonBgColor.substring(1)).css("color",buttonFontColor);
        var buttonLeft = $("<div></div>").attr("class","buttLeft");
        var buttonMiddle = $("<div></div>").attr("class","buttMiddle").html(actBanner.getButton());
        var buttonRight = $("<div></div>").attr("class","buttRight");
        button.append(buttonLeft).append(buttonMiddle).append(buttonRight);

        textCont.append(head);
        textCont.append(text);
        textCont.append(smalltext);
        textCont.append(button);
        mediaCont.append(textCont);
        var bannerPagerNum = $("<a></a>").attr("href","javascript:gotoBanner("+i+")").html(i+1).attr("id",i);
        bannerPager.append(bannerPagerNum);
        bannerCont.append(mediaCont);
      }
      if(bannernum>1) {
        bannerCont.append(bannerPager);
      }
      bannerCont.mouseenter(function(){
        stopPlaying=true;
      }).mouseleave(function(){
        stopPlaying=false;
      });
      playNextBanner();
    }
  }
  var clickable = true;
  function gotoBanner(ind) {
	  if(clickable)  {
        clickable = false;
        clearTimeout(textComeInTimer);
        clearTimeout(goOutTimer);
        clearInterval(fadeOutAndGoInterval);

        actMediaCont.hide(0,function(){
          var actMediaText = actMediaCont.find("div.textCont");
          actMediaText.find(".button").hide();
          actMediaText.hide();
          numToPlay = ind;
          playNextBanner();
        });
      }
  }


  function playNextBanner() {
   if(actMediaCont) {   
	  //stopping the current anim
      actMediaCont.find("img").stop(true,false);
      //back to orig size
      actMediaCont.find("img").width(actMediaWidth);
      actMediaCont.find("img").height(actMediaHeight);
   }
	  
	$("#"+bannerContId).find("#bannerPager").find("a").removeClass("act");
    $("#"+bannerContId).find("#bannerPager").find("a:eq("+numToPlay+")").addClass("act");
    var actBanner = banners[numToPlay];
    var actTime = actBanner.getTime();
    actMediaCont = $("#"+bannerContId).children("div.mediaCont:eq("+numToPlay+")");
    //media come fadeIn
    actMediaCont.fadeIn(mediaFadeTime,function(){
      clickable = true;
      var imgOrigWidth = actMediaCont.find("img").width();
      var imgOrigHeight = actMediaCont.find("img").height();
      
      actMediaWidth = imgOrigWidth;
      actMediaHeight = imgOrigHeight;
      
      var imgNewWidth = imgOrigWidth*imageZoom;
      var imgNewHeight = imgOrigHeight*imageZoom;
      var imgNewLeft = (imgOrigWidth - imgNewWidth)/2;
      var imgNewTop = (imgOrigHeight - imgNewHeight)/2;
      actMediaCont.find("img").animate({
        "width":imgNewWidth,
        "height":imgNewHeight
      },actTime*1000,function(){
        actMediaCont.find("img").animate({
          "width":imgOrigWidth*imageReverseZoom,
          "height":imgOrigHeight*imageReverseZoom
        },textComeTime);
      });
      textComeInTimer = setTimeout(function(){
        //text come in
        var actMediaText = actMediaCont.find("div.textCont");
        actMediaText.show("slide",mediaFadeTime,function(){
          actMediaText.find(".button").fadeIn(200,function(){
            $(this).click(function(){
              document.location.href = actBanner.getLink();
            });
          });
          var fadeOutAndGo = function() {
            clearInterval(fadeOutAndGoInterval);
            if(!stopPlaying) {
              actMediaCont.fadeOut(mediaFadeTime,function(){
                actMediaText.find(".button").hide();
                numToPlay++;
                if(numToPlay>bannernum-1) {
                  numToPlay = 0;
                }
                actMediaText.hide();
                playNextBanner();
              });
            } else {
              fadeOutAndGoInterval = setInterval(fadeOutAndGo,1000);
            }
          };
          goOutTimer = setTimeout(fadeOutAndGo,actTime*1000);
        });
      },textComeTime);
      
    });
  }