// test.js
window.onload = function () {
    document.getElementById('stop').onclick = stopRotire;
    
    var intervalID1,
        intervalID2,
	  count = 0,
	  imgid = 0,
        anim_count = 0,
        directie = 'sus',
        pictures = new Array(3),
        my_box = document.getElementById('my_box'),
        myImage = document.getElementById('myImage');

  pictures[0] = new Image(750, 280);
  pictures[0].src = "logo.png";
  pictures[1] = new Image(750, 280);
  pictures[1].src = "uc.png";
  pictures[2] = new Image(750, 280);
  pictures[2].src = "logo.png";
  pictures[3] = new Image(750, 280);
  pictures[3].src = "uc.png";

    changeColor();
    changeWidth();
    
    function changeColor() {
        intervalID1 = setInterval(flashText, 1000);
    }
    
    function changeWidth() {
        intervalID2 = setInterval(flashWidth, 50);
    }
    
    function flashText() {
        my_box.style.color = my_box.style.color === 'darkgrey' ? 'grey' : 'darkgrey';
    }
    
    function flashWidth() {
	  //document.getElementById("p1").innerHTML = 'Contor: '+count+' imaginea: '+imgid;
	  //document.getElementById("p1").innerHTML = '#'+count;

        document.getElementById("myImage").setAttribute("style", "width:"+ anim_count +"px; height:280px");

        //anim_count += directie === 'sus' ? 5 : -5;
	  if (directie == 'sus') anim_count += 10;
	  if (directie == 'jos') anim_count -= 10;
        if (anim_count > 745) { directie = 'jos'; count++; }
        if (anim_count < 10) {
            if (imgid>2){
              imgid=0;
            } else {
              imgid++;
            }
            directie = 'sus';
            count++;
		myImage.src = pictures[imgid].src;
        }
        //myImage.setAttribute('style', 'width: ' + anim_count + 'px; height: 280px');
	  myImage.style.width = anim_count + 'px';
    }
    
    function stopTextColor() {
        clearInterval(intervalID1);
    }
    function stopRotire() {
        clearInterval(intervalID2);
    }
};