@extends('layouts.master')
@section('head')
@parent
{{ HTML::style('css/home.css') }} 
<!--[if IE 8]>
{{ HTML::style('css/home_ie8.css') }} 
<![endif]-->
<script>
$(document).ready(function(){
  for(var i = 0; i < 4; i++) {
    $("#img" + i).css("top",i*155+5);
  }
  $(".right-img").hover(function(){
    $(this).css("height",615).css("top",5);
    $(this).find(".hover-img").css("z-index","5").show().animate({
      "top":0,
        "height": 615
    },500);
    $(".right-img").find(".original-img").fadeOut();
  }, function(){
    $(".right-img").find(".original-img").stop(true,true).show();
    $(this).css("height",150).css("top",$(this).data("top"));
    $(this).find(".hover-img").stop(true,true).hide().css("height","150").css("top",$(this).data("top"));
  });
});
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
@stop

@section('menu')
@parent
@stop

@section('content')
<div class="content">
    <div class="left-img"><a rel='羿興股份有限公司，電鍍，彰化縣' href="{{ URL::to('home') }}">{{ HTML::image('images/HomeL.jpg') }}   </a></div>

    <ul class="photo-grid">

        <li class="right-img" id="home0" data-id="0" data-top="5">
        <a rel='羿興股份有限公司，電鍍，彰化縣' href="{{ URL::to('introduction') }}">
            <figure>
                {{ HTML::image('images/Home01.jpg','1',array('class'=>'original-img','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
                {{ HTML::image('images/Home01-big.jpg','1',array('class'=>'hover-img','id'=>'img0','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
            </figure>
        </a>
        </li>
        <li class="right-img" id="home1" data-id="1" data-top="160">
        <a rel='羿興股份有限公司，電鍍，彰化縣' href="{{ URL::to('service') }}">
            <figure>
                {{ HTML::image('images/Home02.jpg','2',array('class'=>'original-img','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
                {{ HTML::image('images/Home02-big.jpg','2',array('class'=>'hover-img','id'=>'img1','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
            </figure>
        </a>
        </li>
        <li class="right-img" id="home2" data-id="2" data-top="315">
        <a rel='羿興股份有限公司，電鍍，彰化縣' href="{{ URL::to('contact') }}">
            <figure>
                {{ HTML::image('images/Home03.jpg','3',array('class'=>'original-img','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
                {{ HTML::image('images/Home03-big.jpg','3',array('class'=>'hover-img','id'=>'img2','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
            </figure>
        </a>
        </li>
        <li class="right-img right-img-final" id="home3" data-id="3" data-top="470">
        <a rel='羿興股份有限公司，電鍍，彰化縣' href="{{ URL::to('company') }}">
            <figure>
                {{ HTML::image('images/Home04.jpg','4',array('class'=>'original-img','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
                {{ HTML::image('images/Home04-big.jpg','4',array('class'=>'hover-img','id'=>'img3','title'=>'羿興股份有限公司，電鍍，彰化縣')) }} 
            </figure>
        </a>
        </li>
        <div class="clearfix"></div>
    </ul>
    <div class="clearfix"></div>

</div>   
@stop